New Power Manual


    0.0.2 • Public • Published

    npm npm NPM

    Vuetify Laravel Mix Extension


    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 vuetifyjs-mix-extension@0.0.20 -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().vue()
    //if you use vuetify-loader
    mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader').vue()
    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('vuetify-loader', 'src/path/to/variables.scss')

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


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


    npm i @tofandel/vuetifyjs-mix-extension

    DownloadsWeekly Downloads






    Unpacked Size

    17.2 kB

    Total Files


    Last publish


    • tofandel