最近とあるアプリケーションを作ってみようとして、Nuxtを使っていた時の出来事。
例えば、ディレクトリ構成はこんな感じだとする。
.
├── components
│ ├── Hoge.vue
│ └── organisms
│ └── OSidebar.vue
└── pages
│ └── index.vue
└── nuxt.config.js
Nuxtにはv2.13からcomponentsを自動インポートができるようになりました。
こんな感じで設定すると
export default {
components: true
}
componentsディレクトリで作成したファイルが、自動importできていました。
<template>
<div>
<!-- components/Hoge.vueを自動import -->
<Hoge />
<!-- components/organisms/OSidebar.vueを自動import -->
<OSidebar />
</div>
</template>
<script>
export default {}
</script>
発生した問題
上記の様にnuxt.config.jsを設定すると特に問題なく使えていたのですが、今回はなぜか
[Vue warn]: Unknown custom element: <OSidebar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
というエラーが発生してしまいました。
componentsディレクトリ配下のHoge.vueは問題なかったけど、Organismsコンポーネントで更にネストしているOSidebar.vueに問題があるみたいです。
問題の原因
issueありました。
具体的な解決策、というかバージョンの問題の移行方法はこちらにのっていました。
どうやらNuxt v2.15からは自動importの方法が変わったみたいです。
@nuxt/componentsというモジュールのメジャーバージョンアップによるものみたいです。
僕が今回使っていたNuxtのバージョンが2.15以上だったので、これを解決したらいけました！
解決方法
具体的な解決方法としては、複数の方法があります。
@nuxt/componentsのドキュメントの「Migration guide」と部分には
Full path inside components is used to prefix component names.
If you were structing your components in multiple directories, should either add prefix or register in components section of nuxt.config or use new pathPrefix option.
という記述がありました。
まあ、つまりこの記述から3つの解決策がわかるって感じですかね。
① componentsディレクトリ以降のディレクトリ名は、prefixとしてファイル名の前に付けて使用
② nuxt.confingのcomponentsセクションに登録
③ nuxt.confingのcomponentsセクションにpathPrefixオプションを設定
（時間ない人はとりあえず③を見れば良いかも）
上部のディレクトリ構成をもう一度確認
.
├── components
│ ├── Hoge.vue
│ └── organisms
│ └── OSidebar.vue
└── pages
│ └── index.vue
└── nuxt.config.js
① componentsディレクトリ以降のディレクトリ名は、prefixとしてファイル名の前に付ける
OSidebar.vueを例にすると、componentsディレクトリ以降のディレクトリはorganismsディレクトリが該当。
使用したいファイル名はOSidebar.vueなので、organismsディレクトリをprefixに付ければOK。
つまり、organismsOSidebarという名前で自動importができます。
<template>
<div>
<Hoge />
<!-- components/organisms/OSidebar.vueを自動import -->
<organismsOSidebar />
</div>
</template>
<!-- 以下省略 -->
② nuxt.confingのcomponentsセクションに登録
nuxt.confingのcomponentsセクションにディレクトリを登録してあげるのもOKです。
export default {
components: ['@/components/organisms']
}
これでcomponentsディレクトリ配下のorganismsディレクトリ内のファイルがOSidebarという名前で自動import出来ます。
<template>
<div>
<!-- components/organisms/OSidebar.vueを自動import -->
<OSidebar />
</div>
</template>
<!-- 以下省略 -->
これは①の方法よりも名前が長くならずに済みます。
注意点
しかし注意点として、ディレクトリごとに毎回登録する必要があります。
export default {
components: [
'@/components', // componentsディレクトリ配下のファイルを自動importしたい場合
'@/components/molecules', // components/moleculesディレクトリ内のファイルを自動importしたい場合
'@/components/organisms',
]
}
③ nuxt.confingのcomponentsセクションにpathPrefixオプションを設定
最後にnuxt.confingのcomponentsセクションにpathPrefixオプションを設定する方法を紹介します。
export default {
components: [
{
path: '@/components',
pathPrefix: false,
},
],
}
これで、componentsディレクトリ配下の（ネストされているものも含めた）全てのファイルが自動importされます。
<template>
<div>
<Hoge />
<!-- components/organisms/OSidebar.vueを自動import -->
<OSidebar />
</div>
</template>
<!-- 以下省略 -->
僕は楽なので③を選んで無事解決しました〜。
以上です！役に立てたら幸いです！