Nuxt 設定

nuxt.config.ts ファイルで使用できるすべてのオプションを発見してください。

alias

JavaScript や CSS 内でカスタムディレクトリにアクセスするための追加のエイリアスを定義することで、DX を向上させることができます。

型: object
デフォルト

{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "#shared": "/<rootDir>/shared",
  "assets": "/<srcDir>/assets",
  "public": "/<rootDir>/public",
  "#build": "/<rootDir>/.nuxt",
  "#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
}

注意: webpack のコンテキスト内（画像ソース、CSS - ただし JavaScript ではない）では、エイリアスにアクセスする際に ~ をプレフィックスとして付ける必要があります。

注意: これらのエイリアスは、生成された TypeScript 設定（.nuxt/tsconfig.app.json、.nuxt/tsconfig.server.json など）に自動的に追加されるため、完全な型サポートとパスの自動補完が可能です。生成された設定によって提供されるオプションをさらに拡張する必要がある場合は、ここに追加するか、nuxt.config の typescript.tsConfig プロパティ内に追加してください。

例:

import { fileURLToPath } from "node:url";

export default defineNuxtConfig({
  alias: {
    'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
    'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
    'data': fileURLToPath(new URL('./assets/other/data', import.meta.url))
  }
})

<template>
  <img src="~images/main-bg.jpg">
</template>

<script>
import data from 'data/test.json'
</script>

<style>
// 以下をコメント解除
//@import '~style/variables.scss';
//@import '~style/utils.scss';
//@import '~style/base.scss';
body {
  background-image: url('~images/main-bg.jpg');
}
</style>

analyzeDir

nuxt analyze を実行した際に Nuxt が生成ファイルを保存するディレクトリ。

相対パスが指定された場合、それは rootDir に対して相対的になります。

型: string
デフォルト: "/<rootDir>/.nuxt/analyze"

app

Nuxt アプリケーションの設定。

`baseURL`

Nuxt アプリケーションのベースパス。

例:

型: string
デフォルト: "/"

例:

export default defineNuxtConfig({
  app: {
    baseURL: '/prefix/'
  }
})

これは、NUXT_APP_BASE_URL 環境変数を設定することで実行時に設定することもできます。

例:

NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs

`buildAssetsDir`

ビルドされたサイトアセットのフォルダ名。baseURL（または設定されている場合は cdnURL）に対して相対的です。これはビルド時に設定され、実行時にカスタマイズすべきではありません。

型: string
デフォルト: "/_nuxt/"

`cdnURL`

パブリックフォルダを提供するための絶対 URL（プロダクションのみ）。

例:

型: string
デフォルト: ""

例:

export default defineNuxtConfig({
  app: {
    cdnURL: 'https://mycdn.org/'
  }
})

これは、NUXT_APP_CDN_URL 環境変数を設定することで実行時に異なる値に設定できます。

例:

NUXT_APP_CDN_URL=https://mycdn.org/ node .output/server/index.mjs

`head`

各ページの <head> のデフォルト設定を設定します。

型: object
デフォルト

{
  "meta": [
    {
      "name": "viewport",
      "content": "width=device-width, initial-scale=1"
    },
    {
      "charset": "utf-8"
    }
  ],
  "link": [],
  "style": [],
  "script": [],
  "noscript": []
}

例:

app: {
  head: {
    meta: [
      // <meta name="viewport" content="width=device-width, initial-scale=1">
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    script: [
      // <script src="https://myawesome-lib.js"></script>
      { src: 'https://awesome-lib.js' }
    ],
    link: [
      // <link rel="stylesheet" href="https://myawesome-lib.css">
      { rel: 'stylesheet', href: 'https://awesome-lib.css' }
    ],
    // このエリアは変更される可能性があることに注意してください
    style: [
      // <style>:root { color: red }</style>
      { textContent: ':root { color: red }' }
    ],
    noscript: [
      // <noscript>JavaScript is required</noscript>
      { textContent: 'JavaScript is required' }
    ]
  }
}

`keepalive`

ページ間の KeepAlive 設定のデフォルト値。

これは個々のページで definePageMeta を使用して上書きできます。JSON シリアライズ可能な値のみが許可されます。

型: boolean
デフォルト: false

参照: Vue KeepAlive

`layoutTransition`

レイアウト遷移のデフォルト値。

これは個々のページで definePageMeta を使用して上書きできます。JSON シリアライズ可能な値のみが許可されます。

型: boolean
デフォルト: false

参照: Vue Transition ドキュメント

`pageTransition`

ページ遷移のデフォルト値。

これは個々のページで definePageMeta を使用して上書きできます。JSON シリアライズ可能な値のみが許可されます。

型: boolean
デフォルト: false

参照: Vue Transition ドキュメント

`rootAttrs`

Nuxt ルート要素の id をカスタマイズします。

型: object
デフォルト

{
  "id": "__nuxt"
}

`rootId`

Nuxt ルート要素の id をカスタマイズします。

型: string
デフォルト: "__nuxt"

`rootTag`

Nuxt ルート要素のタグをカスタマイズします。

型: string
デフォルト: "div"

`spaLoaderAttrs`

Nuxt SPA ローディングテンプレート要素の属性をカスタマイズします。

型: object
デフォルト:

{
"id": "__nuxt-loader"
}

`id`

型: string
デフォルト: "__nuxt-loader"

`spaLoaderTag`

Nuxt SpaLoader 要素のタグをカスタマイズします。

型: string
デフォルト: "div"

`teleportAttrs`

Nuxt Teleport 要素の属性をカスタマイズします。

型: object
デフォルト

{
  "id": "teleports"
}

`teleportId`

Nuxt Teleport 要素の id をカスタマイズします。

型: string
デフォルト: "teleports"

`teleportTag`

Nuxt Teleport 要素のタグをカスタマイズします。

型: string
デフォルト: "div"

`viewTransition`

ビュー遷移のデフォルト値。

これは、ビュー遷移の 実験的 サポートが nuxt.config ファイルで有効にされている場合のみ効果があります。これは個々のページで definePageMeta を使用して上書きできます。

型: boolean
デフォルト: false

参照: Nuxt View Transition API ドキュメント

appConfig

追加のアプリケーション設定

プログラム的な使用と型サポートのために、このオプションで直接アプリケーション設定を提供できます。これはデフォルト値として app.config ファイルとマージされます。

`nuxt`

appId

マルチアプリプロジェクトの場合、Nuxt アプリケーションのユニークな id。

デフォルトは nuxt-app です。

型: string
デフォルト: "nuxt-app"

build

共有ビルド設定。

`analyze`

Nuxt はバンドルを視覚化し、最適化方法を提供します。

バンドル分析を有効にするには true に設定するか、オプションを含むオブジェクトを渡します: webpack 用または vite 用。

型: object
デフォルト

{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

例:

analyze: {
  analyzerMode: 'static'
}

`templates`

このオプションの代わりに @nuxt/kit の addTemplate を使用することをお勧めします。

型: array

例:

templates: [
  {
    src: '~/modules/support/plugin.js', // `src` は絶対パスまたは相対パス
    dst: 'support.js', // `dst` はプロジェクトの `.nuxt` ディレクトリに対して相対的
  }
]

`transpile`

特定の依存関係を Babel でトランスパイルしたい場合は、ここに追加できます。transpile の各項目は、パッケージ名、関数、文字列、または依存関係のファイル名に一致する正規表現オブジェクトであることができます。

条件付きでトランスパイルするために関数を使用することもできます。関数はオブジェクト（{ isDev, isServer, isClient, isModern, isLegacy }）を受け取ります。

型: array

例:

transpile: [({ isLegacy }) => isLegacy && 'ky']

buildDir

ビルドされた Nuxt ファイルが配置されるディレクトリを定義します。

多くのツールは .nuxt を隠しディレクトリと仮定します（. で始まるため）。それが問題である場合、このオプションを使用してそれを防ぐことができます。

型: string
デフォルト: "/<rootDir>/.nuxt"

例:

export default {
  buildDir: 'nuxt-build'
}

buildId

ビルドに一致するユニークな識別子。これはプロジェクトの現在の状態のハッシュを含むことがあります。

型: string
デフォルト: "4a2e2d30-418f-41df-8e58-ed5df06de7fd"

builder

アプリケーションの Vue 部分をバンドルするために使用するビルダー。

型: string
デフォルト: "@nuxt/vite-builder"

compatibilityDate

アプリケーションの互換性日付を指定します。

これは、Nitro、Nuxt Image、およびメジャーバージョンのバンプなしで動作が変更される可能性のある他のモジュールのプリセットの動作を制御するために使用されます。将来的にはこの機能に関するツールを改善する予定です。

components

Nuxt コンポーネントの自動登録を設定します。

ここで設定されたディレクトリ内のコンポーネントは、ページ、レイアウト（および他のコンポーネント）全体で明示的にインポートすることなく使用できます。

型: object
デフォルト

{
  "dirs": [
    {
      "path": "~/components/global",
      "global": true
    },
    "~/components"
  ]
}

参照: app/components/ ディレクトリドキュメント

css

グローバルに設定したい CSS ファイル/モジュール/ライブラリを定義できます（すべてのページに含まれます）。

Nuxt は拡張子によってファイルタイプを自動的に推測し、適切なプリプロセッサを使用します。必要に応じて、必要なローダーをインストールする必要があります。

型: array

例:

css: [
  // Node.js モジュールを直接ロード（ここでは Sass ファイル）
  'bulma',
  // プロジェクト内の CSS ファイル
  '~/assets/css/main.css',
  // プロジェクト内の SCSS ファイル
  '~/assets/css/main.scss'
]

debug

デバッグモードを有効にするには true に設定します。

現在のところ、サーバー上でフック名とタイミングを出力し、ブラウザではフック引数もログに記録します。特定のデバッグオプションを有効にするためにオブジェクトを設定することもできます。

型: boolean
デフォルト: false

dev

Nuxt が開発モードで実行されているかどうか。

通常、これを設定する必要はありません。

型: boolean
デフォルト: false

devServer

`cors`

開発サーバーの CORS オプションを設定します

`origin`

型: array
デフォルト

[
  {}
]

`host`

開発サーバーのリスニングホスト

`https`

HTTPS を有効にするかどうか。

型: boolean
デフォルト: false

例:

export default defineNuxtConfig({
  devServer: {
    https: {
      key: './server.key',
      cert: './server.crt'
    }
  }
})

`loadingTemplate`

ローディング画面を表示するテンプレート

型: function

`port`

開発サーバーのリスニングポート

型: number
デフォルト: 3000

`url`

リスニング開発サーバーの URL。

これは直接設定すべきではなく、常にモジュールおよび内部使用のために開発サーバーによって完全な URL によって上書きされます。

型: string
デフォルト: "http://localhost:3000"

devServerHandlers

Nitro 開発専用サーバーハンドラー。

型: array

参照: Nitro サーバールートドキュメント

devtools

開発用に Nuxt DevTools を有効にします。

devtools の破壊的変更は Nuxt のバージョンに反映されない可能性があります。

参照: Nuxt DevTools 詳細情報。

dir

Nuxt が使用するデフォルトのディレクトリ構造をカスタマイズします。

必要がない限り、デフォルトを使用することをお勧めします。

`app`

型: string
デフォルト: "app"

`assets`

アセットディレクトリ（ビルド内で ~assets としてエイリアスされます）。

型: string
デフォルト: "app/assets"

`layouts`

レイアウトディレクトリ。各ファイルは Nuxt レイアウトとして自動登録されます。

型: string
デフォルト: "app/layouts"

`middleware`

ミドルウェアディレクトリ。各ファイルは Nuxt ミドルウェアとして自動登録されます。

型: string
デフォルト: "app/middleware"

`modules`

モジュールディレクトリ。各ファイルは Nuxt モジュールとして自動登録されます。

型: string
デフォルト: "modules"

`pages`

アプリケーションページルートを自動生成するために処理されるディレクトリ。

型: string
デフォルト: "app/pages"

`plugins`

プラグインディレクトリ。各ファイルは Nuxt プラグインとして自動登録されます。

型: string
デフォルト: "app/plugins"

`public`

静的ファイルを含むディレクトリ。Nuxt サーバーを介して直接アクセス可能で、アプリケーションが生成されるときに dist フォルダにコピーされます。

型: string
デフォルト: "public"

`shared`

共有ディレクトリ。このディレクトリはアプリとサーバー間で共有されます。

型: string
デフォルト: "shared"

esbuild

`options`

Nuxt 内で使用され、Vite や webpack などの他のビルダーに渡される共有 esbuild オプションを設定します。

`jsxFactory`

型: string
デフォルト: "h"

`jsxFragment`

型: string
デフォルト: "Fragment"

`target`

型: string
デフォルト: "esnext"

`tsconfigRaw`

型: object

experimental

`alwaysRunFetchOnKeyChange`

キーが変更されたときに useFetch を実行するかどうかを設定します。immediate: false に設定されていてまだトリガーされていない場合でも実行されます。

useFetch と useAsyncData は、immediate: true またはすでにトリガーされている場合、キーが変更されたときに常に実行されます。

型: boolean
デフォルト: true

`appManifest`

クライアントサイドでルールを尊重するためにアプリマニフェストを使用します。

型: boolean
デフォルト: true

`asyncContext`

ネストされたコンポーザブルにアクセス可能なネイティブ非同期コンテキストを有効にします

型: boolean
デフォルト: false

参照: Nuxt PR #20918

`asyncEntry`

Vue バンドルの非同期エントリーポイントを生成するために true に設定します（モジュールフェデレーションサポート用）。

型: boolean
デフォルト: false

`browserDevtoolsTiming`

Chromium ベースのブラウザのパフォーマンスパネルで Nuxt アプリケーションフックのタイミングを有効にします。

この機能は Nuxt フックのパフォーマンスマーカーを追加し、ブラウザのパフォーマンスタブで実行時間を追跡できるようにします。特にパフォーマンスの問題をデバッグするのに役立ちます。

型: boolean
デフォルト: false

例:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // ブラウザの devtools で Nuxt フックのパフォーマンスマーカーを有効にする
    browserDevtoolsTiming: true
  }
})

参照: PR #29922

参照: Chrome DevTools Performance API

`buildCache`

Nuxt/Nitro のビルドアーティファクトを構成とソースファイルのハッシュに基づいてキャッシュします。

これは、アプリの Vue/Nitro 部分の srcDir および serverDir 内のソースファイルに対してのみ機能します。

型: boolean
デフォルト: false

`checkOutdatedBuildInterval`

新しいビルドをチェックする時間間隔（ミリ秒単位）を設定します。experimental.appManifest が false の場合は無効になります。

無効にするには false に設定します。

型: number
デフォルト: 3600000

`clientFallback`

SSR でエラーが発生した場合にクライアントでコンテンツをレンダリングするための実験的な <NuxtClientFallback> コンポーネントを有効にするかどうか。

型: boolean
デフォルト: false

`clientNodeCompat`

unenv を使用してクライアントビルドで Node.js インポートを自動的にポリフィルします。

型: boolean
デフォルト: false

参照: unenv

注意: ブラウザで Buffer などのグローバルを機能させるには、手動で注入する必要があります。

import { Buffer } from 'node:buffer'

globalThis.Buffer = globalThis.Buffer || Buffer

`compileTemplate`

Nuxt テンプレートをコンパイルするために lodash.template を使用するかどうか。

このフラグは v4 のリリースとともに削除され、Nuxt v3.12+ またはナイトリリースチャンネルでの事前テストのためにのみ存在します。

型: boolean
デフォルト: true

`componentIslands`

<NuxtIsland> および .island.vue ファイルを使用した実験的なコンポーネントアイランドサポート。

デフォルトでは 'auto' に設定されており、アプリにアイランド、サーバーコンポーネント、またはサーバーページがある場合にのみ有効になります。

型: string
デフォルト: "auto"

`configSchema`

設定スキーマサポート

型: boolean
デフォルト: true

参照: Nuxt Issue #15592

`cookieStore`

CookieStore サポートを有効にして、クッキーの更新をリッスンし（ブラウザがサポートしている場合）、useCookie の ref 値を更新します。

型: boolean
デフォルト: true

参照: CookieStore

`crossOriginPrefetch`

Speculation Rules API を使用してクロスオリジンプリフェッチを有効にします。

型: boolean
デフォルト: false

`debugModuleMutation`

モジュールコンテキストで nuxt.options への変更を記録し、Nuxt 初期化フェーズ中にモジュールによって行われた設定変更をデバッグします。

有効にすると、Nuxt はどのモジュールが設定オプションを変更したかを追跡し、予期しない設定変更を追跡しやすくします。

型: boolean
デフォルト: false

例:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // モジュールによる設定変更の追跡を有効にする
    debugModuleMutation: true
  }
})

参照: PR #30555

`decorators`

Nuxt および Nitro で実験的なデコレータの使用を有効にします。

型: boolean
デフォルト: false

参照: https://github.com/tc39/proposal-decorators

`defaults`

コア Nuxt コンポーネントおよびコンポーザブルのデフォルトオプションを指定できます。

これらのオプションは将来的に app.config または app/ ディレクトリに移動される可能性があります。

`nuxtLink`

`componentName`

型: string
デフォルト: "NuxtLink"

`prefetch`

型: boolean
デフォルト: true

`prefetchOn`

`visibility`

型: boolean
デフォルト: true

`useAsyncData`

useAsyncData（およびそれに伴う useFetch）に適用されるオプション

`deep`

型: boolean
デフォルト: true

`errorValue`

型: string
デフォルト: "null"

`value`

型: string
デフォルト: "null"

`useFetch`

`emitRouteChunkError`

vite/webpack チャンクの読み込みエラーが発生したときに app:chunkError フックを発行します。

デフォルトでは、Nuxt は新しいルートに移動する際にチャンクの読み込みが失敗したときに新しいルートのリロードも実行します（automatic）。 automatic-immediate に設定すると、チャンクの読み込みが失敗したときに現在のルートをすぐにリロードします（ナビゲーションを待たずに）。自動処理を無効にするには、これを false に設定するか、手動でチャンクエラーを処理するには manual に設定します。

型: string
デフォルト: "automatic"

参照: Nuxt PR #19038

`enforceModuleCompatibility`

Nuxt モジュールが互換性がない場合に Nuxt が停止するかどうか。

型: boolean
デフォルト: false

`externalVue`

ビルド時に vue、@vue/*、vue-router を外部化します。

型: boolean
デフォルト: true

参照: Nuxt Issue #13632

`extraPageMetaExtractionKeys`

scanPageMeta を使用する際にページメタデータから抽出する追加のキーを設定します。

これにより、モジュールがページメタデータから追加のメタデータにアクセスできるようになります。NuxtPage タイプにキーを追加することをお勧めします。

型: array

`granularCachedData`

useAsyncData および useFetch の手動リフレッシュ時に getCachedData の結果を呼び出して使用するかどうか。

型: boolean
デフォルト: false

`headNext`

新しい実験的な head 最適化を使用します:

head のタグをより効率的にレンダリングするために capo.js head プラグインを追加します。 - 初期ハイドレーションを削減するためにハッシュハイドレーションプラグインを使用します
型: boolean
デフォルト: true

参照: Nuxt Discussion #22632

`inlineRouteRules`

~/pages ディレクトリ内で defineRouteRules を使用して routeRules を直接定義できるようにします。

ルールは（パスに基づいて）変換され、サーバーリクエストに適用されます。たとえば、~/pages/foo/bar.vue に定義されたルールは /foo/bar リクエストに適用されます。~/pages/foo/[id].vue にあるルールは /foo/** リクエストに適用されます。カスタム path またはページの definePageMeta に設定された alias を使用している場合など、より詳細な制御が必要な場合は、nuxt.config 内で routeRules を直接設定する必要があります。

型: boolean
デフォルト: false

`lazyHydration`

<Lazy> コンポーネントのハイドレーション戦略の自動設定を有効にします。

この機能は、可視性、アイドル時間、または他のトリガーに基づいて遅延コンポーネントをハイドレーションするタイミングを賢く判断し、コンポーネントが必要になるまでハイドレーションを遅延させることでパフォーマンスを向上させます。

型: boolean
デフォルト: true

例:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    lazyHydration: true // Lazy コンポーネントのスマートハイドレーション戦略を有効にする
  }
})

// Vue コンポーネント内
<template>
  <Lazy>
    <ExpensiveComponent />
  </Lazy>
</template>

参照: PR #26468

`localLayerAliases`

レイヤー内の ~、~~、@、@@ エイリアスをレイヤーソースおよびルートディレクトリに対して解決します。

型: boolean
デフォルト: true

`navigationRepaint`

ナビゲーションの前に単一のアニメーションフレームを待機し、ブラウザがユーザーの操作を認識して再描画する機会を与えます。

プリレンダリングされたルートでナビゲーションする際の INP を削減できます。

型: boolean
デフォルト: true

`noVueServer`

nitro 内で vue サーバーレンダラーエンドポイントを無効にします。

型: boolean
デフォルト: false

`normalizeComponentNames`

自動生成された Vue コンポーネント名がコンポーネントを自動インポートするために使用する完全なコンポーネント名と一致することを保証します。

型: boolean
デフォルト: false

`parseErrorData`

サーバーエラーページをレンダリングする際に error.data を解析するかどうか。

型: boolean
デフォルト: false

`payloadExtraction`

このオプションが有効な場合（デフォルトで有効）、プリレンダリングされたページのペイロードが抽出されます。

型: boolean
デフォルト: true

`pendingWhenIdle`

useAsyncData と useFetch において、データのフェッチがまだ開始されていないときに pending を true にするかどうか。

型: boolean
デフォルト: true

`polyfillVueUseHead`

古い @vueuse/head API に依存するモジュール、プラグイン、またはユーザーコードの互換性レイヤーを追加するかどうか。

クライアントサイドのバンドルを約0.5kb削減するために無効化されています。

型: boolean
デフォルト: false

`purgeCachedData`

ルートナビゲーション時に Nuxt の静的および asyncData キャッシュをクリーンアップするかどうか。

Nuxt は useAsyncData と nuxtApp.static.data からキャッシュされたデータを自動的にパージします。これによりメモリリークを防ぎ、必要なときに新鮮なデータがロードされることを保証しますが、無効にすることも可能です。

型: boolean
デフォルト: true

例:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // 自動キャッシュクリーンアップを無効化（デフォルトは true）
    purgeCachedData: false
  }
})

参照: PR #31379

`relativeWatchPaths`

builder:watch フックで相対パスを提供するかどうか。

このフラグは v4 のリリースと共に削除され、Nuxt v3.12+ またはナイトリリースチャンネルでの高度なテストのためにのみ存在します。

型: boolean
デフォルト: true

`renderJsonPayloads`

複雑な型を復元するサポートを持つ JSON ペイロードをレンダリングします。

型: boolean
デフォルト: true

`resetAsyncDataToUndefined`

clear と clearNuxtData が非同期データをその デフォルト 値にリセットするか、null/undefined に更新するかどうか。

型: boolean
デフォルト: true

`respectNoSSRHeader`

x-nuxt-no-ssr ヘッダーを設定することで Nuxt SSR レスポンスを無効にすることを許可します。

型: boolean
デフォルト: false

`restoreState`

チャンクエラー後や手動で reloadNuxtApp() を呼び出した後にページをリロードする際に sessionStorage から Nuxt アプリの状態を復元するかどうか。

ハイドレーションエラーを避けるため、Vue アプリがマウントされた後にのみ適用されるため、初回ロード時にちらつきが発生する可能性があります。これを有効にする前に慎重に検討してください。予期しない動作を引き起こす可能性があり、useState に明示的なキーを提供することを検討してください。自動生成されたキーはビルド間で一致しない可能性があります。

型: boolean
デフォルト: false

`scanPageMeta`

ビルド時に definePageMeta で定義された一部のルートメタデータをモジュールに公開することを許可します（エイリアス、名前、パス、リダイレクト、プロップス、ミドルウェア）。

これは変数や条件付き代入ではなく、静的または文字列/配列でのみ機能します。

型: boolean
デフォルト: true

参照: Nuxt Issues #24770

`sharedPrerenderData`

プリレンダリングされたページ間でペイロード データ を自動的に共有します。これは、useAsyncData や useFetch を使用し、異なるページで同じデータをフェッチするサイトをプリレンダリングする際に、パフォーマンスの大幅な向上をもたらす可能性があります。

この機能を有効にする際には、データの一意のキーが常に同じデータに解決可能であることを確認することが特に重要です。例えば、特定のページに関連するデータをフェッチするために useAsyncData を使用している場合、そのデータに一意に一致するキーを提供する必要があります。（useFetch は自動的にこれを行います。）

型: boolean
デフォルト: false

例:

// 動的ページ（例: `[slug].vue`）では安全ではありません。ルートスラッグがフェッチされるデータに影響を与えるためです。
// しかし、Nuxt はそれをキーに反映できないため、知ることができません。
const route = useRoute()
const { data } = await useAsyncData(async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})
// 代わりに、フェッチされたデータを一意に識別するキーを使用する必要があります。
const { data } = await useAsyncData(route.params.slug, async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})

`spaLoadingTemplateLocation`

suspense:resolve まで spa-loading-template を表示し続けます。

型: string
デフォルト: "within"

参照: Nuxt Issues #24770

`templateImportResolution`

テンプレートを追加したモジュールのパスから Nuxt テンプレートへのインポートを解決することを無効にします。

デフォルトでは、Nuxt はテンプレート内のインポートをそれらを追加したモジュールに相対的に解決しようとします。これを false に設定すると、この動作が無効になり、特定の環境で解決の競合が発生する場合に役立つかもしれません。

型: boolean
デフォルト: true

例:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // モジュールパスからのテンプレートインポート解決を無効化
    templateImportResolution: false
  }
})

参照: PR #31175

`templateRouteInjection`

デフォルトでは、自動インポートされた useRoute() コンポーザブルによって返されるルートオブジェクトは、<NuxtPage> 内の現在表示されているページと同期されます。これは vue-router のエクスポートされた useRoute や Vue テンプレートで利用可能なデフォルトの $route オブジェクトには当てはまりません。

このオプションを有効にすると、Nuxt の管理する useRoute() と $route テンプレートオブジェクトを同期させるためのミックスインが注入されます。

型: boolean
デフォルト: true

`templateUtils`

Nuxt テンプレートをコンパイルする際に、レガシーな templateUtils オブジェクト（serialize、importName、importSources を含む）を提供するかどうか。

このフラグは v4 のリリースと共に削除され、Nuxt v3.12+ またはナイトリリースチャンネルでの高度なテストのためにのみ存在します。

型: boolean
デフォルト: true

`treeshakeClientOnly`

クライアント専用コンポーネントの内容をサーバーバンドルからツリーシェイクします。

型: boolean
デフォルト: true

参照: Nuxt PR #5750

`typedPages`

unplugin-vue-router を使用した新しい実験的な型付きルーターを有効にします。

型: boolean
デフォルト: false

`viewTransition`

クライアントサイドルーターとの View Transition API 統合を有効にします。

型: boolean
デフォルト: false

参照: View Transitions API

`watcher`

Nuxt のウォッチングサービスとして使用される代替ウォッチャーを設定します。

ソースディレクトリがルートディレクトリと同じ場合、Nuxt は 'chokidar-granular' を使用します。これにより、ウォッチングから除外されているトップレベルディレクトリ（node_modules や .git など）が無視されます。代わりに parcel を設定して @parcel/watcher を使用することができ、大規模なプロジェクトや Windows プラットフォームでのパフォーマンスを向上させることができます。また、chokidar を設定してソースディレクトリ内のすべてのファイルをウォッチすることもできます。

型: string
デフォルト: "chokidar"

参照: chokidar

参照: @parcel/watcher

`writeEarlyHints`

ノードサーバーを使用する際に早期ヒントを書き込みます。

型: boolean
デフォルト: false

注意: 現在のバージョンでは nginx は 103 Early hints をサポートしていません。

extends

複数のローカルまたはリモートソースからプロジェクトを拡張します。

値は、ソースディレクトリまたは現在の設定に対する設定パスを指す文字列または文字列の配列である必要があります。 github:、gh:、gitlab:、または bitbucket: を使用できます。

参照: c12 の設定レイヤー拡張に関するドキュメント

参照: giget のドキュメント

extensions

Nuxt リゾルバーによって解決されるべき拡張子。

型: array
デフォルト

[
  ".js",
  ".jsx",
  ".mjs",
  ".ts",
  ".tsx",
  ".vue"
]

features

Nuxt のいくつかの機能はオプトインベースで利用可能であり、ニーズに応じて無効にすることができます。

`devLogs`

開発中にサーバーログをクライアントにストリームします。これらのログは dev:ssr-logs フックで処理できます。

silent に設定すると、ログはブラウザコンソールに表示されません。

型: boolean
デフォルト: false

`inlineStyles`

HTML をレンダリングする際にスタイルをインライン化します（現在は vite のみ）。

Vue コンポーネントのパスを受け取り、そのコンポーネントのスタイルをインライン化するかどうかを示すブール値を返す関数を渡すこともできます。

型: boolean
デフォルト: (id) => id.includes('.vue')

`noScripts`

Nuxt スクリプトと JS リソースヒントのレンダリングをオフにします。routeRules 内でより細かくスクリプトを無効にすることもできます。

production または true に設定すると、JS はプロダクションモードでのみ無効になります。

型: boolean
デフォルト: false

future

future は、将来（おそらくメジャー）バージョンでデフォルトになる新機能を早期にオプトインするためのものです。

`compatibilityVersion`

これは、Nuxt の機能やフラグへの早期アクセスを有効にするために使用されます。

Nuxt 4 ではまだ設定可能ではありませんが、v5 のための破壊的変更をマージし始めると、これを有効にすることが可能になります。

`multiApp`

実験的なマルチアプリサポートへの早期アクセスを有効にします。

型: boolean
デフォルト: false

参照: Nuxt Issue #21635

`typescriptBundlerResolution`

TypeScript の 'Bundler' モジュール解決モードを有効にします。これは Nuxt や Vite のようなフレームワークに推奨される設定です。

exports を使用するモダンライブラリを使用する際の型サポートを向上させます。レガシーな 'Node' モードを使用するには false に設定できます。これは TypeScript のデフォルトです。

型: boolean
デフォルト: true

参照: TypeScript PR implementing bundler module resolution

hooks

フックは通常モジュールで使用される Nuxt イベントのリスナーですが、nuxt.config でも利用可能です。

内部的には、フックはコロンを使用した命名パターンに従います（例: build:done）。設定を簡単にするために、nuxt.config 内で階層オブジェクトとして構造化することもできます（以下のように）。

例:

import fs from 'node:fs'
import path from 'node:path'
export default {
  hooks: {
    build: {
      done(builder) {
        const extraFilePath = path.join(
          builder.nuxt.options.buildDir,
          'extra-file'
        )
        fs.writeFileSync(extraFilePath, 'Something extra')
      }
    }
  }
}

ignore

ignorePrefix よりもカスタマイズ可能です。ignore 配列内で指定されたグロブパターンに一致するすべてのファイルはビルド時に無視されます。

型: array
デフォルト

[
  "**/*.stories.{js,cts,mts,ts,jsx,tsx}",
  "**/*.{spec,test}.{js,cts,mts,ts,jsx,tsx}",
  "**/*.d.{cts,mts,ts}",
  "**/.{pnpm-store,vercel,netlify,output,git,cache,data}",
  "**/*.sock",
  ".nuxt/analyze",
  ".nuxt",
  "**/-*.*"
]

ignoreOptions

node-ignore に直接オプションを渡します（Nuxt はファイルを無視するために使用します）。

参照: node-ignore

例:

ignoreOptions: {
  ignorecase: false
}

ignorePrefix

app/pages/、app/layouts/、app/middleware/、および public/ ディレクトリ内のファイルは、ファイル名が ignorePrefix で指定されたプレフィックスで始まる場合、ビルドプロセス中に無視されます。これは、特定のファイルがビルドされたアプリケーションで処理または提供されるのを防ぐことを目的としています。デフォルトでは、ignorePrefix は '-' に設定されており、'-' で始まるファイルは無視されます。

型: string
デフォルト: "-"

imports

Nuxt がアプリケーションにコンポーザブルを自動インポートする方法を設定します。

参照: Nuxt ドキュメント

`dirs`

自動インポートされるカスタムディレクトリの配列。このオプションはデフォルトのディレクトリ（~/composables, ~/utils）を上書きしません。

型: array

例:

imports: {
  // `~/stores` に定義された pinia ストアを自動インポート
  dirs: ['stores']
}

`global`

型: boolean
デフォルト: false

`scan`

app/composables/ および app/utils/ ディレクトリをスキャンして自動インポートするコンポーザブルを探すかどうか。Nuxt または他のモジュールによって登録された自動インポート、例えば vue や nuxt からのインポートは引き続き有効です。

型: boolean
デフォルト: true

logLevel

ビルドログのログレベル。

CI で実行されている場合や TTY が利用できない場合はデフォルトで 'silent' になります。このオプションは Vite では 'silent'、webpack では 'none' として使用されます。

型: string
デフォルト: "info"

modules

モジュールは Nuxt の拡張機能であり、そのコア機能を拡張し、無限の統合を追加できます。

各モジュールは文字列（パッケージを参照するか、ファイルへのパスである可能性があります）、モジュールを最初の文字列、オプションを2番目のオブジェクトとするタプル、またはインラインモジュール関数のいずれかです。 Nuxt はモジュール配列内の各アイテムを node require パス（node_modules 内）を使用して解決しようとし、~ エイリアスが使用されている場合はプロジェクト srcDir から解決されます。

型: array

注意: モジュールは順番に実行されるため、順序が重要です。最初に nuxt.config.ts で定義されたモジュールがロードされます。次に、modules/ ディレクトリで見つかったモジュールが実行され、アルファベット順にロードされます。

例:

modules: [
  // パッケージ名を使用
  '@nuxtjs/axios',
  // プロジェクト srcDir に対する相対パス
  '~/modules/awesome.js',
  // オプションを提供
  ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
  // インライン定義
  function () {}
]

modulesDir

パス解決のためのモジュールディレクトリを設定するために使用されます（例: webpack の resolveLoading、nodeExternals、postcss）。

設定パスは options.rootDir に対して相対的です（デフォルトは現在の作業ディレクトリ）。このフィールドを設定することは、プロジェクトが yarn ワークスペーススタイルのモノリポジトリとして組織されている場合に必要になるかもしれません。

型: array
デフォルト

[
  "/<rootDir>/node_modules"
]

例:

export default {
  modulesDir: ['../../node_modules']
}

nitro

Nitro の設定。

参照: Nitro 設定ドキュメント

`routeRules`

型: object

`runtimeConfig`

型: object
デフォルト

{
  "public": {},
  "app": {
    "buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  },
  "nitro": {
    "envPrefix": "NUXT_"
  }
}

optimization

ビルド時の最適化設定。

`asyncTransforms`

await 後に非同期コンテキストを保持する unctx からのトランスフォーマーに直接渡されるオプション。

`asyncFunctions`

型: array
デフォルト

[
  "defineNuxtPlugin",
  "defineNuxtRouteMiddleware"
]

`objectDefinitions`

`defineNuxtComponent`

型: array
デフォルト

[
  "asyncData",
  "setup"
]

`defineNuxtPlugin`

型: array
デフォルト

[
  "setup"
]

`definePageMeta`

型: array
デフォルト

[
  "middleware",
  "validate"
]

`keyedComposables`

キーを注入するための関数。

関数に渡される引数の数が argumentLength より少ない限り、サーバーとクライアント間でリクエストを重複排除するために使用できる追加のマジックストリングが注入されます。この追加のキーを処理するための手順を講じる必要があります。キーは、ファイル内で関数が呼び出される場所に基づいて一意になります。

型: array
デフォルト

[
  {
    "name": "callOnce",
    "argumentLength": 3
  },
  {
    "name": "defineNuxtComponent",
    "argumentLength": 2
  },
  {
    "name": "useState",
    "argumentLength": 2
  },
  {
    "name": "useFetch",
    "argumentLength": 3
  },
  {
    "name": "useAsyncData",
    "argumentLength": 3
  },
  {
    "name": "useLazyAsyncData",
    "argumentLength": 3
  },
  {
    "name": "useLazyFetch",
    "argumentLength": 3
  }
]

`treeShake`

特定のビルドからコードをツリーシェイクします。

`composables`

サーバーまたはクライアントビルドからコンポーザブルをツリーシェイクします。

例:

treeShake: { client: { myPackage: ['useServerOnlyComposable'] } }

`client`

型: object
デフォルト

{
  "vue": [
    "onRenderTracked",
    "onRenderTriggered",
    "onServerPrefetch"
  ],
  "#app": [
    "definePayloadReducer",
    "definePageMeta",
    "onPrehydrate"
  ]
}

`server`

型: object
デフォルト

{
  "vue": [
    "onMounted",
    "onUpdated",
    "onUnmounted",
    "onBeforeMount",
    "onBeforeUpdate",
    "onBeforeUnmount",
    "onRenderTracked",
    "onRenderTriggered",
    "onActivated",
    "onDeactivated"
  ],
  "#app": [
    "definePayloadReviver",
    "definePageMeta"
  ]
}

pages

Nuxt 3 で vue-router 統合を使用するかどうか。値を提供しない場合、ソースフォルダに app/pages/ ディレクトリがある場合に有効になります。

さらに、ページ用に特定のファイルのみをスキャンするためのグロブパターンまたはパターンの配列を提供することができます。

例:

pages: {
  pattern: ['**\/*\/*.vue', '!**\/*.spec.*'],
}

plugins

Nuxt アプリのプラグインの配列。

各プラグインは文字列（ファイルへの絶対または相対パスである可能性があります）であることができます。.client または .server で終わる場合、それは自動的に適切なコンテキストでのみロードされます。また、src と mode キーを持つオブジェクトであることもできます。

型: array

注意: プラグインは ~/plugins ディレクトリからも自動登録され、これらのプラグインは nuxt.config にリストする必要はありません。ただし、順序をカスタマイズする必要がある場合を除きます。すべてのプラグインはその src パスによって重複排除されます。

参照: app/plugins/ ディレクトリのドキュメント

例:

plugins: [
  '~/plugins/foo.client.js', // クライアントサイドのみ
  '~/plugins/bar.server.js', // サーバーサイドのみ
  '~/plugins/baz.js', // クライアント & サーバー両方
  { src: '~/plugins/both-sides.js' },
  { src: '~/plugins/client-only.js', mode: 'client' }, // クライアントサイドのみ
  { src: '~/plugins/server-only.js', mode: 'server' } // サーバーサイドのみ
]

postcss

`order`

PostCSS プラグインの順序付け戦略。

型: function

`plugins`

PostCSS プラグインを設定するためのオプション。

参照: PostCSS ドキュメント

`autoprefixer`

CSS を解析し、CSS ルールにベンダープレフィックスを追加するプラグイン。

参照: autoprefixer

`cssnano`

型: object

参照: cssnano 設定オプション

rootDir

アプリケーションのルートディレクトリを定義します。

このプロパティは上書き可能です（例えば、nuxt ./my-app/ を実行すると、rootDir は現在の作業ディレクトリからの ./my-app/ の絶対パスに設定されます）。通常、このオプションを設定する必要はありません。

型: string
デフォルト: "/<rootDir>"

routeRules

サーバールートに適用されるグローバルルートオプション。

実験的: これは実験的な機能であり、API は将来変更される可能性があります。

参照: Nitro ルートルールドキュメント

router

`options`

vue-router に渡される追加のルーターオプション。vue-router のオプションに加えて、Nuxt はルーターをカスタマイズするための追加オプションを提供します（以下を参照）。

注意: Nuxt 設定によって渡されるオプションは JSON シリアライズ可能なものである必要があります。より詳細な制御が必要な場合は、router.options.ts ファイルを使用できます。

参照: Vue Router ドキュメント.

`hashMode`

SPA モードでハッシュ履歴を有効にできます。このモードでは、ルーターは内部的に渡される実際の URL の前にハッシュ文字（#）を使用します。有効にすると、URL はサーバーに送信されず、SSR はサポートされません。

型: boolean
デフォルト: false

デフォルト: false

`scrollBehaviorType`

ハッシュリンクのスクロール動作をカスタマイズします。

型: string
デフォルト: "auto"

デフォルト: 'auto'

runtimeConfig

ランタイム設定は、動的設定と環境変数を Nuxt アプリコンテキストに渡すことを可能にします。

このオブジェクトの値は、useRuntimeConfig を使用してサーバーからのみアクセス可能です。主にフロントエンドに公開されない プライベート 設定を保持する必要があります。これには、API シークレットトークンへの参照が含まれる可能性があります。 public および app の下にあるものはフロントエンドにも公開されます。値は、実行時に一致する環境変数によって自動的に置き換えられます。例えば、環境変数 NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/ を設定すると、以下の例の2つの値が上書きされます。

型: object
デフォルト

{
  "public": {},
  "app": {
    "buildId": "4a2e2d30-418f-41df-8e58-ed5df06de7fd",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

例:

export default {
 runtimeConfig: {
    apiKey: '', // デフォルトは空文字列、実行時に process.env.NUXT_API_KEY を使用して自動的に設定
    public: {
       baseURL: '' // フロントエンドにも公開されます。
    }
  }
}

serverDir

Nuxt アプリケーションのサーバーディレクトリを定義します。ここには Nitro ルート、ミドルウェア、プラグインが保持されます。

相対パスが指定された場合、それは rootDir に対して相対的になります。

型: string
デフォルト: "/<srcDir>/server"

serverHandlers

Nitro サーバーハンドラー。

各ハンドラーは以下のオプションを受け入れます:

handler: ハンドラーを定義するファイルへのパス。 - route: ハンドラーが利用可能なルート。これは rou3 の規約に従います。 - method: 処理されるべきリクエストの HTTP メソッド。 - middleware: ミドルウェアハンドラーであるかどうかを指定します。 - lazy: ハンドラーをインポートするためにレイジーローディングを使用するかどうかを指定します。
型: array

参照: server/ ディレクトリのドキュメント

注意: server/api、server/middleware、および server/routes からのファイルは Nuxt によって自動的に登録されます。

例:

serverHandlers: [
  { route: '/path/foo/**:name', handler: '~/server/foohandler.ts' }
]

sourcemap

サーバーおよび/またはクライアントバンドルのソースマップが生成されるかどうか、およびその方法を設定します。

単一のブール値を設定すると、その値がサーバーとクライアントの両方に適用されます。さらに、'hidden' オプションもサーバーとクライアントの両方で利用可能です。クライアントとサーバーの両方に利用可能なオプション: - true: ソースマップを生成し、最終バンドルにソース参照を含めます。 - false: ソースマップを生成しません。 - 'hidden': ソースマップを生成しますが、最終バンドルに参照を含めません。

型: object
デフォルト

{
  "server": true,
  "client": false
}

spaLoadingTemplate

ブール値または HTML ファイルへのパスで、ssr: false でレンダリングされた任意の HTML ページに挿入される内容を指定します。

設定されていない場合、存在する場合はレイヤーのいずれかにある ~/spa-loading-template.html ファイルを使用します。 - false の場合、SPA ローディングインジケーターはロードされません。 - true の場合、Nuxt はレイヤーのいずれかにある ~/spa-loading-template.html ファイルを探します。存在しない場合はデフォルトの Nuxt 画像が使用されます。スピナーの良いソースは SpinKit や SVG Spinners です。
デフォルト: null

例: ~/spa-loading-template.html

<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
<div class="loader"></div>
<style>
.loader {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #000;
  border-left-color: #000;
  border-bottom-color: #efefef;
  border-right-color: #efefef;
  border-radius: 50%;
  -webkit-animation: loader 400ms linear infinite;
  animation: loader 400ms linear infinite;
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes loader {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>

srcDir

Nuxt アプリケーションのソースディレクトリを定義します。

相対パスが指定された場合、それは rootDir に対して相対的になります。

型: string
デフォルト: "app" (Nuxt 4), "." (Nuxt 3 with compatibilityMode: 3)

例:

export default {
  srcDir: 'app/'
}

このフォルダ構造を期待します:

-| app/
---| assets/
---| components/
---| layouts/
---| middleware/
---| pages/
---| plugins/
---| app.config.ts
---| app.vue
---| error.vue
-| server/
-| public/
-| modules/
-| nuxt.config.js
-| package.json

ssr

HTML のレンダリングを有効にするかどうか - サーバーモードで動的に、または生成時に。false に設定すると、生成されたページにはコンテンツがありません。

型: boolean
デフォルト: true

telemetry

Nuxt テレメトリを手動で無効にします。

参照: Nuxt Telemetry の詳細情報。

test

アプリがユニットテストされているかどうか。

型: boolean
デフォルト: false

theme

ローカルまたはリモートソースからプロジェクトを拡張します。

値は、現在の設定に対するソースディレクトリまたは設定パスを指す文字列である必要があります。 github:、gitlab:、bitbucket:、または https:// を使用してリモート git リポジトリから拡張できます。

型: string

typescript

Nuxt の TypeScript 統合の設定。

`builder`

プロジェクトに含めるビルダータイプ。

デフォルトでは、Nuxt は builder オプション（デフォルトは 'vite'）に基づいてこれを推測しますが、ビルダー環境タイプを完全に自分で処理するために（false で）オフにするか、'shared' オプションを選択できます。 'shared' オプションは、複数のビルダーをサポートしたいモジュール作成者に推奨されます。

デフォルト: null

`hoist`

compilerOptions.paths 内で深いエイリアスを生成するためのモジュール。これはまだサブパスをサポートしていません。shamefully-hoist=false を使用して pnpm モノレポ内で Nuxt を使用する場合に必要になるかもしれません。

型: array
デフォルト

[
  "nitropack/types",
  "nitropack/runtime",
  "nitropack",
  "defu",
  "h3",
  "consola",
  "ofetch",
  "@unhead/vue",
  "@nuxt/devtools",
  "vue",
  "@vue/runtime-core",
  "@vue/compiler-sfc",
  "vue-router",
  "vue-router/auto-routes",
  "unplugin-vue-router/client",
  "@nuxt/schema",
  "nuxt"
]

`includeWorkspace`

Nuxt プロジェクトに親ワークスペースを含めます。主にテーマやモジュールの作成者に役立ちます。

型: boolean
デフォルト: false

`shim`

*.vue シムを生成します。

代わりに公式の Vue 拡張機能にコンポーネントの正確な型を生成させることをお勧めします。ESLint などの .vue ファイルの型を理解できない他のライブラリを使用している場合は、これを true に設定することを検討してください。

型: boolean
デフォルト: false

`strict`

TypeScript には、プログラムの安全性と分析を向上させるための特定のチェックがあります。コードベースを TypeScript に変換したら、これらのチェックを有効にして安全性を高めることができます。詳細はこちら

型: boolean
デフォルト: true

`tsConfig`

このオプションを使用して、生成された TypeScript 設定 (.nuxt/tsconfig.app.json, .nuxt/tsconfig.server.json など) を拡張できます。

`typeCheck`

ビルド時の型チェックを有効にします。

true に設定すると、開発中に型チェックが行われます。これをビルド時の型チェックに限定するには、build に設定します。typescript と vue-tsc を開発依存関係としてインストールする必要があります。

型: boolean
デフォルト: false

参照: Nuxt TypeScript ドキュメント

unhead

unhead nuxt モジュールを設定するためのオブジェクト。

`legacy`

unhead モジュールのレガシー互換モードを有効にします。これにより、以下の変更が適用されます: - Capo.js のソートを無効化 - DeprecationsPlugin を追加: hid, vmid, children, body をサポート - PromisesPlugin を追加: 入力としてのプロミスをサポート

型: boolean
デフォルト: false

参照: unhead 移行ドキュメント

例:

export default defineNuxtConfig({
 unhead: {
  legacy: true
})

`renderSSRHeadOptions`

出力をカスタマイズするために renderSSRHead に渡されるオブジェクト。

型: object
デフォルト

{
  "omitLineBreaks": false
}

例:

export default defineNuxtConfig({
 unhead: {
  renderSSRHeadOptions: {
   omitLineBreaks: true
  }
})

vite

Vite に直接渡される設定。

参照: Vite 設定ドキュメントで詳細を確認してください。Nuxt ではすべての vite オプションがサポートされているわけではありません。

`build`

`assetsDir`

型: string
デフォルト: "_nuxt/"

`emptyOutDir`

型: boolean
デフォルト: false

`cacheDir`

型: string
デフォルト: "/<rootDir>/node_modules/.cache/vite"

`clearScreen`

型: boolean
デフォルト: true

`define`

型: object
デフォルト

{
  "__VUE_PROD_HYDRATION_MISMATCH_DETAILS__": false,
  "process.dev": false,
  "import.meta.dev": false,
  "process.test": false,
  "import.meta.test": false
}

`esbuild`

型: object
デフォルト

{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

`mode`

型: string
デフォルト: "production"

`optimizeDeps`

`esbuildOptions`

型: object
デフォルト

{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

`exclude`

型: array
デフォルト

[
  "vue-demi"
]

`publicDir`

`resolve`

`extensions`

型: array
デフォルト

[
  ".mjs",
  ".js",
  ".ts",
  ".jsx",
  ".tsx",
  ".json",
  ".vue"
]

`root`

型: string
デフォルト: "/<srcDir>"

`server`

`fs`

`allow`

型: array
デフォルト

[
  "/<rootDir>/.nuxt",
  "/<srcDir>",
  "/<rootDir>",
  "/<workspaceDir>"
]

`vue`

`features`

`propsDestructure`

型: boolean
デフォルト: true

`isProduction`

型: boolean
デフォルト: true

`script`

`hoistStatic`

`template`

`compilerOptions`

型: object

`transformAssetUrls`

型: object
デフォルト

{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

`vueJsx`

型: object
デフォルト

{
  "isCustomElement": {
    "$schema": {
      "title": "",
      "description": "",
      "tags": []
    }
  }
}

vue

Vue.js 設定

`compilerOptions`

ビルド時に渡される Vue コンパイラのオプション。

参照: Vue ドキュメント

`config`

Vue アプリをグローバルに設定することが可能です。シリアライズ可能なオプションのみを nuxt.config に設定できます。他のオプションは Nuxt プラグインで実行時に設定する必要があります。

参照: Vue アプリ設定ドキュメント

`propsDestructure`

defineProps のリアクティブなデストラクチャリングを有効にします。

型: boolean
デフォルト: true

`runtimeCompiler`

ランタイムバンドルに Vue コンパイラを含めます。

型: boolean
デフォルト: false

`transformAssetUrls`

`image`

型: array
デフォルト

[
  "xlink:href",
  "href"
]

`img`

型: array
デフォルト

[
  "src"
]

`source`

型: array
デフォルト

[
  "src"
]

`use`

型: array
デフォルト

[
  "xlink:href",
  "href"
]

`video`

型: array
デフォルト

[
  "src",
  "poster"
]

watch

watch プロパティを使用すると、変更されたときに Nuxt 開発サーバーを再起動するパターンを定義できます。

これは文字列または正規表現の配列です。文字列は絶対パスまたは srcDir（および任意のレイヤーの srcDir）に対する相対パスである必要があります。正規表現はプロジェクトの srcDir（および任意のレイヤーの srcDir）に対するパスに対して一致します。

型: array

watchers

watchers プロパティを使用すると、nuxt.config 内のウォッチャー設定を上書きできます。

`chokidar`

chokidar に直接渡すオプション。

参照: chokidar

`ignoreInitial`

型: boolean
デフォルト: true

`ignorePermissionErrors`

型: boolean
デフォルト: true

`rewatchOnRawEvents`

受信時にウォッチャーを再起動させるイベントタイプの配列。

`webpack`

webpack に直接渡す watchOptions。

参照: webpack@4 watch options.

`aggregateTimeout`

型: number
デフォルト: 1000

webpack

`aggressiveCodeRemoval`

typeof process、typeof window、typeof document をハードリプレースしてバンドルをツリーシェイクします。

型: boolean
デフォルト: false

`analyze`

Nuxt は webpack-bundle-analyzer を使用してバンドルを視覚化し、最適化方法を提供します。

バンドル分析を有効にするには true に設定するか、オプションを含むオブジェクトを渡します: webpack 用または vite 用.

型: object
デフォルト

{
  "template": "treemap",
  "projectRoot": "/<rootDir>",
  "filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}

例:

analyze: {
  analyzerMode: 'static'
}

`cssSourceMap`

CSS ソースマップサポートを有効にします（デフォルトでは開発中に true です）。

型: boolean
デフォルト: false

`devMiddleware`

利用可能なオプションについては webpack-dev-middleware を参照してください。

`stats`

型: string
デフォルト: "none"

`experiments`

webpack experiments を設定します。

`extractCSS`

共通 CSS 抽出を有効にします。

内部的に mini-css-extract-plugin を使用して、CSS は通常コンポーネントごとに別々のファイルに抽出されます。これにより、CSS と JavaScript を別々にキャッシュできます。

型: boolean
デフォルト: true

例:

export default {
  webpack: {
    extractCSS: true,
    // または
    extractCSS: {
      ignoreOrder: true
    }
  }
}

すべての CSS を単一ファイルに抽出したい場合、これには回避策があります。ただし、すべてを単一ファイルに抽出することは推奨されません。複数の CSS ファイルに抽出する方がキャッシュとプリロードの分離に優れています。必要なリソースのみをダウンロードして解決することで、ページのパフォーマンスを向上させることもできます。

例:

export default {
  webpack: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
}

`filenames`

バンドルファイル名をカスタマイズします。

マニフェストの使用についてもう少し理解するには、webpack ドキュメントを参照してください。

注意: 本番環境でハッシュベースでないファイル名を使用する際は注意してください。ほとんどのブラウザはアセットをキャッシュし、最初のロード時に変更を検出しません。

この例では、ファンシーなチャンク名を数値 ID に変更します:

例:

filenames: {
  chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js')
}

`app`

型: function

`chunk`

型: function

`css`

型: function

`font`

型: function

`img`

型: function

`video`

型: function

`friendlyErrors`

FriendlyErrorsWebpackPlugin によって提供されるオーバーレイを無効にするには false に設定します。

型: boolean
デフォルト: true

`hotMiddleware`

利用可能なオプションについては webpack-hot-middleware を参照してください。

`loaders`

Nuxt の統合された webpack ローダーのオプションをカスタマイズします。

`css`

利用可能なオプションについては css-loader を参照してください。

`esModule`

型: boolean
デフォルト: false

`importLoaders`

型: number
デフォルト: 0

`url`

`filter`

型: function

`cssModules`

利用可能なオプションについては css-loader を参照してください。

`esModule`

型: boolean
デフォルト: false

`importLoaders`

型: number
デフォルト: 0

`modules`

`localIdentName`

型: string
デフォルト: "[local]_[hash:base64:5]"

`url`

`filter`

型: function

`esbuild`

型: object
デフォルト

{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

参照: esbuild loader

`file`

参照: file-loader オプション

デフォルト:

{ esModule: false }

`esModule`

型: boolean
デフォルト: false

`limit`

型: number
デフォルト: 1000

`fontUrl`

参照: file-loader オプション

デフォルト:

{ esModule: false }

`esModule`

型: boolean
デフォルト: false

`limit`

型: number
デフォルト: 1000

`imgUrl`

参照: file-loader オプション

デフォルト:

{ esModule: false }

`esModule`

型: boolean
デフォルト: false

`limit`

型: number
デフォルト: 1000

`less`

デフォルト

{
  "sourceMap": false
}

参照: less-loader オプション

`pugPlain`

参照: pug オプション

`sass`

参照: sass-loader オプション

デフォルト:

{
  sassOptions: {
    indentedSyntax: true
  }
}

`sassOptions`

`indentedSyntax`

型: boolean
デフォルト: true

`scss`

デフォルト

{
  "sourceMap": false
}

参照: sass-loader オプション

`stylus`

デフォルト

{
  "sourceMap": false
}

参照: stylus-loader オプション

`vue`

利用可能なオプションについては vue-loader を参照してください。

`compilerOptions`

型: object

`propsDestructure`

型: boolean
デフォルト: true

`transformAssetUrls`

型: object
デフォルト

{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

`vueStyle`

デフォルト

{
  "sourceMap": false
}

`optimization`

webpack optimization を設定します。

`minimize`

すべての最小化を無効にするには、false に設定します。（デフォルトでは開発中に無効です）。

型: boolean
デフォルト: true

`minimizer`

プラグインのカスタマイズされた配列に最小化を設定できます。

`runtimeChunk`

型: string
デフォルト: "single"

`splitChunks`

`automaticNameDelimiter`

型: string
デフォルト: "/"

`cacheGroups`

`chunks`

型: string
デフォルト: "all"

`optimizeCSS`

OptimizeCSSAssets プラグインオプション。

extractCSS が有効な場合、デフォルトで true になります。

型: boolean
デフォルト: false

参照: css-minimizer-webpack-plugin ドキュメント.

`plugins`

webpack プラグインを追加します。

型: array

例:

import webpack from 'webpack'
import { version } from './package.json'
// ...
plugins: [
  new webpack.DefinePlugin({
    'process.VERSION': version
  })
]

`postcss`

PostCSS Loader をカスタマイズします。 postcss-loader オプションと同じオプションです。

`postcssOptions`

`plugins`

型: object
デフォルト

{
  "autoprefixer": {},
  "cssnano": {}
}

`profile`

webpackbar でプロファイラを有効にします。

通常は CLI 引数 --profile によって有効になります。

型: boolean
デフォルト: false

参照: webpackbar.

`serverURLPolyfill`

URL と URLSearchParams を提供するためにロードするポリフィルライブラリ。

デフォルトは 'url' です（パッケージを参照）。

型: string
デフォルト: "url"

`warningIgnoreFilters`

ビルド警告を非表示にするフィルター。

型: array

workspaceDir

アプリケーションのワークスペースディレクトリを定義します。

通常、これはモノレポセットアップで使用されます。Nuxt はワークスペースディレクトリを自動的に検出しようとしますが、ここで上書きすることができます。通常、このオプションを設定する必要はありません。

型: string
デフォルト: "/<workspaceDir>"

※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/4.x/api/nuxt-config