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

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

Nuxtは、その意見に基づいたディレクトリ構造のおかげで、app/components/、app/composables/、app/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は定義されたディレクトリに作成されたファイルを直接自動インポートします：

• app/components/はVueコンポーネント用です。
• app/composables/はVueコンポーザブル用です。
• app/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']
      }
    ]
  }
})