Vue: Unknown custom element - component not found の原因と解決策

概要

Vue.jsでテンプレート内のカスタムコンポーネントが見つからない場合に発生する警告・エラーです。

エラーメッセージ

[Vue warn]: Unknown custom element: <MyComponent> - did you register the component correctly?

原因

コンポーネント未登録: componentsオプションに登録していない
インポート忘れ: importステートメントがない
名前の不一致: 登録名とテンプレートでの使用名が異なる
グローバル登録の問題: app.componentの呼び出し順

解決策

1. ローカル登録（Composition API）

1
2
3
4
5
6
7
8
<script setup>
import MyComponent from './MyComponent.vue'
// <script setup>では自動的に登録される
</script>

<template>
  <MyComponent />
</template>

2. ローカル登録（Options API）

1
2
3
4
5
6
7
8
9
<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

3. グローバル登録

1
2
3
4
5
6
7
8
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import MyComponent from './components/MyComponent.vue'

const app = createApp(App)
app.component('MyComponent', MyComponent)
app.mount('#app')

4. 動的コンポーネントの登録

1
2
3
4
5
6
7
<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
)
</script>

5. 命名規則を確認

1
2
3
4
5
<!-- PascalCase -->
<MyComponent />

<!-- kebab-case -->
<my-component />

よくある間違い

コンポーネントファイルのパスが間違っている
.vue拡張子の省略（設定による）
循環参照によるコンポーネントのundefined
Vue 2とVue 3の登録方法の違い

概要

エラーメッセージ

原因

解決策

1. ローカル登録（Composition API）

2. ローカル登録（Options API）

3. グローバル登録

4. 動的コンポーネントの登録

5. 命名規則を確認

よくある間違い

Vue.js の他のエラー