Reputation: 425

How to use Vuetify 2 with Laravel

I haven't been able to integrate vuetify 2 successfully into a fresh installation of laravel. I understand that I have to install the vuetify-loader manually through webpack config since I'm not using Vue CLI 3. How do I do this in a laravel app?

I have tried modifying webpack config through webpack.mix.js by using code suggested by the vuetify documentation.

my webpack.mix.js looks like this:

const mix = require('laravel-mix');

//MYCODE
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')

    //MYCODE
    .webpackConfig(webpack => {
      return {
          plugins: [
            new VuetifyLoaderPlugin()
          ]
      };
    });

I have also tried changing APP_ENV in the .env file from "local" to "production".

When I npm run watch, I get this error:

/vuetifyapp/node_modules/webpack-cli/bin/cli.js:93 throw err; ^ Error: Cannot find module 'vuetify-loader/lib/plugin'

Upvotes: 1

Answers (5)

Filipe Cruz

Reputation: 119

After many issues, I solve this on Laravel 8. Add to the v-app tag on component.

// resources/js/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

// resources/js/app.js
window.Vue = require('vue').default

import vuetify from './vuetify'
import store from './store/store'

Vue.component('g-home', require('./components/pages/GHome.vue').default)

const app = new Vue({
    store,
    vuetify,
    el: '#app',
});

// Dependencies
{
        "laravel-mix": "^6.0.6",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.10",
        "vuetify": "^2.4.3",
        "vuetify-loader": "^1.7.1",
}

// webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
Mix.listen('configReady', webpackConfig => {
    // scss
    const scssRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.scss$/)
    );
    scssRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss";'
    })

    // sass
    const sassRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.sass$/)
    );

    sassRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss"'
    })
})
mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/gift.js', 'public/js')
    .vue()
    .sass('resources/sass/pages/home.scss', 'public/css')
    .sass('resources/sass/pages/gift.scss', 'public/css')
    .webpackConfig(Object.assign(webpack))
    .copyDirectory('resources/images/', 'public/images');

if (mix.inProduction()) {
    mix.version();
};

// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
    plugins: [
        new VuetifyLoaderPlugin(),
    ]
};

Upvotes: 0

Marcelo Fonseca

Reputation: 1844

I made a gist with the files you need to change to a Laravel app to add a SPA environment using Vue. It will be a similar configuration to a Vue-CLI environment and you can install npm packages like vuetify normally.

basically you need to config these 4 files:

resources/js/app.js;
resources/js/App.vue;
resources/views/welcome.blade.php;
routes/web.php;

The 4 files are in here: https://gist.github.com/marcelobbfonseca/9d1156ab3633793b765456c6a1f44bbc

If following this configuration your vue files will be in resources/js/ directory and you can run npm install vuetify. Add your vuetify.js file in resources/js/vuetify.js

This is an example vuetify.js config

resources/js/app.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './vuetify'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Vue.config.productionTip = false
const app = new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

resources/js/vuetify.js

import Vue from 'vue'
import Vuetify from "vuetify"
import ptBr from './locale/ptBr.ts'
import 'vuetify/dist/vuetify.min.css'
import '@fortawesome/fontawesome-free/css/all.css'

Vue.use(Vuetify)

export default new Vuetify({
    lang: {
        locales: { ptBr },
        current: 'ptBr',
    },
    icons: {
        iconfont: 'fa'
    },
    theme: {
        themes: {
            light: {
                primary: '#00551E',
                secondary: '#3C8750',
                tertiary: '#EEEEEE',
                accent: '#69FFF1',
                info: '#63D471',
                success: '#4CAF50',
                warning: '#FFC107',
                error: '#FF5252',
                danger: '#FF5252',
            },
            dark: {
                primary: '#321321'
            }
        }
    }
})

I wrote a short medium article for this environment configuration and unit testing

Upvotes: 0