Vueコンポーネントを登録した際、[Vue warn]: Unknown custom elementと出てしまう

Question

前提・実現したいこと

[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

追記

参考にしているサイトhttps://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project/

.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>

Footer.vue

<template>
    <footer class="page-footer font-small unique-color-dark pt-4">
        <RouterLink class="button button--link" to="/login">
      Login / Register
    </RouterLink>
    </footer>
</template>

PhotoList.vue ここだけ表示されている

<template>
    <h1>Photo List</h1>
</template>


<script>
</script>

現在表示されている画面

Comments

[plasticgrammer]

フォルダ構成について追記をお願いします。
App.vue, router.js はそれぞれどこに格納されているのでしょうか。

[Tikka123456]

回答ありがとうございます。フォルダ構成について追記しました。

[plasticgrammer]

追加で確認させてください。Footerの表示は上手くできているのでしょうか。
また、Navbar.vueのソースも追記頂けないでしょうか。（nameの指定があるかどうか確認したいです）

[Tikka123456]

返信ありがとうございます。Footerは表示されていません。NavbarもFooterもnameの指定はしていません。参考にしたサイトのURLも追記しました。

[otolab]

commponentが気になる...。componentのtypo?

Answer 1

    commponents: {
      Navbar, //このコンポーネントが読み込まれない
      Footer
    }

mが一個多いです。componentじゃないとVueは理解してくれません。
ディレクトリ構成とかはtypoしてても動きますが、API絡みになってくると働かないです。

footerはFooter Elementがあるので、エラーが出ないだけだと思います。
http://www.htmq.com/html5/footer.shtml

Comments

[Tikka123456]

回答ありがとうございます！
単純なスペルミスにお時間を取らせてしまい申し訳ございません。

Answer 2

Footer.vue に export の定義を追加するとどうなるでしょうか。

<template>
    <footer class="page-footer font-small unique-color-dark pt-4">
        <RouterLink class="button button--link" to="/login">
      Login / Register
    </RouterLink>
    </footer>
</template>

<script>
export default {
    name: "Footer"
}
</script>

Comments

[Tikka123456]

回答ありがとうございます。nameをFooterとNavbarに記述しましたが変わりませんでした。