久しぶりにNuxtプロジェクト作成していつも通りコンポーネント作成したらコンポーネントが表示されなくて困ったので備忘録。Atomic Design（アトミックデザイン）など、componentsフォルダの中に分類のためのフォルダを作成している人のための記事です。
結論から言うと、
- 新バージョンではコンポーネント名に内包されているフォルダ名をつけなければいけない（例：Atomsフォルダに入っているButton.vueコンポーネントは<AtomsButton/>と表記）
- それが嫌ならnuxt.config.jsでパス通してね（下記に記載）
ということでした。
全部公式に載ってます。
https://nuxtjs.org/docs/directory-structure/components/#nested-directories
nuxt.config.jsでパスを通す
以下公式からの引用ですが、
components/
base/
foo/
CustomButton.vueこのような階層構造を持つコンポーネントをほかのコンポーネントやページで使用する際、コンポーネントの記載はこのようになります。
<BaseFooCustomButton />でもいちいち上位フォルダの名前記載するの面倒ですよね。というわけパスを通します。
nuxt.config.jsを開き、componentsの箇所に追記します。
以下、Atomic Designを採用している場合の例です。
components: {
dirs: [
'~/components',
'~/components/atoms',
'~/components/molecules',
'~/components/organisms',
],
},
これで、今まで（？）通り、コンポーネントのタグ名は<Button />のみでOKとなりました！
めでたしめでたし。
