Unknown custom element: <v-app> - 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 the component correctly? For recursive components, make sure to provide the "name" option.

app.js:

import Vue from "vue";
import Vuetify from "./plugins/vuetify";
import store from "~/store";
import router from "~/router";

import App from "~/components/App";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
    store,
    router,
    Vuetify,
    ...App
});

App.vue:

<template>
  <v-app>
    <loading ref="loading" />
    <router-view />
  </v-app>
</template>

<script>
import Loading from "./Loading";

export default {
  el: "#app",
  components: {
    Loading
  }
};
</script>

<style>
</style>

plugins/vuetify.js:

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
    icons: {
        iconfont: "md" // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
    },
    theme: {
        dark: false
    },
    themes: {
        light: {
            primary: "#4682b4",
            secondary: "#b0bec5",
            accent: "#8c9eff",
            error: "#b71c1c"
        }
    }
});

Answer 1

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 2

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

Answer 3

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 4

Change

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

To

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

Answer 5

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 6

Docs at https://vuetifyjs.com/en/getting-started/unit-testing/#testing-efficiency suggest to create an instance pass it to mount.

beforeEach(() => {
  vuetify = new Vuetify()
})

const wrapper = mount(CustomCard, {
  localVue,
  vuetify
})