I encountered errors in my Laravel project, specifically with custom elements like this.
[Vue warn]: Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <AdminComponent> at resources/js/components/AdminComponent.vue
<Root>
All of the custom elements are showing as unknown. Here is a snapshot of my error.
Error Screenshot
js/app.js
require('./bootstrap');
// Vue
import Vue from 'vue'
// Vuetify
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/es5/util/colors'
// Vue-Router
import router from './router/index.js'
Vue.use(Vuetify, {
theme: {
light: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3,
}
}
});
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
// Main app
const app = new Vue({
el: '#app',
router,
});
This file is related to routing.
js/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//
import admin_component from '../components/AdminComponent.vue'
import r_link from '../components/RouterLink.vue'
//
Vue.component('admin-component', admin_component);
Vue.component('r-link', r_link)
//
import home from '../components/HomeComponent.vue'
import admin_user from '../components/Admin/UserComponent.vue'
export default new Router({
mode: 'history',
routes: [
{ path: '/', name: 'home', component: home, meta: {name: 'home', icon: 'home'}},
{ path: '/admin/user', name: 'admin_user', component: admin_user, meta: {name: 'management', icon: 'supervisor_account'}},
],
})
This part contains errors related to vuetify.
js/components/AdminComponent.vue
<template>
<v-app id="app">
Contains various custom elements
</v-app>
</template>
<script>
export default {
name: 'AdminComponent',
props: {
name: String,
logout: String,
},
data: () => ({
drawer: false,
footer: 'foo-----footer',
title: 'tit------title',
}),
}
</script>
This is my package.json
{
"dependencies": {
"css-loader": "^3.2.0",
"material-design-icons-iconfont": "^5.0.1",
"vue-router": "^3.1.3",
"vuetify": "^2.1.1"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^5.0.0",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.0",
"sass": "^1.22.12",
"sass-loader": "^8.0.0",
"vue": "^2.5.7",
"vue-cli-plugin-vuetify": "^0.6.3",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
}
}
The version of Laravel I'm using is 5.7
php artisan --version
Laravel Framework 5.7.28
Can anyone guide me on how to properly register the component for AdminComponent? I would really appreciate some help...