Custom attributes in @vite in Laravel

We already know that we load our CSS and JS files in Laravel with vite using:


In our blade files; at the time of rendering, we get the HTML tags like:

<link rel="preload" as="style" href="" />
<script type="module" src=""></script>

But what happens if you want to customize at the attribute level, for example, async for JavaScript; to do this, we can add the modifications to our provider:


use Illuminate\Support\Facades\Vite;
class AppServiceProvider extends ServiceProvider
    public function boot(): void
         'data-turbo-track' => 'reload', 
         'async' => true, 
         'integrity' => false, 
          'data-turbo-track' => 'reload', 

Therefore, this is the way we must follow to be able to customize the attributes of the script and link tags with vite and Laravel.

- Andrés Cruz

En español

This material is part of my complete course and book; You can purchase them from the books and/or courses section, Curso y libro Laravel 11 con Tailwind Vue 3, introducción a Jetstream Livewire e Inerta desde cero - 2024.

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.