How to use Vuetify 2 with Laravel - laravel

Question

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'

Answer 1

Some how I managed to integrate can't remember how. Hope this will help you.
https://github.com/avgkudey/LaraVuetify

Answer 2

After installing vuetify, you should upload / install your dependences, try to do :
npm install
And try after :
npm run watch
It should works

Answer 3

Just install the package:
npm install vuetify-loader -D

Answer 4

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

Answer 5

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(),
]
};