Vuetify Uncaught TypeError: Cannot read property 'install' of undefined

Question

While trying to get material icons to load on my Vuetify project (with Webpack and Apollo) I am unable to get my app to display at all.

I followed the installation instructions from Vuetify for webpack, but am getting an error

Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
    at eval (vuetify.js?402c:12)
    at Module../src/plugins/vuetify.js (app.js:1253)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (main.js:15)
    at Module../src/main.js (app.js:1241)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at Object.1 (app.js:1338)

Which seems to indicate to me that the issue lies in my src/plugins/vuetify.js with the Vue.use(Vuetify) line. However, I can't determine why Vuetify is unable to be installed(?) because I am importing it in the file.

src/plugins/vuetify.js

import Vue from 'vue'
import {
    Vuetify,
    VApp,
    VCard,
    VIcon,
    /* other imports ... */
} from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify);

const opts = {
    components: {
        VApp,
        VCard,
        VIcon,
        /* other imports */
    },
    icons: {
        iconfont: 'mdi', // default - only for display purposes
    },
}

export default new Vuetify(opts)

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import apolloProvider from './vue-apollo'
import store from './store'
import vuetify from '@/plugins/vuetify'

Vue.config.productionTip = false

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

As I understand it, Vue.use(Vuetify) in src/plugins/vuetify.js is instructing Vue to install/utilize Vuetify, which is coming from 'vuetify' (which I have confirmed is installed in node_modules). Then options are defined, like specifying icon set and any components that will be used, and then Vuetify is instantiated with those options and passed outwards through export default new Vuetify(opts).

This exported Vuetify is then accessed in main.js by importing it from @/plugins/vuetify. I believe the @ is a shortcut for webpack that will tell webpack to resolve the alias to the src folder. Since vuetify is provided as the alias for the import, I then pass it into the Vue instantiation. Does all of that seem right?

Also I have a babel.config.js with very little content, though I don't expect that to be related to my issue.

Now, on to the question of why isn't this working and how do I make it work?

Sergey Sklyar Sergey Sklyar · Accepted Answer · 2021-02-10T21:46:50

You are importing Vuetify as separate components.
Please try to import Vuetify class directly:

// src/plugins/vuetify.js

import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  },
})

link

And thus, you will import entire Vuetify class with install function set as:
Vuetify.install = install;

Also, for optimal bundle size, consider to use treeshaking for Vuetify. As they say:

"In order to use treeshaking, you must import Vuetify from vuetify/lib."
and
"Treeshaking will only work with Webpack 4 in production mode.
This is automatic when using Vue CLI."

Vuetify Uncaught TypeError: Cannot read property 'install' of undefined

1 Answers