[Nuxt.js]コンポーネントが表示されない（nuxt.config.jsにパスは通した？）

久しぶりにNuxtプロジェクト作成していつも通りコンポーネント作成したらコンポーネントが表示されなくて困ったので備忘録。Atomic Design（アトミックデザイン）など、componentsフォルダの中に分類のためのフォルダを作成している人のための記事です。

結論から言うと、

• 新バージョンではコンポーネント名に内包されているフォルダ名をつけなければいけない（例：Atomsフォルダに入っているButton.vueコンポーネントは<AtomsButton/>と表記）
• それが嫌ならnuxt.config.jsでパス通してね（下記に記載）

ということでした。

全部公式に載ってます。

Components directory

The components directory contains your Vue.js Components. Components are what makes up the different parts of your page and can be reused and imported into your...

nuxtjs.org

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となりました！

めでたしめでたし。