Nuxt 3のcomponentsディレクトリ内のサブディレクトリを自動インポートの対象にする方法

Nuxt 3のデフォルトでは、~/componentsディレクトリのみが自動でスキャンされ、自動インポートされる。この~/componentsディレクトリ内にサブディレクトリを作成して階層を掘っても、そのディレクトリは自動インポートの対象にならない。

~/componentsディレクトリ内のサブディレクトリも自動インポートの対象にするには、nuxt.config.tsに追加のディレクトリを記述する必要がある。たとえば、~/components内にlayoutsディレクトリを作成した場合は、nuxt.config.tsに下記を追記する。

nuxt.config.ts

export default defineNuxtConfig({
  components: [
    { path: '~/components/layouts' },
    '~/components'
  ]
})

参考文献・URL

nuxt.com