Vue, Vuetify is not properly initialized

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/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 = falseVue.use(Vuetify)export default new Vuetify({ })/* eslint-disable no-new */new Vue({  el: '#app',  router,  vuetify: new Vuetify(),  components: { App },  template: '<App/>'})