After reading an article on Vue.js from this source, I decided to start learning it. Everything was going smoothly with my SPA until I tried to add a new component and encountered this error:
Unknown custom element: - have you registered the component correctly? If using recursive components, make sure to include the "name" option.
In my vueapp.js:
import Footer from './components/includes/Footer.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './components/App'
import Welcome from './components/Welcome'
import Page from './components/Page'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'welcome',
component: Welcome,
props: { title: "This is the SPA home" }
},
{
path: '/spa-page',
name: 'page',
component: Page,
props: {
title: "This is the SPA Second Page",
author : {
name : "Fisayo Afolayan",
role : "Software Engineer",
code : "Always keep it clean"
}
}
},
],
})
const app = new Vue({
el: '#app',
components: {
App,
'footer-div': Footer
},
router,
});
Any ideas on how to fix this issue?
UPDATE:
This is my folder structure:
https://i.sstatic.net/UeKnE.png
UPDATE2:
In my App.vue:
<template>
<div>
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<ul class="navbar-nav">
<router-link :to="{ name: 'welcome' }" class="nav-link">Home</router-link>
<router-link :to="{ name: 'page' }" class="nav-link" >Spa-Page</router-link>
</ul>
</div>
</nav>
<main>
<router-view></router-view>
</main>
<footer-div></footer-div>
</div>
</template>
<script>
export default {}
</script>