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

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/>"
});

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.


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)