Vue, Vuetify is not properly initialized

Question

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.

Answer 1

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