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

Answer 1

I had encountered same issue.

vuetify@2.3.2
vue@2.6.11
nuxt@2.13.0
+ 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>

Answer 2

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

Answer 3

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>

Answer 4

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

Answer 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>

Answer 6

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.