こちらと同じ質問で恐縮ですが…
前提・実現したいこと
[Vue warn]: Unknown custom element:というエラーを解決したい
エラー
[Vue warn]: Unknown custom element: <Navbar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <App> at resources/js/App.vue
<Root>
環境
Laravel Framework 6.18.20
vue 2.6.12
コード
app.js
import './bootstrap'
import Vue from 'vue'
import router from './router'
import App from './App.vue'
new Vue({
el: '#app',
router,
components: { App },
template: '<App />'
})
App.vue
<template>
<div>
<header>
<Navbar />
</header>
<main>
<div class="container">
<RouterView />
</div>
</main>
<Footer />
</div>
</template>
<script>
import Navbar from './commponent/Navbar.vue' //このコンポーネントが読み込まれない
import Footer from './commponent/Footer.vue'
export default {
commponents: {
Navbar, //このコンポーネントが読み込まれない
Footer
}
}
</script>
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// ページコンポーネントをインポートする
import PhotoList from './commponent/pages/PhotoList.vue'
import Login from './commponent/pages/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: PhotoList // 現在ココだけ表示されている。
},
{
path: '/login',
component: Login
}
]
// VueRouterインスタンスを作成する
const router = new VueRouter({
mode: 'history',
routes
})
export default router
フォルダ構成
.js
├──commponent
│ ├──pages
│ │ ├──Login.vue
│ │ └──PhotoList.vue
│ ├──Navbar.vue
│ └──Footer.vue
│
├──app.js
├──App.vue
└──router.js
Navbar.vue
<template>
<nav class="nav grey lighten-4 py-4">
<RouterLink class="navbar-brand" to="/">
タイトル
</RouterLink>
<ul class="navbar-nav ml-auto">
<div class="navbar-menu">
<li class="navbar-item">
<button type="button" class="btn btn-secondary btn-rounded">
<i class="icon ion-md-add"></i>
Submit a photo
</button>
</li>
<span class="navbar-item">
username
</span>
<div class="navbar-item">
<RouterLink class="button button--link" to="/login">
Login / Register
</RouterLink>
</div>
</div>
</ul>
</nav>
</template>