vue-property-decoratorでUnknown custom element:did you register the component correctly?

2020年7月8日

今回はvue-property-decoratorで「Unknown custom element:- did you register the component correctly? For recursive components, make sure to provide the “name" option.」というエラーが起きてしまったときの解決策を一つ提示したいと思います。

vue-property-decoratorでUnknown custom element:did you register the component correctly?

Vue.jsとTypeScript環境でvue-property-decoratorを使って開発を行っていたときです。
Componentを定義しようとしたら「Unknown custom element:- did you register the component correctly? For recursive components, make sure to provide the “name" option.」というエラーが起きてしまいました。

エラーが起きてしまったソースコードは次の通りです。
初期のHelloWorldコンポーネントを使用しております。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from "@/components/HelloWorld.vue";

@Component({
  components: {
    HelloWorld
  }
})

@Component
export default class Home extends Vue {

}
</script>

import { Component, Vue } from 'vue-property-decorator';

import HelloWorld from "@/components/HelloWorld.vue";

@Component({

components: {

HelloWorld

}

})

@Component

export default class Home extends Vue {

}

</script>

結論から言うと、二つ目の「@Component」を消して次のように書いたらエラーが解消されました。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from "@/components/HelloWorld.vue";

@Component({
  components: {
    HelloWorld
  }
})

@Component
export default class Home extends Vue {

}
</script>