Nuxtは、コンポーネント、コンポーザブル、およびVue.js APIをアプリケーション全体で明示的にインポートすることなく使用できるように自動インポートします。

const count = ref(1) // refは自動インポートされます

Nuxtは、その意見に基づいたディレクトリ構造のおかげで、components/、composables/、およびutils/を自動インポートできます。

従来のグローバル宣言とは異なり、Nuxtは型情報、IDEの補完とヒントを保持し、本番コードで使用されるものだけを含めます。

ビルトイン自動インポート

Nuxtは、データフェッチを実行し、アプリケーションコンテキストやランタイム設定にアクセスし、状態を管理したり、コンポーネントやプラグインを定義するための関数やコンポーザブルを自動インポートします。

/* useFetch()は自動インポートされます */
const { data, refresh, status } = await useFetch('/api/hello')

VueはrefやcomputedのようなリアクティビティAPIを公開しており、ライフサイクルフックやヘルパーもNuxtによって自動インポートされます。

/* ref()とcomputed()は自動インポートされます */
const count = ref(1)
const double = computed(() => count.value * 2)

VueとNuxtのコンポーザブル

VueとNuxtが提供するビルトインのComposition APIコンポーザブルを使用する際、多くのものが正しい_コンテキスト_で呼び出されることに依存していることに注意してください。

コンポーネントのライフサイクル中、Vueは現在のコンポーネントの一時インスタンスをグローバル変数を通じて追跡し、同様にNuxtはnuxtAppの一時インスタンスを追跡し、同じティックでそれを解除します。これは、サーバーレンダリング時に、クロスリクエストの状態汚染（2人のユーザー間で共有参照が漏れること）を避け、異なるコンポーネント間の漏れを避けるために重要です。

つまり、（非常に少数の例外を除いて）Nuxtプラグイン、Nuxtルートミドルウェア、またはVueセットアップ関数の外でそれらを使用することはできません。さらに、それらを同期的に使用する必要があります。つまり、<script setup>ブロック内、defineNuxtComponentで宣言されたコンポーネントのセットアップ関数内、defineNuxtPluginまたはdefineNuxtRouteMiddleware内を除いて、コンポーザブルを呼び出す前にawaitを使用することはできません。これらの場所では、awaitの後でも同期コンテキストを保持するための変換を行います。

Nuxt instance is unavailableのようなエラーメッセージが表示された場合、それはおそらくVueまたはNuxtのライフサイクルの間違った場所でNuxtコンポーザブルを呼び出していることを意味します。

壊れるコードの例:

// コンポーザブルの外でランタイム設定にアクセスしようとしています
const config = useRuntimeConfig()

export const useMyComposable = () => {
  // ここでランタイム設定にアクセス
}

動作するコードの例:

export const useMyComposable = () => {
  // ライフサイクルの正しい場所でコンポーザブルが呼び出されるため、
  // useRuntimeConfigはここで動作します
  const config = useRuntimeConfig()

  // ...
}

ディレクトリベースの自動インポート

Nuxtは定義されたディレクトリに作成されたファイルを直接自動インポートします：

• components/はVueコンポーネント用。
• composables/はVueコンポーザブル用。
• utils/はヘルパー関数やその他のユーティリティ用。

明示的なインポート

Nuxtは、必要に応じてインポートを明示的にするために使用できる#importsエイリアスで、すべての自動インポートを公開します：

import { ref, computed } from '#imports'

const count = ref(1)
const double = computed(() => count.value * 2)

自動インポートの無効化

コンポーザブルやユーティリティの自動インポートを無効にしたい場合は、nuxt.configファイルでimports.autoImportをfalseに設定できます。

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

これにより自動インポートは完全に無効になりますが、#importsからの明示的なインポートを使用することは依然として可能です。

自動インポートの部分的な無効化

refのようなフレームワーク固有の関数を自動インポートのままにしておきたいが、自分のコード（例：カスタムコンポーザブル）の自動インポートを無効にしたい場合は、nuxt.config.tsファイルでimports.scanオプションをfalseに設定できます：

export default defineNuxtConfig({
  imports: {
    scan: false
  }
})

この設定では：

• ref、computed、watchのようなフレームワーク関数は、手動でインポートする必要なく動作します。
• カスタムコード、例えばコンポーザブルは、ファイル内で手動でインポートする必要があります。

自動インポートされたコンポーネント

Nuxtは、~/componentsディレクトリからコンポーネントを自動的にインポートしますが、これはコンポーザブルやユーティリティ関数の自動インポートとは別に設定されています。

自分の~/componentsディレクトリからのコンポーネントの自動インポートを無効にするには、components.dirsを空の配列に設定できます（ただし、モジュールによって追加されたコンポーネントには影響しません）。

export default defineNuxtConfig({
  components: {
    dirs: []
  }
})

サードパーティパッケージからの自動インポート

Nuxtはサードパーティパッケージからの自動インポートも可能です。

例えば、vue-i18nパッケージからuseI18nコンポーザブルの自動インポートを有効にするには、次のようにします：

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'vue-i18n',
        imports: ['useI18n']
      }
    ]
  }
})