I have setup Vuetify on my Vue webpack application.

My project is setup with vue init webpack my-project running Vue 2.5.2 and using Vuetify 2.0.2.

I have installed Vuetify in my App.js

import Vue from 'vue'
import '../node_modules/vuetify/dist/vuetify.min.css';
import App from './App'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

Everything seems to be working fine. I'm able to call Vuetifycomponents in one of my components.

<template>
  <v-container>
        <v-card width="400" height="150" raised>
          <h4>Hello</h4>
        </v-card>
  </v-container>
</template>

I then read that I need to wrap my App.js with the v-app component, but when I do that I get an error saying: Error: Vuetify is not properly initialized.

<template>
  <div id="app">
    <v-app>
      <NavigationBar />
      <v-content>
        <router-view />
      </v-content>
    </v-app>
  </div>
</template>

Maybe Vuetify isn't installed correctly, I hope some of you can bring some light on my issue.

I have setup Vuetify on my Vue webpack application.

My project is setup with vue init webpack my-project running Vue 2.5.2 and using Vuetify 2.0.2.

I have installed Vuetify in my App.js

import Vue from 'vue'
import '../node_modules/vuetify/dist/vuetify.min.css';
import App from './App'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

Everything seems to be working fine. I'm able to call Vuetifycomponents in one of my components.

<template>
  <v-container>
        <v-card width="400" height="150" raised>
          <h4>Hello</h4>
        </v-card>
  </v-container>
</template>

I then read that I need to wrap my App.js with the v-app component, but when I do that I get an error saying: Error: Vuetify is not properly initialized.

<template>
  <div id="app">
    <v-app>
      <NavigationBar />
      <v-content>
        <router-view />
      </v-content>
    </v-app>
  </div>
</template>

Maybe Vuetify isn't installed correctly, I hope some of you can bring some light on my issue.

• javascript
• vue.js
• vuetify.js

8 Answers 8

There is lot of changes with new version.

try this

import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);

new Vue({
vuetify : new Vuetify(),
...
});

good luck

I do it this way (vue 3.9, vuetify 2.0)

In main.js (or App.js)

import vuetify from './plugins/vuetify'
...
new Vue({
  ...
  vuetify,
  render: h => h(App)
}).$mount('#app')

In plugins/vuetify.js

import Vue from "vue"
import Vuetify from "vuetify/lib"

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'md',  // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
  },
  theme: {
    dark: false,
  },
  themes: {
    light: {
      primary: "#4682b4",
      secondary: "#b0bec5",
      accent: "#8c9eff",
      error: "#b71c1c",
    },
  },
})

in App.vue

<template>
  <v-app>
    ...
  </v-app>
</template>

If you are using vue-cli, Add these lines to file index.html after meta tags:

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

And your main.js should look like this:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'

Vue.config.productionTip = false
Vue.use(Vuetify)
export default new Vuetify({ })

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  vuetify: new Vuetify(),
  components: { App },
  template: '<App/>'
})

Patrice has one of my preferred finely tailored answers, depending on configuration, this may be what you need:

webpack | vue 2.5+ | vuetify 2.1+

In your main.js/App.js

import Vue from 'vue'
import router from './router'
import vuetify from './plugins/vuetify' // path to vuetify export

//Vue.component('example-component', require('./components/ExampleComponent.vue').default);

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

In your plugins/vuetify.js

// resources/js/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

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

In your EaxmpleComponent.vue and all other vue files: Wrap all vue components in v-app and template tag like:

<template>
  <v-app>
    ...
  </v-app>
</template>

I had encountered same issue.

[email protected]
[email protected]
[email protected]
+ typescript

I got solved with below.

[layouts/default.vue]

<script  lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import Vuetify from 'vuetify'

@Component({
  vuetify:new Vuetify()
})
export default class extends Vue {
}
</script>

if you not typescript
below helps you.

<script>
import Vuetify from 'vuetify'

export default {
vuetify: new Vuetify(),
}
</script>

Try adding:

const opts = {
  theme: {
    dark: true,
    themes: {
      light: {
        primary: '...',
        ...
      },
      dark: {
        primary: '...',
        ...
      }
    }
  }
}

and

new Vue({
  el: '#app',
  router,
  store,
  vuetify: new Vuetify(opts),
  render: h => h(App)
})

to your main.js.

When adding vuetify (2.x) to gridsome, I had the same problem and had to add the vuetify import object to appOptions in main.js:

appOptions.vuetify = new Vuetify({})

as described in:

https://github.com/gridsome/gridsome.org/blob/master/docs/assets-css.md

and

https://github.com/gridsome/gridsome/issues/603#issuecomment-567056678

Below link Helped me.

https://www.codetd.com/en/article/7261224

import Vue from 'vue' import App from './App.vue' import router from './router/index' import store from './store/index'

import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false

Vue.use(Vuetify) // vuetify 自定义配置 export default new Vuetify({})

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