自動インポート

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

<script setup lang="ts">
const count = ref(1) // ref is auto-imported
</script>

Nuxt はその独自のディレクトリ構造のおかげで、app/components/、app/composables/、および app/utils/ を自動インポートできます。

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

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

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

<script setup lang="ts">
/* useFetch() is auto-imported */
const { data, refresh, status } = await useFetch('/api/hello')
</script>

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

<script setup lang="ts">
/* ref() and computed() are auto-imported */
const count = ref(1)
const double = computed(() => count.value * 2)
</script>

Vue と Nuxt のコンポーザブル

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

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

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

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

問題のあるコードの例

// trying to access runtime config outside a composable
const config = useRuntimeConfig()

export const useMyComposable = () => {
  // accessing runtime config here
}

動作するコードの例

export const useMyComposable = () => {
  // Because your composable is called in the right place in the lifecycle,
  // useRuntimeConfig will work here
  const config = useRuntimeConfig()

  // ...
}

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

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

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

明示的なインポート

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

<script setup lang="ts">
import { computed, ref } 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 からの明示的なインポートを使用することは引き続き可能です。

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

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'],
      },
    ],
  },
})