The vite:content tag allows you to output the contents of a Vite asset. This is useful if you need to inline the contents of a CSS or JavaScript file.
<style> {{ vite:content src="resources/css/app.css" }}</style> <script> {{ vite:content src="resources/js/app.js" }}</script>// Using Antlers Blade components.<style> <s:vite:content src="resources/css/app.css" /></style> <script> <s:vite:content src="resources/js/app.js" /></script> // Using Blade directives.@use('Illuminate\Support\Facades\Vite') <style> {!! Vite::content('resources/css/app.css') !!}</style> <script> {!! Vite::content('resources/js/app.js') !!}</script>
Psst!
The vite:content tag will only output the contents of "built" assets. This means that changes made while running npm run dev will not be reflected in the output.
If you need to, you can also specify a custom build directory.
{{ vite src="resources/css/tailwind.css|resources/js/site.js" directory="bundle" }}<s:vite src="resources/css/tailwind.css|resources/js/site.js" directory="bundle"/>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.
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.
