Nuxt独自

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

前置き

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

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

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

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

いちいち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,

呼び出し


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

パターン①

公式のディレクトリの通りにやってみます。
ただ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

呼び出し


パターン②

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

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

directory

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

オススメの書き方

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

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

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

directory

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

2階層に分けたい!

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

directory

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

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

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

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

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

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


まとめ

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

-Nuxt独自
-,

© 2021 aLiz Nuxt