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.