Vuetify - Unknown custom element problem with any component

Question

I've trying to solve this problem for the last 2 hours and can't find the solution. I created a new project with Vue cli and installed Vuetify with npm.

My files are like this

App.vue

    <template>
    <v-app id="app">
       <HelloWorld/>
      </v-app>
    </template>

    <script>
    import HelloWorld from './components/HelloWorld.vue';

    export default {
      name: 'App',
      components: {
        HelloWorld
      },

      data: () => ({
        //
      }),
    };
    </script>

main.js

    import Vue from 'vue'
    import Vuetify from './plugins/vuetify';
    import App from './App.vue'

    Vue.config.productionTip = false

    Vue.use(Vuetify); 

    new Vue({
      render: h => h(App)
    }).$mount('#app')

HelloWorld.vue

    <template>
       <v-tabs>
        <v-tab>Item One</v-tab>
        <v-tab>Item Two</v-tab>
        <v-tab>Item Three</v-tab>
      </v-tabs>
    </template>

    <script>
      export default {
        name: 'HelloWorld',
      }
    </script>

The error I get is:

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

found in

---> at components/HelloWorld.vue at App.vue **

I also tried to use any component directly in the vue.app and get the same problem. Before posting here I lookup to at least 10 different posts, and I read that I should call vuetify before the new Vue but that didn't solve the problem. I dont know if there is something missing or I just cant see the problem.

Thanks for reading my post

Finally made it work. The problem was that it wasn't loading the dependencies. I used vue create helloworld then vue add vuetify. This generated two levels of node_modules, the first one with all the dependencies, and the second one inside the src folder with only the vuetify dependencies. Had to install everything in it's correct place one by one. Then got a problem with styles, which I solved adding "import "vuetify/dist/vuetify.min.css";" in my plugins/vuetify.js file. Hope this helps someone someday. — silphonix

T. Short T. Short · Accepted Answer · 2019-12-20T22:17:17

I suspect the problem is with <v-tabs>. I'm not very familiar with vuetify. Shouldn't this component be imported and registered (like any other component would be?).

EDIT

Oh I think you need to pass Vuetify

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

They have a getting started doc here:

https://vuetifyjs.com/en/getting-started/quick-start

Try to setup your project in the same way.

Vuetify - Unknown custom element problem with any component

2 Answers