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