Unknown custom element: - did you register the component correctly? For recursive components

Question

Hey I have a problem with importing vuetify into my project...

What am I doing wrong?

[Vue warn]: Unknown custom element: - did you register

Answer 1

Step 1: Install Vuetify in your Project using "vue add vuetify" command

Step 2: In main.js write following code

import vuetify from './plugins/vuetify'; //plugins folder installed when you add vuetify

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

Step 3: Restart your Project because whenever you changed in main.js file then you need to restart your Project.

Answer 2

To add Vuetify to existing project you should follow the below procedure

In your project folder run,

npm install vuetify --save

In your app.js

import Vuetify from 'vuetify/lib'
// To add vuetify css file
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)

export default new Vuetify({ ... })

To finish, you need to add a v-app component that wrap your entire application in order to make Vuetify works.

<v-app id="app">
  <router-view/>
</v-app>

Answer 3

Change

    new Vue({
    store,
    router,
    Vuetify,
    ...App
});

To

    store,
    router,
    vuetify: Vuetify,
    ...App
   });

Answer 4

Had the same issue which has bugged my head for like an hour now, how this worked I don't know either: but this is what I changed when importing vuetify in vuetify.js

changed:

import Vuetify from 'vuetify/lib'

replaced it with:

import Vuetify from 'vuetify'

Note: this could be a laravel issue only because the official vuetify documentation has the first form.

Answer 5

got that project created with vue-cli v3? You either need to register components yourself or have a vuetify loader added, that parses your components and generates that list itself. the respective docu you can find here https://vuetifyjs.com/en/customization/a-la-carte#vuetify-loader