Atributos personalizados en @vite en Laravel

Ya conocemos que cargamos nuestros archivos CSS y JS en Laravel con vite mediante:

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

En nuestros archivos blade; al momento del renderizado, obtenemos las etiquetas de HTML como:

<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>

Pero, qué pasa si quieres personalizar a nivel de atributos, por ejemplo, el async para los JavaScript; para ello, podemos agregar las modificaciones a nuestro 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', 
       ]);
    }
}

Por lo tanto, de esta forma es la que debemos de seguir para poder personalizar los atributos de las etiquetas de script y link con vite y Laravel.

- Andrés Cruz

In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos Curso y libro Laravel 11 con Tailwind Vue 3, introducción a Jetstream Livewire e Inerta desde cero - 2024.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.