Nuxt は app.config 設定ファイルを提供しており、ライフサイクル内や nuxt プラグインを使用して、HMR（ホットモジュールリプレースメント）で編集することで、アプリケーション内でリアクティブな設定を公開し、実行時に更新することができます。

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

export default defineAppConfig({
  foo: 'bar'
})

使用法

アプリの他の部分に設定と環境変数を公開するには、app.config ファイルで設定を定義する必要があります。

export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

これで、サーバーレンダリング時とブラウザで useAppConfig コンポーザブルを使用して theme に普遍的にアクセスできます。

const appConfig = useAppConfig()

console.log(appConfig.theme)

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

const appConfig = useAppConfig() // { foo: 'bar' }

const newAppConfig = { foo: 'baz' }

updateAppConfig(newAppConfig)

console.log(appConfig) // { foo: 'baz' }

App Config の型付け

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

しかし、場合によっては自分で型を付けたいこともあります。型付けしたいことは2つあります。

App Config Input

AppConfigInput は、アプリ設定を設定する際の有効な 入力 オプションを宣言するモジュール作成者によって使用されるかもしれません。これは useAppConfig() の型には影響しません。

declare module 'nuxt/schema' {
  interface AppConfigInput {
    /** テーマ設定 */
    theme?: {
      /** アプリの主要色 */
      primaryColor?: string
    }
  }
}

// 型を拡張する際には、何かをインポート/エクスポートすることを常に確認することが重要です
export {}

App Config Output

useAppConfig() を呼び出した結果に型を付けたい場合は、AppConfig を拡張します。

declare module 'nuxt/schema' {
  interface AppConfig {
    // これにより、既存の推測された `theme` プロパティが完全に置き換えられます
    theme: {
      // この値により具体的な型を追加したい場合、例えば文字列リテラル型など
      primaryColor?: 'red' | 'blue'
    }
  }
}

// 型を拡張する際には、何かをインポート/エクスポートすることを常に確認することが重要です
export {}

マージ戦略

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

この戦略は Function Merger を使用して実装されており、app.config 内のすべてのキーに対してカスタムマージ戦略を定義することができます。

以下はその使用例です：

export default defineAppConfig({
  // デフォルトの配列値
  array: ['hello'],
})

既知の制限

Nuxt v3.3 以降、app.config.ts ファイルは Nitro と共有されており、以下の制限があります：

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

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

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

export default defineNuxtConfig({
  nitro: {
    vite: {
      plugins: [vue()]
    }
  }
})

関連する問題：

• Issue #19858
• Issue #19854