_plugins_vuetify__WEBPACK_IMPORTED_MODULE_136__.default is not a constructor

Question

I have build a vue app with vue cli 3 and added vuetify. Now to reduce my bundle size I changed the vuetify import to:

I am using vuetify 1.5.5 and vue 3.7.0

import Vue from 'vue';
import Vuetify, { VLayout, VBtn, VApp } from 'vuetify/lib';
import 'vuetify/src/stylus/app.styl';

Vue.use(Vuetify, {
  components: {
    VApp,
    VLayout,
    VBtn,
  },
  theme: {
    primary: '#ee44aa',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107',
  },
  options: {
    customProperties: true,
  },
  iconfont: 'md',
});

export default Vuetify;

But after this I get this error in console:

Answer 1

summary: you shouldn't write export default Vuetify; vuetify.js is just a js file you should import in main.js

// plugins/vuetify.js


import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
iconfont: 'md',
  theme: {

primary: colors.green.base, // #4CAF50

secondary: colors.red.lighten4, // #FFCDD2

accent: colors.indigo.base, // #3F51B5

search: colors.grey.lighten2, // #E0E0E0

searchButton: colors.green.lighten3,  // #A5D6A7

newsBlock: colors.grey.lighten4, // #F5F5F5

// info: colors.lighten1,

// warning: colors.darken2,

// error: colors.accent4,

// success: colors.lighten2,

  }
})


// main.js

import Vue from 'vue'
import './plugins/vuetify'
...
new Vue({
  el: "#app",
  router,
  store,
  render: h => h(App),
})