Nuxt3におけるコンポーネントのauto-importの設定方法

はじめに

Nuxt3はコンポーネントを自動的にインポートする機能を提供しています。これにより、個々のコンポーネントを明示的にインポートする必要がなくなり、コードの可読性とメンテナンス性が向上します。
しかし、デフォルトではこの機能は特定のディレクトリに限定されています。
この記事では、特定のディレクトリに限定することなく自動的にインポートする方法について説明します。

前提条件

• Nuxt3プロジェクトを作成済みであること

デフォルトでauto-importが適用される範囲

デフォルトの設定では、以下のパスに存在するコンポーネントファイルが自動的にインポートされます

• ./components
• コンポーネントファイル名と同名かつ./components直下にあるディレクトリの配下

これ以外のパスに存在するコンポーネントを使用する場合、以下のようにscriptタグ内でimportの記述を追加する必要があります。

<script setup lang="ts">
import <コンポーネント名> from <コンポーネントのパス>;
</script>

auto-importの設定方法

以下をnuxt.config.tsのdefineNuxtConfig内に追記します。

./nuxt.config.ts

components: [
  {
    path: "@/components",
    pathPrefix: false,
  },
],

このようになれば、OKです。

これで全てのコンポーネントでauto-importが適用されます。