Vuetifyjs Setup for Laravel Mix extensions.
latest v0.0.17 - released
1114 downloads last week
MIT license
17 versions
vuetify js

Vuetify Laravel Mix Extension

NOTE: ATM this library does not support mix v6, will update to support soon. 👩‍🦯 (Wait! what do you mean by "soon"? I mean this WEEKEND!!! OK???) 👩‍🦯


If you are a Laravel user, here are some useful instructions.

NOTE: This extension only supports sass-loader ^9.0.0 ATM.

  1. Install
npm i vuetifyjs-mix-extension -D
  1. Then require the extension in your Mix configuration:
const mix = require('laravel-mix')

  1. Enable the extension by calling vuetify() in your Mix chain:
mix.js('resources/js/app.js', 'public/js').vuetify()
//if you use vuetify-loader
mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader')
  1. Run npm script
npm run dev

SASS variables

NOTE: This is only supported when using tree-shaking

By default it's going to look at your root directory 'resources/sass/variables.scss' file. It's going to use that file, if it exists.

You can also give it a different path, for example:

mix.js('resources/js/app.js', 'public/js').vuetify(

Progressive images

If you want to use Progressive images feature, it is also easy to configure.

NOTE: You must have ImageMagick, GraphicsMagick, or sharp installed for this to work.

All you need to do is to pass the progressiveImages options in when you enable vuetify-loader.

Here is an example:

const options = { progressiveImages: true }
mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader', options)

Of course you can pass more options to it, it works the same as the vuetify-loader doc.

Finally, if you use both Progressive images and SASS variables, just pass both arguments after 'vuetify-loader'. The order of the arguments does not matter

Extract css

To extract all Vuetify components css, pass the extract option.

mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader', {
    extract: 'css/vuetify-components.css'

Postcss support

mix.js('resources/js/app.js', 'public/js').vuetify('', { postcss: true })


The MIT License (MIT). Please see License File for more information.