app.config.ts

App Config ファイルで、アプリケーション内でリアクティブな設定を公開します。

Nuxt は、app/app.config.ts 設定ファイルを提供し、ライフサイクル中または Nuxt プラグインを使用して実行時に更新し、HMR (hot-module-replacement) で編集する機能とともに、アプリケーション内でリアクティブな設定を公開します。

app.config.ts ファイルを使用して、ランタイムアプリ設定を簡単に提供できます。拡張子は、.ts、.js、または .mjs のいずれかになります。

app/app.config.ts
export default defineAppConfig({
  foo: 'bar',
})
app.config ファイルに秘密の値を入れないでください。これはユーザーのクライアントバンドルに公開されます。
カスタム srcDir を設定する場合、app.config ファイルを新しい srcDir パスのルートに配置してください。

使用方法

残りのアプリケーションに設定と環境変数を公開するには、app.config ファイルで設定を定義する必要があります。

app/app.config.ts
export default defineAppConfig({
  theme: {
    primaryColor: '#ababab',
  },
})

useAppConfig コンポーザブルを使用して、ページのサーバーレンダリング時とブラウザの両方で theme にユニバーサルにアクセスできるようになりました。

app/pages/index.vue
<script setup lang="ts">
const appConfig = useAppConfig()

console.log(appConfig.theme)
</script>

updateAppConfig ユーティリティは、実行時に app.config を更新するために使用できます。

app/pages/index.vue
<script setup>
const appConfig = useAppConfig() // { foo: 'bar' }

const newAppConfig = { foo: 'baz' }

updateAppConfig(newAppConfig)

console.log(appConfig) // { foo: 'baz' }
</script>
updateAppConfig ユーティリティの詳細については、こちらをご覧ください。

App Config の型付け

Nuxt は、提供されたアプリ設定から TypeScript インターフェースを自動的に生成しようとするため、自分で型を付ける必要はありません。

ただし、自分で型を付けたい場合もあります。型を付けたい可能性のあるものは2つあります。

App Config 入力

AppConfigInput は、アプリ設定時に有効な _入力_ オプションを宣言するモジュール作成者が使用する場合があります。これは useAppConfig() の型には影響しません。

index.d.ts
declare module 'nuxt/schema' {
  interface AppConfigInput {
    /** Theme configuration */
    theme?: {
      /** Primary app color */
      primaryColor?: string
    }
  }
}

// It is always important to ensure you import/export something when augmenting a type
export {}

App Config 出力

useAppConfig() の呼び出し結果に型を付けたい場合は、AppConfig を拡張する必要があります。

AppConfig を型付けする際は注意してください。Nuxt が実際に定義されたアプリ設定から推論する型を上書きすることになります。
index.d.ts
declare module 'nuxt/schema' {
  interface AppConfig {
    // This will entirely replace the existing inferred `theme` property
    theme: {
      // You might want to type this value to add more specific types than Nuxt can infer,
      // such as string literal types
      primaryColor?: 'red' | 'blue'
    }
  }
}

// It is always important to ensure you import/export something when augmenting a type
export {}

マージ戦略

Nuxt は、アプリケーションのレイヤー内の AppConfig にカスタムのマージ戦略を使用します。

この戦略は関数マージャーを使用して実装されており、app.config 内の配列を値として持つすべてのキーにカスタムのマージ戦略を定義できます。

関数マージャーは、拡張レイヤーでのみ使用でき、プロジェクトのメインの app.config では使用できません。

以下は、使用方法の例です。

export default defineAppConfig({
  // Default array value
  array: ['hello'],
})

既知の制限事項

Nuxt v3.3 の時点では、app.config.ts ファイルは Nitro と共有されており、以下の制限が発生します。

  1. app.config.ts で Vue コンポーネントを直接インポートすることはできません。
  2. 一部の自動インポートは Nitro コンテキストでは利用できません。

これらの制限は、Nitro が完全な Vue コンポーネントのサポートなしにアプリ設定を処理するために発生します。

回避策として Nitro 設定で Vite プラグインを使用することは可能ですが、このアプローチは推奨されません。

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    vite: {
      plugins: [vue()],
    },
  },
})
この回避策を使用すると、予期しない動作やバグが発生する可能性があります。Vue プラグインは、Nitro コンテキストでは利用できない多くのプラグインの 1 つです。

関連する問題

Nitro v3 では、アプリ設定のサポートを削除することでこれらの制限が解消されます。進捗状況は以下で確認できます。このプルリクエスト.