Vueコンポーネント名について

Nuxtについて学習中に謎の記述が現れた。
それがこちらである。

<template>
  <div>
    <nav-bar /> 
    <Nuxt />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
export default {
  components: {
    NavBar,
  },
}
</script>

NavBarとnav-bar
記述が違うのになぜかコンポーネントとして読み込まれていた。
そういうルールでもあるのだろうか？
それについては分からないがコンポーネント名がどういった記述でなら読み込みができるのか調査してみた。

調査内容

export default
NavBar

〇 nav-bar 小文字ケバブケース
〇 NavBar　アッパーキャメルケース
〇 Nav-bar　大文字ケバブケース
〇 nav-Bar ケバブケースつなぎ大文字
〇 navBar キャメルケース
✕ nav_bar スネークケース
✕ navbar 小文字

<template>
  <div>
    <nav-bar /> <!-- 〇 -->
    <NavBar /> <!-- 〇 -->
    <Nav-bar /> <!-- 〇 -->
    <nav-Bar /> <!-- 〇 -->  
    <navBar /> <!-- 〇 -->
    <nav_bar /> <!-- ✕ -->
    <navbar/> <!-- ✕ -->
    <Nuxt />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
export default {
  components: {
    NavBar,
  },
}
</script>

まとめ

• initialが大文字か小文字かは関係ない
• -(ハイフン)も一文字であれば関係ない(nav--barはダメ)
• _(アンダーバーはダメ)
• navbarのように全部小文字だと違う文字列だと判定されるよう

どちらにせよややこしいのでexport defaultの記述と合わせる方が良いでしょう。

番外編

export default
Navbar

nav-bar
nav-Bar
これはどちらも読み込めるらしい...