【Vue】エラー対処法。did you register the component correctly? For recursive components, make sure to provide the “name” option.

Vueでコンポーネントを登録したときに、以下のようなエラーが発生することがあります。

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ここではこのエラーの原因と対処法についてまとめています。

エラーの内容

Vueでコンポーネントを登録したときに発生します。

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

エラーの内容は「登録されてないコンポーネントを呼び出そうとしてる」というものです。

import fromの設定も、コンポーネント名も、タグ名も確実に合ってるのにエラーが一向に解決しないと言う場合もあります。

エラーの原因

エラーの原因はどこかにスペルミスがあることです。

まずは、コンポーネントのファイル名、コンポーネント名、templateタグ内のタグ名を確認してみてください。

それでも問題がない場合、最も考えられるのは「component」が単数形になっていることです。

本来「components」のように複数形でなければいけません。

実例

例えば以下のようになっている場合は、登録したコンポーネントの名前や呼び出し方だどれだけあっていてもエラーが出ます。

 component: {
    コンポーネント名
  },

　↓ 修正

 components: {
    コンポーネント名
  },

.vueファイルではタグ名はキャメルケースでも問題ない

なお、template内のタグ名をスネークケース（ハイフンで繋ぐ）で書かなければいけないという記載があることもありますが、「.vue」ファイルにおいてはタグ名もキャメルケース（冒頭大文字でつなぐ）でも問題ありません。

実例

例えば以下のような状態でもVueは問題なく動きます。

<template>
  <div v-if="!!reviews">
    <div v-for="(review, index) in reviews"
         :key="index">
      <KuchikomiSingle :review="review" />
    </div>
  </div>
</template>

<script>
import KuchikomiSingle from './KuchikomiSingle'

export default {
  name: 'Kuchikomi',
  components: {
    KuchikomiSingle,
  },
  props: {
    reviews:{
      type: Array,
      default: () => ([{}])
    }
  },
</script>

make sure to provide the “name” optionの注意点

エラーの中に「make sure to provide the “name” option.」という表記があるので、ついつい「export default」内のnameプロパティを確認したくなります。

export default {
  name: 'Kuchikomi',

ですが、このnameはコンポーネントとは関係ありません。記述がなくても動くものです。