Is there anyone who is familiar with Laravel mix.webpackConfig ? After installing vuetify , something went wrong

Question

I am using Laravel. the Frontside is developed by Blade and vue. After Installing "vuetify". The other component which I have been using happened an error. I don't know what is going on. the component doesn't be shown in the div. when "const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');" is removed from mix.webpackconfig, the error from Calendar disappeared. Is that related to installing "vuetifty"?

ERROR

[Vue warn]: Error in render: "TypeError: Cannot read property 'lang' of undefined"

found in

---> <VCalendarMonthly>
       <VCalendar>
         <ACalendar> at resources/js/components/ACalendar.vue
           <Root>

app.js Code

window.Vue = require('vue');
Vue.use(require('v-calendar'));
Vue.component('a-calendar', require('./components/ArticleCalendar.vue').default);

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

<script src=" {{ mix('js/app.js') }}"></script>
<div id="app">
  <a-calendar url="{{ url }}"></a-calendar>
</div>

ACalendar.vue

<template>
  <div>
      <v-calendar v-on:dayclick="dayclick"></v-calendar>
  </div>
</template>



export default {
    data(){
        return {
          items:[
          ],
          isLoaded : false,
          isLoading : false,
          isError : false,
        }
    },
    props: {
      url : String
    },
}
</script>

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.webpackConfig({
    plugins: [
      new VuetifyLoaderPlugin(),
    ],
  });

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

app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

When I removed mix.webpackConfig and VuetifyLoaderPlugin,The calendar component works well.

I think, Installing vuetify is a completely different thing, because it has it's own functionality like you might have seen vuetify use it's own components. And Inside app.scss you can include it's css libraries including icons etc... which will be compiling inside laravel mix. Just like you might have noticed when you open app.scss by default it will have bootstrap css, so you need to override vuetify css and it's related things, then you will include the css and js file in your view. — Akhtar Munir

Akhtar Munir Akhtar Munir · Accepted Answer · 2020-06-25T15:25:49

After recently applied vuetify inside laravel 7 means with vuejs, I wasn't able to configure the vuetify actual settings, but that's what I have done and it works normal now.

Also I want to mention that vuetify has almost everything like calendars, tables buttons, forms etc...

resources/sass/app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Icons
@import '~@mdi/font/css/materialdesignicons.min.css';
@import '~material-design-icons-iconfont/dist/material-design-icons.css';

// Bootstrap
//@import '~bootstrap/scss/bootstrap';

// Vuetify
@import '~vuetify/dist/vuetify.min.css';

Note I have left the webpack.mix.js as it is

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'
import Vuetify from 'vuetify';

Vue.use(VueRouter);
Vue.use(Vuetify);

import {routes} from './routes';
import App from './components/App.vue';

const app = new Vue({
   el: '#app',
   vuetify: new Vuetify(),
   router: new VueRouter({mode: 'hash', routes}),
   render: h => h(App)
});

View where components are rendering means where app id is located

//Inside head tag
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

//Inside body tag
<v-app id="app"></v-app>

<script src="{{ asset('js/app.js') }}"></script>

This way I have configured my newly vuejs project with vuetify inside laravel 7, everythings is working fine, I might have misconfigured something means there might be a good approach than mine. But for me it's working now.

Is there anyone who is familiar with Laravel mix.webpackConfig ? After installing vuetify , something went wrong

1 Answers