How to install correctly Vuetify in Laravel project - laravel

Question

I have been strugling for a few hours trying to install Vuetify in my laravel project but I cannot make it work correctly, the Vuetify components are working well but Icons and breakpoints are not, I tried everything and now Im kinda tired of this, I hope someone can help me...
Following the vuetify documentation I wrote this in my app.js
require('./bootstrap');
import Vue from 'vue';
import Vuex from 'vuex';
import router from './router'
import vuetify from './plugins/vuetify.js' // path to vuetify export
Vue.use(Vuex);
new Vue({
vuetify,
router,
}).$mount('#app')
and separately, a vuetify.js file
import '#mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
})
and added the vuetify-loader to my webpack.mix.js
const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
plugins: [
new VuetifyLoaderPlugin(),
]
}).sourceMaps();
mix.disableSuccessNotifications();
First of all, having this configuration the project wont even run, I get this error: "Error: Conflict: Multiple assets emit to the same filename fonts/vendor/#mdi/materialdesignicons-webfont.eot?a32fa1f27abbfa96ff2f79e1ade723d5"
So I removed the import "#mdi/font/css/materialdesignicons.css" from the vuetify.js file, no errors but the icons are not visible.
I took the code from the documentation of Toolbar and pasted in my project and this is how it looks
This is the code for that empty toolbar
<template>
<v-card
color="grey lighten-4" flat height="200px" tile>
<v-toolbar dense>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<div class="flex-grow-1"></div>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</template>
If I change iconfont from 'mdi' to 'mdiSvg' from the vuetify.js file I do get one icon but the others still missing
According to the documentation, this toolbar should look something like this:
but that's not it yet, I cannot even use vuetify breakpoints like $vuetify.breakpoint.smAndUp I get an undefined error in console

Answer 1

Using Vuetify with Laravel differs a little bit from the the documentation. and depends on Vuetify version and here how to install it for the last two versions
Vutify v1.5.x
// /resources/js/app.js file
import 'vuetify/dist/vuetify.min.css'; // vuetify style css
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify); // to access $vuetify inside your Vue components
A little bit different in Vuetify v2.0.x
// /resources/js/app.js file
import 'vuetify/dist/vuetify.min.css'; // vuetify style css
import Vue from 'vue';
import Vuetify from 'vuetify';
const app = new Vue({
vuetify: new Vuetify(), // to access $vuetify inside your Vue components
});
You can also if you like add vuetify.min.css inside app.scss file inside resources/sass folder along with material icons as follows:
// /resources/sass/app.scss
// Fonts
#import '~#mdi/font/css/materialdesignicons.min.css';
// Vuetify
#import '~vuetify/dist/vuetify.min.css';

Answer 2

go to the vuetifyjs website treeshaking method it is the best way!
https://vuetifyjs.com/en/getting-started/installation/
like the bellow!
import Vuetify, {
VApp,
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VMain,
VNavigationDrawer,
VFadeTransition,
VContainer,
VCol,
VRow,
VSpacer,
VLayout,
VFlex,
VContent,
VDivider,
VProgressCircular,
VAvatar,
VChip,
VMenu
} from 'vuetify/lib'
import fa from 'vuetify/lib/locale/fa'
Vue.use(Vuetify, {
components: {
VApp,
VAppBar,
VAppBarNavIcon,
VAppBarTitle,
VMain,
VNavigationDrawer,
VFadeTransition,
VContainer,
VCol,
VRow,
VSpacer,
VLayout,
VFlex,
VContent,
VDivider,
VProgressCircular,
VAvatar,
VChip,
VMenu
},
});
new Vue({
el: '#yourappid',
router: router,
render: h => h(App),
vuetify: new Vuetify({
rtl: true,
lang: {
locales: { fa },
current: 'fa',
},
}),
data() {
return {
breadcrumbs: [],
sidebarBg: "deep-purple"
}
}
});