Nuxt3でサブディレクトリに配置したコンポーネントを自動インポートする方法

はじめに

Nuxt3では/componentsディレクトリ配下に配置したコンポーネントが自動的にインポートされます。
例えば以下のように配置したコンポーネントはいずれもインポートすることなく<navigation-item />として使うことができます。

| components/
--| NavigationItem.vue
または
--| Navigation
------| Item.vue

ですがデフォルトの状態では自動インポートした以下のコンポーネントを<navigation-item />として使うことはできません。

| components/
--| Navigation
------| NavigationItem.vue

今回は上記のようなコンポーネントを自動インポートして元のコンポーネント名のままで使う方法をご紹介します。

設定方法

設定方法はとても簡単でnuxt.config.tsに以下の設定を追記するだけです。冒頭で示した通りデフォルトの状態ではサブディレクトリはコンポーネント名のprefix（接頭辞）として扱われるため、そちらをpathPrefix: falseで無効にしています。

nuxt.config.ts

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

余談

余談ですがVue.jsのスタイルガイドではサブディレクトリで管理する方法をおすすめしていない印象があります。どちらかと言えば適切なコンポーネント名（ファイル名）を付けてcomponentsディレクトリだけで管理する方法を推奨しています。適切な命名を行うことでファイルが以下のようにアルファベット順に並ぶのでひと目でわかるだろうという考えのようです。また、入れ子になったサブディレクトリを移動するのが大変だからそれを回避したいという考えもあるようです。

| components/
--| HeaderItem.vue
--| HeaderList.vue
--| NavigationItem.vue
--| NavigationList.vue
--| SearchItem.vue
--| SearchList.vue

以下の理由から、非常に大規模なアプリ（例: 100 以上のコンポーネント）でのみ検討することをお勧めします。

ただ、スタイルガイドには上記の説明も記載されており、サブディレクトリで管理する方法を完全に禁止しているわけではありません。皆さんが作成されるアプリの規模や他の条件も踏まえて検討していただければと思います。その他にもいくつかのルールが書かれているので、興味がある方はぜひ読んでみてください。