Vuetify Laravel Mix Extension

Usage

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

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

Highly recommend updating you mix version to ^6.0.0, as it provides much better experience and much faster.

The code snippets are for mix ^6.0.0, if you are still not convinced and want to use mix version ^5.0.0 see the old api here

1. Install

npm i [email protected] -D

2. Then require the extension in your Mix configuration:

const mix = require('laravel-mix')

require('vuetifyjs-mix-extension')

3. Enable the extension by calling vuetify() in your Mix chain:

mix.js('resources/js/app.js', 'public/js').vuetify().vue()
//if you use vuetify-loader
mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader').vue()

4. 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('vuetify-loader', 'src/path/to/variables.scss')
    .vue()

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)
    .vue()

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'
    })
    .vue()

Postcss support

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

known issue (for existing plugin users 26/01/2021)

If you are using mix ^6.0.0 you should face this error, Error: Cannot find module 'webpack/lib/RuleSet'

This is because the vuetify-loader current release is not supported webpack 5, the @next version has the webpack 5 support.

There are two ways you can solve this error (assuming you have the latest version of this plugin which is 0.0.20):

1. `npm uninstall vuetify-loader` and then run you compile scripts.

2. Just simply update `vuetify-loader` to `@next` by running `npm i vuetify-loader@next -D`

If you use this plugin for the first time, you should not face this.

License

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