デフォルトでは、Nuxtはほとんどのユースケースをカバーするように設定されています。nuxt.config.tsファイルは、このデフォルトの設定を上書きまたは拡張することができます。

Nuxtの設定

nuxt.config.tsファイルはNuxtプロジェクトのルートに位置しており、アプリケーションの動作を上書きまたは拡張することができます。

最小限の設定ファイルは、設定を含むオブジェクトを含むdefineNuxtConfig関数をエクスポートします。defineNuxtConfigヘルパーはインポートなしでグローバルに利用可能です。

export default defineNuxtConfig({
  // My Nuxt config
})

このファイルは、カスタムスクリプトの追加、モジュールの登録、レンダリングモードの変更などを行うために、ドキュメンテーションで頻繁に参照されます。

環境オーバーライド

nuxt.configで完全に型安全な環境ごとのオーバーライドを設定することができます。

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  $development: {
    //
  },
  $env: {
    staging: {
      // 
    }
  },
})

NuxtのCLIコマンドを実行する際に環境を選択するには、--envNameフラグに環境名を渡すだけでよいです。たとえば、nuxt build --envName stagingのようにします。

これらのオーバーライドの背後にある仕組みについて詳しく知りたい場合は、 c12ドキュメンテーションの環境固有の設定を参照してください。

環境変数とプライベートトークン

runtimeConfig APIは環境変数のような値をアプリケーションの残りの部分に公開します。デフォルトでは、これらのキーはサーバーサイドでのみ利用可能です。 runtimeConfig.publicおよび runtimeConfig.app（Nuxt内部で使用されています）内のキーはクライアントサイドでも利用可能です。

これらの値は nuxt.config内で定義するべきであり、環境変数を使用して上書きすることが可能です。

export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available server-side
    apiSecret: '123',
    // Keys within public are also exposed client-side
    public: {
      apiBase: '/api'
    }
  }
})

これらの変数は、useRuntimeConfig() composableを使用してアプリケーションの残りの部分に公開されます。

const runtimeConfig = useRuntimeConfig()

Appの設定

app.config.tsファイルは、ビルド時に決定できる公開変数を公開するために使用されます。これはソースディレクトリ（デフォルトではプロジェクトのルート）にあり、runtimeConfigオプションとは対照的に、これらは環境変数を使用して上書きすることはできません。

最小限の設定ファイルは、設定を含むオブジェクトを含む defineAppConfig関数をエクスポートします。 defineAppConfigヘルパーはインポートなしでグローバルに利用可能です。

export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

これらの変数は、useAppConfig composableを使用してアプリケーションの他の部分に公開されます。

const appConfig = useAppConfig()

runtimeConfig vs. app.config

上述のように、runtimeConfigと app.configの両方がアプリケーションの他の部分に変数を公開するために使用されます。どちらを使うべきかを決定するためのいくつかのガイドラインは以下のとおりです：

• runtimeConfig: ビルド後に環境変数を使用して指定する必要があるプライベートまたはパブリックのトークン。
• app.config: ビルド時に決定する公開トークン、テーマバリアントなどのウェブサイト設定、タイトル、および機密でないプロジェクト設定。

外部設定ファイル

Nuxtは nuxt.config.ts ファイルを設定の一元情報源として使用し、外部の設定ファイルの読み込みは無視します。プロジェクトを作成していく過程で、それらの設定が必要になるかもしれません。以下の表では、一般的な設定とそれがNuxtでどのように設定できるかを示しています。

他によく使用される設定ファイルは以下の通りです：

Vueの設定

Viteを使用する場合

@vitejs/plugin-vueまたは@vitejs/plugin-vue-jsxにオプションを渡す必要がある場合、 nuxt.configファイルでそれを行うことができます。

• @vitejs/plugin-vueに対してはvite.vue。利用可能なオプションを確認します。
• @vitejs/plugin-vue-jsxに対してはvite.vueJsx。利用可能なオプションを確認します。

export default defineNuxtConfig({
  vite: {
    vue: {
      customElement: true
    },
    vueJsx: {
      mergeProps: true
    }
  }
})

webpackを使用する場合

webpackを使用していてvue-loaderを設定する必要がある場合、nuxt.configファイル内のwebpack.loaders.vueキーを使用してこれを行うことができます。利用可能なオプションはここで定義されています。

export default defineNuxtConfig({
  webpack: {
    loaders: {
      vue: {
        hotReload: true,
      }
    }
  }
})

Vueの実験的な機能の有効化

VueのpropsDestructureのような実験的な機能を有効にする必要があるかもしれません。Nuxtは nuxt.config.tsでそれを行う簡単な方法を提供しています。ビルダーの種類に関係なく：

export default defineNuxtConfig({
  vue: {
    propsDestructure: true
  }
})

実験的な reactivityTransformの移行

Nuxt 3.9とVue 3.4から、reactivityTransformはVueからVue Macrosに移動しています。これにはNuxtのインテグレーションがあります。