🛺

ネストしたcomposablesファイルをAuto Importさせるには

2022/11/21に公開約800字

はじめに

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/**'
    ]
  }
})

参考

https://nuxt.com/docs/guide/directory-structure/composables#how-files-are-scanned

Discussion

ログインするとコメントできます