最終更新日: 2023年08月15日

App Config ファイル

Nuxt 3 は、アプリケーション内のリアクティブ構成を公開するための app.config 構成ファイルを提供し、ライフサイクル内の実行時に更新するか、nuxt プラグインを使用して HMR (ホットモジュール置換) で編集する機能を備えています。

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

  • ts
export default defineAppConfig({
  foo: "bar",
});

アプリ構成の設定

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

例:

  • app.config.ts
  • ts
export default defineAppConfig({
  theme: {
    primaryColor: "#ababab",
  },
});

app.configにテーマを追加すると、NuxtはViteまたはwebpackを使用してコードをバンドルします。テーマは、ページをサーバーサイドでレンダリングするときとブラウザで使用するときの両方で、useAppConfigコンポーザブルを使ってアクセスできます。

  • ts
const appConfig = useAppConfig();
console.log(appConfig.theme);

アプリケーションの設定を手動で記述

Nuxtは、提供されたアプリケーションの設定から自動的にTypeScriptインターフェースを生成しようとします。

アプリケーションの設定を手動で型付けすることも可能です。型付けしたい可能性がある2つの項目があります。

アプリケーションの設定の入力の型付け

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

  • ts
declare module "nuxt/schema" {
  interface AppConfigInput {
    /** テーマの設定 */
    theme?: {
      /** プライマリーカラー */
      primaryColor?: string;
    };
  }
}

// 型を拡張する際には、必ず何かをインポートまたはエクスポートすることが重要です。
export {};

useAppConfig()から返される型

useAppConfig()の結果を型指定したい場合は、AppConfigを拡張（extend）することによって行います。

  • index.d.ts
  • ts
declare module "nuxt/schema" {
  interface AppConfig {
    // これにより、既存の推論された theme プロパティが完全に置き換えられます。
    theme: {
      // Nuxtが推論できるよりも具体的な型、例えば文字列リテラル型を追加するために、
      // この値に型を付けることがあるかもしれません。
      primaryColor?: "red" | "blue";
    };
  }
}

// 型を拡張する際には、必ず何かをインポートまたはエクスポートすることが重要です。
export {};

LayersにおけるApp Configのマージ戦略

Nuxtはアプリケーションのレイヤー内でAppConfigのカスタムマージ戦略を使用します。この戦略は、Function Mergerを使用して実装されており、app.config内の配列を値として持つキーに対してカスタムのマージ戦略を定義することができます。

以下は使用例です：

  • layer/app.config.ts
  • ts
export default defineAppConfig({
  // デフォルトの配列の値
  array: ["hello"],
});
  • app.config.ts
  • ts
export default defineAppConfig({
  // マージ関数を使用してデフォルトの配列値を上書きする
  array: () => ["bonjour"],
});