【Nuxt.js コンポーネント間の循環参照】Unknown custom elementとなる原因と解決方法

Nuxt.jsで開発中に以下のエラーが出てハマった。

[Vue warn]: Unknown custom element: <コンポーネント名> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

エラーメッセージにあるように、nameオプションで指定してもダメだった。

今回の場合、原因はコンポーネント間の循環参照の記述方法だった。

Vue.jsのドキュメントのコンポーネント間の循環参照に書いてあるように、記述方法には2通りある。

beforeCreateでrequireを使ってコンポーネント登録するか、componentsフィールド内で importを使ってコンポーネント登録するかだ。

Nuxt.jsの場合では、requireの方でやると前述のエラーが出るが、importの方でやるとエラーは出ないようだ。

Nuxt.jsでエラーが出る記述

<script>
export default {
  // Nuxt.jsではエラー
  beforeCreate() {
    this.$options.components.Component = require("~/components/modal/Component.vue").default;
  }
};
</script>

Nuxt.jsでエラーが出ない記述

<script>
export default {
  // Nuxt.jsでもOK
  Component: () => import("~/components/modal/Component.vue")
};
</script>