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

<s: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" }}

<s: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" }}">

<img src="{{ Vite::asset('resources/images/logo.png') }}">

Arbitrary Attributes

If you need to include additional attributes in your script and style tags, such as the data-turbo-track attribute, you can pass them as parameters using the attr: prefix:

{{ vite
  src="foo.js|bar.css"
  attr:data-turbo-track="reload"
  attr:async="true"
}}

<s:vite
  src="foo.js|bar.css"
  attr:data-turbo-track="reload"
  attr:async="true"
/>

You can also provide attributes that are specific to script or style tags:

{{ vite
  src="foo.js|bar.css"
 
  attr:script:data-turbo-track="reload"
  attr:script:async="true"
 
  attr:style:data-turbo-track="reload"
  attr:style:integrity="false"
}}

<s:vite
  src="foo.js|bar.css"
 
  attr:script:data-turbo-track="reload"
  attr:script:async="true"
 
  attr:style:data-turbo-track="reload"
  attr:style:integrity="false"
/>

Parameters