Vue, Vuetify is not properly initialized

问题

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.

回答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

回答2:

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>

回答3:

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/vuetify@2.x/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/>'
})

回答4:

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.

回答5:

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>

回答6:

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

来源：https://stackoverflow.com/questions/57291304/vue-vuetify-is-not-properly-initialized

标签

javascript

Vue.js

vuetify.js