Vite Tag

The vite tag is a wrapper around Laravel's Vite integration. It is essentially an Antlers version of the @vite Blade directive.

You should pass in both the css and javascript paths, and it will output the appropriate html tags.

{{ vite src="resources/js/app.js|resources/css/app.css" }}

If you are running in development mode by running npm run dev, it will handle hot-reloading (e.g. save a css file, your page will update automatically without you refreshing).

<script type="module" src="http://127.0.0.1:3000/@vite/client"></script>
<script type="module" src="http://127.0.0.1:3000/resources/js/site.js"></script>
<link rel="stylesheet" href="http://127.0.0.1:3000/resources/css/site.css"/>

Otherwise, it will use the compiled assets, which you would have done by running npm run build.

<link rel="stylesheet" href="http://yoursite.com/build/assets/site.3bc13c9b.css"/>
<script type="module" src="http://yoursite.com/build/assets/site.67066a5d.js"></script>

Additionally, you can set custom locations for the build directory and hot file.

{{ vite src="resources/css/tailwind.css|resources/js/site.js" directory="bundle" hot="storage/vite.hot" }}

When using these options, please make sure to also adjust your vite.config.js file. More about advanced customization can be found in Laravel's Vite docs.

Processing Static Assets With Vite

To process static assets in your Antlers files with Vite, as described in the Laravel's Vite Docs, you should use:

<img src="{{ vite:asset src="resources/images/logo.png" }}">

Parameters