Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

This course is the most refreshing take on teaching design that I've come across.

— Mikaël Sévigny, Developer

Vite:Content Tag

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

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

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.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →