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=""></script>
<script type="module" src=""></script>
<link rel="stylesheet" href=""/>

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

<link rel="stylesheet" href=""/>
<script type="module" src=""></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/" }}

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.




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



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



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 →