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>




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

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →