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.