【Nuxt.js】コンポーネントを自動インポートしよう

前置き

コンポーネントを呼び出す際は
この2つが必要ですよね？💡
・import文
・componentsフィールドの定義

<template>
 <div class="page">
  <ButtonDefault />
 </div>
</template>

<script>
import ButtonDefault from '~/components/ButtonDefault' 

export default {
 components: {
  ButtonDefault,
 }, 
} 
</script>

</div>

</template>

import ButtonDefault from '~/components/ButtonDefault'

export default {

components: {

ButtonDefault,

}

</script>

しかしこれって意外と面倒です😑🌀
ファイルパスの確認や
スペルミスがないか
チェックしなければなりません。

この手間を減らしましょう！

⬇️これだけで呼び出せます✨
　2つの工程を減らせるんです🧹♪

<template>
  <div class="page">
    <ButtonDefault />
  </div>
</template>

<script>
export default {
}
</script>

</div>

</template>

export default {

}

</script>

いちいちimportするのが面倒くさい！
1階層で管理には充分、参考にしたい！
という方は本記事をご覧ください👀

参考:
@nuxt/componentsを使って、コンポーネントを自動でimportしよう

Nuxtのアップグレード

アップグレードをする理由

公式を確認すると
v2.13以降は@nuxt/components
というモジュールがインストールされ
自動でインポートできるということです💫☝️

v2.13 以降、Nuxt はテンプレートで使用される時にコンポーネントを自動でインポートできます。
コンポーネントの発見

ということでNuxtを
v2.13以降にアップグレードすればOK⭕️

アップグレードの手順

この手順で進めてください🍒
アップグレード

あとはバージョンチェックと
プロジェクトを実行して
エラーがなければOK⭕️

$ npx nuxt -v
$ npm run dev

自動でインポートする(components直下の場合)

コンポーネントの発見

directory

components/
--| ButtonDefault.vue

nuxt.config.jsでは
components: true,

export default {
  target: 'static',
  components: true,
}

export default {

target: 'static',

components: true,

}

呼び出し

<template>
  <div class="page">
    <ButtonDefault />
  </div>
</template>

<script>
export default {
}
</script>

</div>

</template>

export default {

}

</script>

自動でインポートする(ネストした場合)

パターン①

公式のディレクトリの通りにやってみます。
ただdirsを使用するよりも
componentsを配列にし、
文字列のファイルパスを
直接記載する方が簡単です🍀
この書き方は
あまり使用しないかもしれません💡
ネストされたディレクトリ

directory

components/
--| base/
----| foo/
------| Button.vue

componentsは
Boolean値だけではなく、
配列が使用できます。

components: accepts an array of directory paths, rather than just a boolean value! These directory paths can be either an array of strings or objects.
Improve Your Developer Experience With Nuxt Components

export default {
  target: 'static',
  components: {
    dirs: [
      '~/components',
      '~/components/base'
    ]
  },

export default {

target: 'static',

components: {

dirs: [

'~/components',

'~/components/base'

]

呼び出し

<template>
  <div class="page">
    <FooButton />
  </div>
</template>

</div>

</template>

パターン②

こちらの方が簡単なパターンです🌟
文字列としてのディレクトリパス

ただし、後述しますが2階層ある場合
うまくいかない時がありました⚠️

directory

components/
--| base/
----| foo/
------| Button.vue

export default {
  target: 'static', 
  components: [
    '~/components/base/foo/',
  ],
}

export default {

target: 'static',

components: [

'~/components/base/foo/',

}

<template>
  <div class="page">
    <Button />
  </div>
</template>

</div>

</template>

オススメの書き方

アトミックデザインの場合は
こちらの分け方、パスの書き方が
オススメです🌟

アトミックデザインで分けられない
SVGのコンポーネントなどは
pathとprefixを指定しておきます。
オブジェクトとしてのディレクトリパス

⬇️SVGのコンポーネント化は
　こちらをご覧ください👀
【Nuxt.js】Nuxt番外編：SVGのコンポーネント化でスッキリ管理

directory

components/
--| atoms/
----| ButtonDefault.vue
----| InputDefault.vue
--| Svgs.vue

export default {
  target: 'static', 
  components: [
    '~/components/atoms',
    '~/components/molecules',
    '~/components/organisms',
    '~/components/templates',
    {
      path: '~/components/Svgs.vue',
      prefix: 'Svgs',
    },
  ],
}

export default {

target: 'static',

components: [

'~/components/atoms',

'~/components/molecules',

'~/components/organisms',

'~/components/templates',

{

path: '~/components/Svgs.vue',

prefix: 'Svgs',

}

<template>
  <div class="page">
    <ButtonDefault />
    <Svgs />
  </div>
</template>

</div>

</template>

2階層に分けたい！

atomsでも
buttonsやinputsなど
ネストさせたい！
という方はいるはず。

directory

components/
--| atoms/
----| buttons/
------| ButtonDefault.vue
----| inputs/
------| InputDefault.vue
--| Svgs.vue

こちらは試してみましたが、

中身も階層も
同じコンポーネントなのに
命名だけ変えるとエラー💥💣

という摩訶不思議なことが起こりました。
TSにすると挙動が変わって
できるようなのですが、
通常だとオススメの書き方で
限界かもしれません。

確実なソースがないので、
できたよ！という事例があれば
教えていただけると嬉しいです🙇‍♀️

⬇️こちらが参考になりそうです！
Nuxt.jsでネストされたディレクトリのコンポーネントを自動インポートした時にでるエラーの対処法

まとめ

2工程が減るだけで
スッキリしますね✨
2階層に分けた場合は注意が必要ですが、
この場合はフォルダ名にしたかったものを
先頭にして揃えることで
見やすくなると思います🌱👀