デフォルトでは、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: {
    // サーバーサイドでのみ利用可能なプライベートキー
    apiSecret: '123',
    // public内のキーはクライアントサイドでも公開されます
    public: {
      apiBase: '/api'
    }
  }
})

これらの変数は、useRuntimeConfig() コンポーザブルを使用してアプリケーションの他の部分に公開されます。

const runtimeConfig = useRuntimeConfig()

アプリ設定

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

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

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

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

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 ファイルでこれを行うことができます。

• vite.vue は @vitejs/plugin-vue 用です。利用可能なオプションを確認してください。
• vite.vueJsx は @vitejs/plugin-vue-jsx 用です。利用可能なオプションを確認してください。

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

Vue 3.4およびNuxt 3.9からの実験的 reactivityTransform の移行

Nuxt 3.9およびVue 3.4以降、reactivityTransform はVueからVue Macrosに移行され、Nuxt統合があります。