設定

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

# This will override the value of apiSecret
NUXT_API_SECRET=api_secret_token

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

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
</script>

アプリの設定

ソースディレクトリ (デフォルトでは app/) にある app.config.ts ファイルは、ビルド時に決定できるパブリック変数を公開するために使用されます。runtimeConfig オプションとは異なり、これらは環境変数を使用してオーバーライドすることはできません。

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

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

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

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

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 の実験的機能の有効化

propsDestructure などの Vue の実験的機能を有効にする必要がある場合があります。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 に移行されました。Vue Macros には、Nuxt 統合.