Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Bought Jack McDade's course on design. Going through it now...and it is SO well done!

— Justin Jackson, Transistor.fm

Vite Tag

This tag is used in tandem with the Vite build tool to return the path to CSS and JavaScript files.

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

src

string

The path to the file, relative to your project root. You may pass multiple files and paths.

directory

string

The path to the desired build directory, relative to the public directory. Defaults to build.

hot

string

The path to the desired location for the hot file, relative to your project root. Defaults to public/hot.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →