設定
デフォルトでは、Nuxtはほとんどのユースケースをカバーするように構成されています。nuxt.config.tsファイルで、このデフォルト設定を上書きまたは拡張できます。
Nuxtの設定
nuxt.config.tsファイルは、Nuxtプロジェクトのルートにあり、アプリケーションの動作を上書きまたは拡張するために使用できます。
最小限の設定ファイルは、設定を含むオブジェクトを含むdefineNuxtConfig関数をエクスポートします。defineNuxtConfigヘルパーは、インポートせずにグローバルに使用できます。
export default defineNuxtConfig({
// My Nuxt config
})
このファイルは、カスタムスクリプトの追加、モジュールの登録、レンダリングモードの変更など、ドキュメントで頻繁に言及されます。
nuxt.configファイルには.ts拡張子の使用を強くお勧めします。これにより、IDEのヒントを利用して、設定の編集中にタイプミスやミスを回避できます。環境変数の上書き
nuxt.configで、完全に型指定された、環境ごとの上書きを設定できます。
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
},
$myCustomName: {
//
},
})
Nuxt CLIコマンドを実行する際に環境を選択するには、--envNameフラグに名前を渡すだけです。例：nuxi build --envName myCustomName。
これらのオーバーライドの背後にあるメカニズムの詳細については、環境固有の設定に関するc12のドキュメントを参照してください。
$metaキーを使用して、自分またはレイヤーのコンシューマーが使用できるメタデータを提供することもできます。環境変数とプライベートトークン
runtimeConfig APIは、環境変数などの値をアプリケーションの残りの部分に公開します。デフォルトでは、これらのキーはサーバーサイドでのみ使用できます。runtimeConfig.public内のキーは、クライアントサイドでも使用できます。
これらの値は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()コンポーザブルを使用して、アプリケーションの残りの部分に公開されます。
<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
</script>
アプリケーション設定
ソースディレクトリ（デフォルトではプロジェクトのルート）にある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 対 app.config
上記のように、runtimeConfigとapp.configはどちらも、アプリケーションの残りの部分に値を公開するために使用されます。どちらを使用するべきか判断するには、いくつかのガイドラインがあります。
runtimeConfig：環境変数を使用してビルド後に指定する必要がある、プライベートまたはパブリックトークン。app.config：ビルド時に決定される公開トークン、テーマのバリアント、タイトルなどのウェブサイト設定、および機密性の低いプロジェクト設定。
| 機能 | runtimeConfig | app.config |
|---|---|---|
| クライアントサイド | ハイドレート済み | バンドル済み |
| 環境変数 | ✅ はい | ❌ いいえ |
| リアクティブ | ✅ はい | ✅ はい |
| 型サポート | ✅ 部分的 | ✅ はい |
| リクエストごとの設定 | ❌ いいえ | ✅ はい |
| ホットモジュール置換 | ❌ いいえ | ✅ はい |
| プリミティブでないJS型 | ❌ いいえ | ✅ はい |
外部設定ファイル
Nuxtはnuxt.config.tsファイルを構成の唯一の情報源として使用し、外部設定ファイルの読み取りをスキップします。プロジェクトの構築中に、それらを構成する必要がある場合があります。次の表は、一般的な設定と、Nuxtでそれらを構成する方法（該当する場合）を示しています。
| 名前 | 設定ファイル | 設定方法 |
|---|---|---|
| Nitro | nitro.config.ts | nuxt.configでnitroキーを使用します。 |
| PostCSS | postcss.config.js | nuxt.configでpostcssキーを使用します。 |
| Vite | vite.config.ts | nuxt.configでviteキーを使用します。 |
| webpack | webpack.config.ts | nuxt.configでwebpackキーを使用します。 |
他の一般的な設定ファイルのリストを次に示します。
| 名前 | 設定ファイル | 設定方法 |
|---|---|---|
| TypeScript | tsconfig.json | 詳細情報 |
| ESLint | eslint.config.js | 詳細情報 |
| Prettier | .prettierrc.json | 詳細情報 |
| Stylelint | .stylelintrc.json | 詳細情報 |
| TailwindCSS | tailwind.config.js | 詳細情報 |
| Vitest | vitest.config.ts | 詳細情報 |
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に移行され、Nuxt統合があります。