Vue/Vuetify - Unknown custom element: - did yo

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

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

Edit: looks like VuetifyLoader will automatcially do that for you

https://vuetifyjs.com/en/framework/a-la-carte

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 2

You're likely experiencing a problem with the order of your operations. For instance, 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.

Here's an example of a fix in operation order: https://codesandbox.io/s/m9jpw517op

---

For the sake of providing the code snippet here in case of the link breaking in the future:

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

---

Edit: This answer has been amended after being accepted in order to fix an inaccuracy that could mislead future readers, minimize changes in the code sample for simplicity's sake, and avoid having the fix in question become inaccessible if the codesandbox website becomes unavailable.