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.