Vue/Vuetify - Unknown custom element: <v-app> - did you register the component correctly?

Question

I am new to Vue and Vuetify. I just created quick app to check both of them. But I am a running into issues in beginning. The vue fails to identify vuetify components despite following all the steps outlined in document. The error is like below -

vue.runtime.esm.js?ff9b:587 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at src\App.vue

You can access the entire code at sandbox https://codesandbox.io/s/40rqnl8kw

Answer 1

You're likely experiencing a problem with the order of your operations. You're defining your own App component that uses the v-app component before you've even told Vue to make use of it, so Vue assumes you're using your own custom v-app component.

Place Vue.use(Vuetify) before starting any Vue instances via new Vue() that require Vuetify components, or place it within the component definitions themselves right at the top of the <script> tag after importing Vue and Vuetify within the single file component. Don't worry if you have more than one Vue.use(Vuetify) statement because only the first one will do anything--all subsequent calls will simply do nothing.

---

Original - Vue.use() is called before new Vue(), resulting in an error.

new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});

Vue.use(Vuetify);

Fix - Calling new Vue() after Vue.use() allows Vue to resolve the dependency correctly.

Vue.use(Vuetify);

new Vue({
    el: "#app",
    components: { App },
    template: "<App/>"
});

Answer 2

There is another reason for this error that I recently ran into.

I recently upgraded from Vuetify 1.5 to 2.x and even though I had the order of operations correct as in the currently accepted answer here I was still receiving the error about v-app being unknown:

Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Turns out that the upgrade process requires the following addition to package.json devDependencies section which didn't originally exist in my vuetify 1.5x package:

"vuetify-loader": "^1.3.0"

(1.3.0 current version as of this writing)

Once I added that the error went away.

Answer 3

If you are coming from Google: for me it was breaking changes from v1 to v2, that made most Codepen examples useless. I had to change this to get a very simple Vuetify app with navigation drawers to run again:

remove toolbar from <v-app toolbar>
replace v-toolbar with v-app-bar
replace v-app-bar-side-icon with v-app-bar-nav-icon
replace v-app-bar-title with v-toolbar
replace v-list-tile to v-list-item

replace all flat with text

Maybe this helps someone.

(edited to include cong yu's remark)

Answer 4

Edit: it looks like VuetifyLoader will automatcially do that for you.

Old Answer: Another possible problem is if you have a la carte enabled you will need to also specify all the components that you want included:

import Vue from 'vue'
import App from './App.vue'
import Vuetify, {
  VApp, // required
  VNavigationDrawer,
  VFooter,
  VToolbar,
  VFadeTransition
} from 'vuetify/lib'
import { Ripple } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  components: {
    VApp,
    VNavigationDrawer,
    VFooter,
    VToolbar,
    VFadeTransition
  },
  directives: {
    Ripple
  }
})

Answer 5

With vuetify v2.x you should register the vuetify plugin as follows :

import Vue from 'vue'

/** register vuetify plugin globally **/

import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
const vuetify= new Vuetify(opts)
/****/

new Vue({
  vuetify,
}).$mount('#app')

Vuetify v3

import { createApp } from 'vue'

import App from './App.vue'

/*****/
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'

const vuetify= createVuetify({
  components,
  directives,
})
/****/

const app = createApp(App)
app.use(vuetify)

app.mount('#app')

Answer 6

I experienced the same issue. It was caused by the cache of the browser make sure to clear the cache as well.