Mix Tag
The Mix tag is used in tandem with Laravel Mix to return the path to versioned CSS and JavaScript files.
Overview#
Laravel Mix is a legacy build tool — new Statamic projects use Vite and the vite tag instead. This tag is here for older sites that still compile their assets with Mix.
Laravel Mix is a Webpack API wrapper for compiling and building CSS and JavaScript files. The mix tag returns the path to a versioned Mix file. Don't worry, if you're not using versioning it will return the path to the non-versioned file.
// CSS
<link href="{{ mix src='/css/tailwind.css' }}" rel="stylesheet">
// JavaScript
<script src="{{ mix src='/js/app.js' }}"></script>
// CSS
<link href="{{ Statamic::tag('mix')->src('/css/tailwind.css') }}" rel="stylesheet">
// JavaScript
<script src="{{ Statamic::tag('mix')->src('/js/app.js') }}"></script>
Default Directory#
By default Mix will assume that the mix-manifest.json file that points to the proper file locations is in your public/ directory. If your file is configured to build elsewhere you can point to it with the in parameter.
<link href="{{ mix src='/css/tailwind.css' in='assets' }}" rel="stylesheet">
<link href="{{ Statamic::tag('mix')->src('/css/tailwind.css')->in('assets') }}" rel="stylesheet">
Related Reading#
- Laravel Mix docs
- The vite tag — the modern replacement
- Webpack
Parameters
src
The path to the versioned file, relative to your public/ directory.
in
The location of your mix manifest file relative to the public/ directory.
