I am facing an issue with my Vue CLI application that uses Webpack and Vuetify. The Vuetify components are not loading properly, and I keep getting the following warnings:
Unknown custom element: < v-app > - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Unknown custom element: < v-alert > - did you register the component correctly? For recursive components, make sure to provide the "name" option.
JS File (newtab.js):
import Vue from 'vue';
import Vuetify from '../plugins/vuetify'
import App from './App';
Vue.use(Vuetify);
new Vue({
Vuetify,
components: { App },
render: h => h(App)
}).$mount('#app')
Vuetify Plugin File:
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
export default new Vuetify({});
Vue File (App.vue):
<template>
<v-app id="inspire">
<v-alert type="success">
I'm a success alert. {{ message }}
</v-alert>
</v-app>
</template>
<script>
//import { VApp, VAlert } from 'vuetify/lib'
export default {
data () {
return {
message: "Additional message"
}
}
}
</script>
<style scoped>
p { font-size: 20px; }
</style>
I have tried using vue-loader to dynamically import the components, ensuring that all necessary packages are up to date.
├── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcaaa9b9f1bfb0b5f1acb0a9bbb5b2f1aaa9b9a8b5baa59ceef2ecf2e9">[email protected]</a>
└── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a3c3f2f6726252b2e2f380a7b7f6473647b">[email protected]</a>
I have also attempted to manually import the components in both the main JS file and the Vue file itself:
import Vue from 'vue';
import Vuetify, {
VApp, VAlert
} from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify, {
components: {
VApp, VAlert
}
});
export default new Vuetify({});