自動インポート / Auto-imports

コンポーザブルとヘルパー関数

Nuxtは、ヘルパー関数、コンポーザブル、VueのAPIを自動的にインポートし、明示的にそれらをインポートすることなくアプリケーション全体で使用できるようにします。ディレクトリの構造に基づいて、すべてのNuxtアプリケーションは、自身のコンポーネント、コンポーザブル、およびプラグインに対しても自動的なインポートを利用できます。コンポーネント、コンポーザブル、またはプラグインはこれらの関数を使用できます。

クラシックなグローバル宣言とは対照的に、Nuxtは型情報とIDEの補完やヒントを保持し、本番コードで実際に使用されているものだけを含めます。

組み込みの自動インポート

Nuxtの自動インポート

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

<script setup lang="ts">
    /* useAsyncData() と $fetch() は自動的にインポートされます */
    const { data, refresh, pending } = await useAsyncData(
        '/api/hello',
        () => $fetch('/api/hello'))
</script>

Vue自動インポート

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

<script setup lang="ts">
    /* ref() と computed() は自動的にインポートされます */
    const count = ref(1)
    const double = computed(() => count.value * 2)
</script>

VueとNuxtのコンポーザブルの使用

VueとNuxtが提供する組み込みのComposition APIコンポーザブルを使用する際には、それらの多くが適切なコンテキストで呼び出されることを意識してください。

コンポーネントのライフサイクル中、Vueは現在のコンポーネントの一時的なインスタンス（同様に、NuxtはnuxtAppの一時的なインスタンス）をグローバル変数を介して追跡し、その後同じタイミングでそれを解除します。これは、サーバー側レンダリングの際に重要です。なぜなら、2つのユーザー間で共有される参照が漏れることによるクロスリクエストの状態の混乱を避けるため、また異なるコンポーネント間での漏れを避けるためです。

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

もし「Nuxt instance is unavailable」というエラーメッセージが表示された場合、おそらくVueやNuxtのライフサイクルの誤った場所でNuxtのコンポーザブルを呼び出している可能性があります。

このコメントには完全な説明が記載されています。

事例

例: 間違った例（Breaking code）:

// composableの外部でランタイム設定にアクセスしようとしている
const config = useRuntimeConfig();

export const useMyComposable = () => {
  // useRuntimeConfig()はココに記述する必要があります！
};

例: 修正後（Fixing the error）:

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

  // ...
};

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

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

• componentsはVueコンポーネントのためのディレクトリです。
• composablesはVueコンポーザブルのためのディレクトリです。
• utilsはヘルパー関数やその他のユーティリティのためのディレクトリです。

明示的なインポート

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

<script setup lang="ts">
    import { ref, computed } from '#imports'

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

自動インポートの無効化

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

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

それにより、自動インポートは完全に無効になりますが、引き続き#importsから明示的なインポートを使用することができます。

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

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

~/componentsディレクトリからの自動コンポーネントのインポートを無効にするには、components.dirsを空の配列に設定します（ただし、これはモジュールによって追加されたコンポーネントには影響を与えないことに注意してください）。

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