Custom attributes in @vite in Laravel

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

@vite(['resources/css/blog.css'])
@vite(['resources/js/blog.js'])

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

<link rel="preload" as="style" href="https://www.desarrollolibre.net/build/assets/blog-6Y1hNTHC.css" />
<script type="module" src="https://www.desarrollolibre.net/build/assets/blog-Bdalpt8p.js"></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:

app/Providers/AppServiceProvider.php

use Illuminate\Support\Facades\Vite;
***
class AppServiceProvider extends ServiceProvider
{
    ***
    public function boot(): void
    {
        Vite::useScriptTagAttributes([
         'data-turbo-track' => 'reload', 
         'async' => true, 
         'integrity' => false, 
       ]);
 
       Vite::useStyleTagAttributes([
          '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.