app.config.ts · Nuxt ディレクトリ構造

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

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

app.config.ts

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

app.configファイル内には、機密性の高い値を入れないでください。ユーザーのクライアントバンドルに公開されます。

カスタムのsrcDirを設定する場合、app.configファイルを新しいsrcDirパスのルートに配置するようにしてください。

使い方

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

app.config.ts

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

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

pages/index.vue

<script setup lang="ts">
const appConfig = useAppConfig()

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

updateAppConfigユーティリティを使用して、ランタイム時にapp.configを更新できます。

pages/index.vue

<script setup>
const appConfig = useAppConfig() // { foo: 'bar' }

const newAppConfig = { foo: 'baz' }

updateAppConfig(newAppConfig)

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

updateAppConfigユーティリティの詳細については、こちらをご覧ください。

アプリ設定の型付け

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

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

アプリ設定入力

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 {}

アプリ設定出力

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に対してカスタムマージ戦略を使用します。

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

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

これが使用方法の例です

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

既知の制限事項

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

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

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

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

nuxt.config.ts

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

この回避策を使用すると、予期しない動作やバグが発生する可能性があります。Vueプラグインは、Nitroコンテキストでは使用できない多くのプラグインの1つです。