本記事は Nuxt / UnJS Advent Calendar 2024 の4日目の記事です。
はじめに
こんにちは、がんがんです。
以前 Nuxt の Auto-imports機能周りで以下のような記事を書きました。
本記事の中で「 components/ をネストして利用したい」ユースケースについて紹介しました。
プロダクトでcomposableを実装している時に「composables/ はネスト出来るのか？🤔」と思いました。
そこで自身の備忘録も兼ねて改めて調べてみました。
Nuxt の Auto-imports機能とは
Nuxt では composables/ ディレクトリや components/ ディレクトリ、 utils/ ディレクトリを自動読み込みしてくれる機能があります。
Q. composabes/ ディレクトリはどこまでスキャンされるのか？
デフォルトの設定ではどこまでAuto-imports対象としてスキャンされるのでしょうか？
まずは公式ドキュメントを見てみます。
To get auto imports working for nested modules, you could either re-export them (recommended) or configure the scanner to include nested directories:
予想通りネストした場合は上手く読み込んでくれないようです。解決方法として公式ドキュメントでは2点紹介されています。
実験
今回は以下のようなディレクトリ構成で検証を行いました。
-| composables/
---| feature/
-----| feature1/
-------| useUser.ts
-------| useTable.ts
-----| feature2/
-------| useAdmin.ts
---| useDark.ts
解決方法1: nuxt.configでAuto-importsを設定する
まずはnuxt.config.tsの imports オプションで設定するケースです。ネストしたディレクトリまで取得するために以下のように設定しています。
export default defineNuxtConfig({
imports: {
dirs: ['composables/*/*']
},
})
.nuxt/imports.d.tsを除いてみると無事にexportされていました。
// ...other exports
export { useDark } from '../app/composables/useDark';
export { useTable } from '../app/composables/feature/feature1/useTable';
export { useUser } from '../app/composables/feature/feature1/useUser';
export { useAdmin } from '../app/composables/feature/feature2/useAdmin';
// ...other exports
imports.dirの実装はここらへんにあります。
解決方法2: index.ts(バレルファイル)を用意して再エクスポートする
簡単に実施する場合は解決方法1で問題ありません。ただ、ネストがどんどん深くなった場合には非常に面倒です。
例えば、以下の設定にすると上手くスキャンしてくれません。
export default defineNuxtConfig({
imports: {
// feature/ 直下まではスキャンするが、feature1/ や feature2/ はスキャンしてくれない
dirs: ['composables/*']
},
})
このような場合、ディレクトリ構成変更のたびに設定を変更する必要があり非常に面倒です。
そこで、解決方法の2つ目としてバレルファイルを用いた再exportの方法があります。これは公式ドキュメントでも推奨されている方法です。バレルファイルについては以下を参照ください。
composables/ 直下にindex.tsを用意して再exportしてみます。
-| composables/
---| feature/
-----| feature1/
-------| useUser.ts
-------| useTable.ts
-----| feature2/
-------| useAdmin.ts
---| useDark.ts
+ ---| index.ts
// feature1
export { useUser } from './feature/feature1/useUser';
export { useTable } from './feature/feature2/useTable';
// feature2
export { useAdmin } from './feature/feature2/useAdmin';
今回はデフォルトのスキャン設定を拡張したかったのでfeature/直下のみを再exportしています。.nuxt/imports.d.tsの出力結果は以下のとおりです。
// ...other exports
export { useUser, useTable, useAdmin } from '../app/composables/index';
// ...other exports
関連記事
おわりに
今回は composables/ のAuto-imports Tipsをまとめました。
こういう小さなTipsはあまり出回っていないので小さいものでも執筆していきたいと思います。
Discussion