🛺
ネストしたcomposablesファイルをAuto Importさせるには
はじめに
Vue3、Nuxt3の新機能「composables」の小ネタです。
composablesファイルが増えてくると、composables/store/useAccount.ts のように別ディレクトリに切り出したいときがあると思います。
ただ、Nuxtは composables/配下トップレベルのファイルしか自動でインポートしてくれません。
以下の手順（A）（B）どちらかで対応してみてください。
(A)手動でimportする
まず、前提から外れて手動でimportする方法です。
もちろん、これでもうまくいきます。
composables/index.ts
// Enables auto import for this export
export { utils } from './nested/utils.ts'
(B)nuxt.config.tsを編集する
こちら、クールな解決策。
nuxt.config.ts
export default defineNuxtConfig({
imports: {
dirs: [
// Scan top-level modules
'composables',
// ... or scan modules nested one level deep with a specific name and file extension
'composables/*/index.{ts,js,mjs,mts}',
// ... or scan all modules within given directory
'composables/**'
]
}
})
参考
Discussion