【Vue.js】「[Vue warn]: Invalid component name: "0".〜」のエラーが出たら確認すること！

あきぞらです。

Vue.jsでの開発をしていたとき、ブラウザのコンソールに表題のようなエラーが発生しました。

少しハマったのですが、

かなりの凡ミスですぐに解決ができたので今回はこのエラーについて紹介していきます。

「[Vue warn]: Invalid component name: "0".〜」のエラーについて

ブラウザのコンソールに、以下のようなエラーが表示されるようになってしまいました。

以下はGoogle Chromeで確認した場合のエラーです。

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid component name: "0". 
Component names should conform to valid custom element name in html5 specification.

この事象の原因と解消方法

原因は、意外とシンプルです。

コンポーネント名が ”0” になっていることからも分かる通り、

読み込ませたコンポーネントが「配列」になってしまっていることが原因でした。

コンポーネントを読み込ませているところを確認してみます。

<script>
import draggable from 'vuedraggable'

export default {
  components: [
    draggable,
  ]
...
...

}
</script>

はい、componentの部分が配列ですね。これが原因です。

これをオブジェクトに戻してあげます。

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable,
  }
...
...

}
</script>

これで正常にコンポーネントが読み込まれるはずです！

では、また。