Nuxt Nation カンファレンス開催!11月12日〜13日、ご参加ください。

Nuxt 設定

nuxt.config.ts ファイルで使用できるすべてのオプションをご覧ください。
このファイルは、Nuxt ソースコードから自動生成されています。

エイリアス

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

  • : object
  • デフォルト
{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "#shared": "/<rootDir>/shared",
  "assets": "/<srcDir>/assets",
  "public": "/<srcDir>/public",
  "#build": "/<rootDir>/.nuxt",
  "#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
}
注記: webpack コンテキスト内(画像ソース、CSS - しかし JavaScript ではない)では、エイリアスにアクセスするには、~ をプレフィックスとして付ける必要があります。
注記: これらのエイリアスは、生成された .nuxt/tsconfig.json に自動的に追加されるため、完全な型サポートとパスオートコンプリートを利用できます。./.nuxt/tsconfig.json で提供されるオプションをさらに拡張する必要がある場合は、ここに追加するか、nuxt.configtypescript.tsConfig プロパティに追加してください。

:

export default {
  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))
  }
}

analyzeDir

nuxt analyze を実行したときに、Nuxt が生成されたファイルを保存するディレクトリです。

相対パスを指定した場合、rootDir を基準とした相対パスになります。

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

app

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

baseURL

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

例えば

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

:

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

:

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

buildAssetsDir

baseURL (または設定されている場合は cdnURL)を基準とした、ビルド済みサイトアセットのフォルダ名。これはビルド時に設定され、ランタイムでカスタマイズすることはできません。

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

cdnURL

public フォルダを提供するための絶対 URL(本番環境のみ)。

例えば

  • : string
  • デフォルト: ""

:

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

:

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

すべてのページで <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' }
    ],
    // please note that this is an area that is likely to change
    style: [
      // <style type="text/css">:root { color: red }</style>
      { children: ':root { color: red }', type: 'text/css' }
    ],
    noscript: [
      // <noscript>JavaScript is required</noscript>
      { children: 'JavaScript is required' }
    ]
  }
}

keepalive

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

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

  • : boolean
  • デフォルト: false

参照: Vue KeepAlive

layoutTransition

レイアウトトランジションのデフォルト値。

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

  • : boolean
  • デフォルト: false

参照: Vue トランジション ドキュメント

pageTransition

ページトランジションのデフォルト値。

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

  • : boolean
  • デフォルト: false

参照: Vue トランジション ドキュメント

rootAttrs

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

  • : object
  • デフォルト
{
  "id": "__nuxt"
}

rootId

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

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

rootTag

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

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

teleportAttrs

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

  • : object
  • デフォルト
{
  "id": "teleports"
}

teleportId

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

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

teleportTag

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

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

viewTransition

ビュートランジションのデフォルト値。

これは、ビュートランジションの実験的サポートが nuxt.config ファイルで有効になっている場合にのみ有効です。個々のページで definePageMeta を使用して上書きできます。

  • : boolean
  • デフォルト: false

参照: Nuxt ビュー トランジション 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 設定に基づいてレンダリングされる独自のテンプレートを提供できます。この機能は、モジュールで使用する場合に特に便利です。

テンプレートは lodash/template を使用してレンダリングされます。

  • : array

:

templates: [
  {
    src: '~/modules/support/plugin.js', // `src` can be absolute or relative
    dst: 'support.js', // `dst` is relative to project `.nuxt` dir
    options: {
      // Options are provided to template as `options` key
      live_chat: false
    }
  }
]

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
  • デフォルト: "e0d1495b-a2d7-4596-9924-13454d891bdb"

builder

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

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

compatibilityDate

アプリの互換性の日付を指定します。

これは、メジャーバージョンを上げることなく動作が変更される可能性のある Nitro、Nuxt Image、その他のモジュールのプリセットの動作を制御するために使用されます。この機能に関するツールを今後改善する予定です。

components

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

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

  • : object
  • デフォルト
{
  "dirs": [
    {
      "path": "~/components/global",
      "global": true
    },
    "~/components"
  ]
}

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

css

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

Nuxtは拡張子からファイルの種類を自動的に推測し、適切なプリプロセッサを使用します。それらを使用する必要がある場合は、必要なローダーをインストールする必要があります。

  • : array

:

css: [
  // Load a Node.js module directly (here it's a Sass file).
  'bulma',
  // CSS file in the project
  '~/assets/css/main.css',
  // SCSS file in the project
  '~/assets/css/main.scss'
]

debug

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

現時点では、サーバー上でフック名とタイミングを出力し、ブラウザでもフック引数をログに記録します。

  • : boolean
  • デフォルト: false

dev

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

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

  • : boolean
  • デフォルト: false

devServer

host

Devサーバーのリスニングホスト

https

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

  • : boolean
  • デフォルト: false

:

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

loadingTemplate

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

  • : function

port

Devサーバーのリスニングポート

  • : number
  • デフォルト: 3000

url

DevサーバーのリスニングURL。

これは、常にDevサーバーによって完全なURLで上書きされるため、直接設定しないでください(モジュールと内部使用のため)。

  • : string
  • デフォルト: "https://127.0.0.1:3000"

devServerHandlers

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

  • : array

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

devtools

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

DevToolsの破壊的変更は、Nuxtのバージョンに反映されない場合があります。

参照: 詳細については、Nuxt DevToolsを参照してください。

dir

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

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

app

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

assets

アセットディレクトリ(ビルドでは~assetsとしてエイリアス化されます)。

  • : string
  • デフォルト: "assets"

layouts

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

  • : string
  • デフォルト: "layouts"

middleware

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

  • : string
  • デフォルト: "middleware"

modules

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

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

pages

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

  • : string
  • デフォルト: "pages"

plugins

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

  • : string
  • デフォルト: "plugins"

public

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

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

shared

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

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

static

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

experimental

appManifest

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

  • : boolean
  • デフォルト: true

asyncContext

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

  • : boolean
  • デフォルト: false

参照: Nuxt PR #20918

asyncEntry

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

  • : boolean
  • デフォルト: false

buildCache

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

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

  • : boolean
  • デフォルト: false

checkOutdatedBuildInterval

新しいビルドを確認する時間間隔(ミリ秒)を設定します。experimental.appManifestfalseの場合、無効になります。

falseに設定して無効にします。

  • : number
  • デフォルト: 3600000

clientFallback

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

  • : boolean
  • デフォルト: false

clientNodeCompat

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

  • : boolean
  • デフォルト: false

参照: unenv

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のサポートを有効にして、Cookieの更新をリスニングし(ブラウザでサポートされている場合)、useCookie refの値を更新します。

  • : boolean
  • デフォルト: true

参照: CookieStore

crossOriginPrefetch

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

  • : boolean
  • デフォルト: false

defaults

これにより、コアNuxtコンポーネントとコンポーザブルのデフォルトオプションを指定できます。

これらのオプションは、将来app.configapp/ディレクトリなど、他の場所に移動される可能性があります。

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

externalVue

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

  • : boolean
  • デフォルト: true

参照: Nuxt Issue #13632

headNext

新しい実験的なヘッド最適化を使用します。

  • capo.jsヘッドプラグインを追加して、ヘッドのタグをよりパフォーマンスの高い方法でレンダリングします。- ハッシュハイドレーションプラグインを使用して、初期ハイドレーションを削減します。
  • : boolean
  • デフォルト: true

参照: Nuxt Discussion #22632

inlineRouteRules

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

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

  • : boolean
  • デフォルト: false

localLayerAliases

レイヤー内の~~~@@@エイリアスを、それぞれのレイヤのソースとルートディレクトリを考慮して解決します。

  • : boolean
  • デフォルト: true

ナビゲーションの前に1つのアニメーションフレームを待機します。これにより、ブラウザが再描画する機会が得られ、ユーザー操作が認識されます。

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

  • : boolean
  • デフォルト: true

noVueServer

Nitro内のVueサーバーレンダラエンドポイントを無効にします。

  • : boolean
  • デフォルト: false

normalizeComponentNames

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

  • : boolean
  • デフォルト: false

payloadExtraction

このオプションを有効にすると(デフォルト)、プリレンダリングされたページのペイロードが抽出されます。

  • : boolean
  • デフォルト: true

polyfillVueUseHead

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

これは、クライアント側のバンドルを約0.5kb削減するために無効になっています。

  • : boolean
  • デフォルト: false

relativeWatchPaths

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

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

  • : boolean
  • デフォルト: true

renderJsonPayloads

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

  • : boolean
  • デフォルト: true

resetAsyncDataToUndefined

clearclearNuxtDataが非同期データをその*デフォルト*値にリセットするのか、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

:

// This would be unsafe in a dynamic page (e.g. `[slug].vue`) because the route slug makes a difference
// to the data fetched, but Nuxt can't know that because it's not reflected in the key.
const route = useRoute()
const { data } = await useAsyncData(async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})
// Instead, you should use a key that uniquely identifies the data fetched.
const { data } = await useAsyncData(route.params.slug, async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})

templateRouteInjection

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

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

  • : boolean
  • デフォルト: true

templateUtils

Nuxtテンプレートのコンパイル時に、レガシーなtemplateUtilsオブジェクト(serializeimportNameimportSourcesを含む)を提供するかどうか。

このフラグは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:を使用できます。

  • デフォルト:null

参照:c12ドキュメントのconfigレイヤーの拡張について

参照:gigetドキュメント

extensions

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

  • : array
  • デフォルト
[
  ".js",
  ".jsx",
  ".mjs",
  ".ts",
  ".tsx",
  ".vue"
]

features

Nuxtの一部の機能は、オプトインベースで利用可能であるか、またはニーズに基づいて無効にできます。

devLogs

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

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

  • : boolean
  • デフォルト: false

inlineStyles

HTMLのレンダリング時にスタイルをインライン化します(現在、viteのみ)。

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

  • : boolean
  • デフォルト: true

noScripts

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

  • : boolean
  • デフォルト: false

future

futureは、フレームワークの将来(メジャーバージョンアップの可能性あり)のデフォルトになる新機能を早期にオプトインするためのものです。

compatibilityVersion

Nuxt v4の機能やフラグへの早期アクセスを有効にします。

compatibilityVersion4に設定すると、Nuxtの設定全体でデフォルトが変更されますが、テスト時にNuxt v3の動作を詳細に再有効化できます(例を参照)。その場合は、問題を報告して、Nuxtまたはエコシステムで対応できるようにしてください。

  • : number
  • デフォルト:3

:

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  // To re-enable _all_ Nuxt v3 behaviour, set the following options:
  srcDir: '.',
  dir: {
    app: 'app'
  },
  experimental: {
    compileTemplate: true,
    templateUtils: true,
    relativeWatchPaths: true,
    resetAsyncDataToUndefined: true,
    defaults: {
      useAsyncData: {
        deep: true
      }
    }
  },
  unhead: {
    renderSSRHeadOptions: {
      omitLineBreaks: false
    }
  }
})

multiApp

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

  • : boolean
  • デフォルト: false

参照:Nuxt Issue #21635

typescriptBundlerResolution

これにより、TypeScriptの「Bundler」モジュール解決モードが有効になります。これは、NuxtやViteなどのフレームワークに推奨される設定です。

exportsを使用する最新のライブラリを使用する場合、型サポートが向上します。falseに設定して、レガシーな「Node」モードを使用することもできます(TypeScriptのデフォルト)。

  • : boolean
  • デフォルト: true

参照:bundlerモジュール解決を実装するTypeScript PR

generate

exclude

このオプションは使用されなくなりました。nitro.prerender.ignoreを使用してください。

  • : array

routes

生成するルート。

クローラーを使用している場合、これはルート生成の出発点にすぎません。これは、動的ルートを使用する場合に必要になることがよくあります。nitro.prerender.routesを使用することをお勧めします。

  • : array

:

routes: ['/users/1', '/users/2', '/users/3']

hooks

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

内部的には、フックはコロンを使用して名前付けパターンに従います(例:build:done)。設定を容易にするために、nuxt.configで階層オブジェクトとして構造化することもできます(下記参照)。

  • デフォルト:null

:

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配列内に指定されたglobパターンに一致するすべてのファイルは、ビルド時に無視されます。

  • : 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}",
  ".nuxt/analyze",
  ".nuxt",
  "**/-*.*"
]

ignoreOptions

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

参照:node-ignore

:

ignoreOptions: {
  ignorecase: false
}

ignorePrefix

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

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

imports

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

参照:Nuxtドキュメント

dirs

自動インポートされるカスタムディレクトリの配列。このオプションは、デフォルトのディレクトリ(~/composables、~/utils)をオーバーライドしません。

  • : array

:

imports: {
  // Auto-import pinia stores defined in `~/stores`
  dirs: ['stores']
}

global

  • : boolean
  • デフォルト: false

logLevel

ログをビルドするときのログレベル。

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

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

modules

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

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

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

:

modules: [
  // Using package name
  '@nuxtjs/axios',
  // Relative to your project srcDir
  '~/modules/awesome.js',
  // Providing options
  ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
  // Inline definition
  function () {}
]

modulesDir

パス解決のためのモジュールディレクトリを設定するために使用されます(例:WebpackのresolveLoadingnodeExternalspostcss)。

設定パスはoptions.rootDirを基準とした相対パスです(デフォルトは現在の作業ディレクトリ)。プロジェクトがYarnワークスペーススタイルのモノリポジトリとして構成されている場合、このフィールドの設定が必要になる場合があります。

  • : array
  • デフォルト
[
  "/<rootDir>/node_modules"
]

:

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

nitro

Nitroの設定。

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

routeRules

  • : object

runtimeConfig

  • : object
  • デフォルト
{
  "public": {},
  "app": {
    "buildId": "e0d1495b-a2d7-4596-9924-13454d891bdb",
    "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": "useId",
    "argumentLength": 1
  },
  {
    "name": "callOnce",
    "argumentLength": 2
  },
  {
    "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統合を使用するかどうか。値を指定しない場合、ソースフォルダーにpages/ディレクトリがある場合は有効になります。

  • : boolean

plugins

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

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

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

参照:plugins/ディレクトリに関するドキュメント

:

plugins: [
  '~/plugins/foo.client.js', // only in client side
  '~/plugins/bar.server.js', // only in server side
  '~/plugins/baz.js', // both client & server
  { src: '~/plugins/both-sides.js' },
  { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
  { src: '~/plugins/server-only.js', mode: 'server' } // only on server side
]

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 でシリアライズ可能なオプションのみです。より詳細な制御が必要な場合は、app/router.options.ts ファイルを使用できます。

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

hashMode

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

  • : boolean
  • デフォルト: false

デフォルト: false

scrollBehaviorType

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

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

デフォルト: 'auto'

runtimeConfig

ランタイム設定により、動的な設定と環境変数をNuxtアプリコンテキストに渡すことができます。

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

  • : object
  • デフォルト
{
  "public": {},
  "app": {
    "buildId": "e0d1495b-a2d7-4596-9924-13454d891bdb",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

:

export default {
 runtimeConfig: {
    apiKey: '', // Default to an empty string, automatically set at runtime using process.env.NUXT_API_KEY
    public: {
       baseURL: '' // Exposed to the frontend as well.
    }
  }
}

serverDir

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

相対パスを指定した場合、rootDir を基準とした相対パスになります。

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

serverHandlers

Nitroサーバーハンドラー。

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

  • handler: ハンドラーを定義するファイルへのパス。 - route: ハンドラーが使用可能なルート。これは rou3 の規約に従います。 - method: 処理する必要があるリクエストのHTTPメソッド。 - middleware: ミドルウェアハンドラーであるかどうかを指定します。 - lazy: ハンドラーのインポートに遅延読み込みを使用するかどうかを指定します。
  • : array

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

注意: server/apiserver/middlewareserver/routes のファイルは、Nuxtによって自動的に登録されます。

:

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

sourcemap

ソースマップを生成するかどうか。

  • : object
  • デフォルト
{
  "server": true,
  "client": false
}

spaLoadingTemplate

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

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

例: ~/app/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
  • デフォルト: "/<srcDir>"

:

export default {
  srcDir: 'src/'
}

これは次のフォルダ構造で動作します

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

ssr

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

  • : boolean
  • デフォルト: true

telemetry

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

参照: 詳細については Nuxt Telemetry を参照してください。

test

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

  • : boolean
  • デフォルト: false

theme

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

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

  • : string
  • デフォルト:null

typescript

NuxtのTypeScript統合の設定。

builder

プロジェクトに含めるビルダーの種類。

デフォルトでは、Nuxtはbuilderオプションに基づいてこれを推測します(デフォルトは'vite')が、ビルダー環境タイプをオフにして(falseで)自分で完全に処理するか、「共有」オプションを選択できます。「共有」オプションは、複数の可能なビルダーをサポートする必要があるモジュール作成者にお勧めします。

  • デフォルト:null

hoist

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

  • : array
  • デフォルト
[
  "nitropack/types",
  "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拡張機能でコンポーネントの正確な型を生成することをお勧めします。 .vue ファイルの型を理解できないESLintなどの他のライブラリを使用している場合は、これをtrueに設定することを検討してください。

  • : boolean
  • デフォルト: false

strict

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

  • : boolean
  • デフォルト: true

tsConfig

このオプションを使用して、生成された.nuxt/tsconfig.jsonを拡張できます。

  • : object
  • デフォルト
{
  "compilerOptions": {}
}

typeCheck

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

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

  • : boolean
  • デフォルト: false

参照: Nuxt TypeScript ドキュメント

unhead

unhead Nuxtモジュールを設定できるオブジェクト。

renderSSRHeadOptions

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

  • : object
  • デフォルト
{
  "omitLineBreaks": false
}

参照: unhead オプションドキュメント

:

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

jsxFactory

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

jsxFragment

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

tsconfigRaw

  • : string
  • デフォルト: "{}"

mode

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

optimizeDeps

exclude

  • : array
  • デフォルト
[
  "vue-demi"
]

publicDir

  • : boolean
  • デフォルト: false

resolve

extensions

  • : array
  • デフォルト
[
  ".mjs",
  ".js",
  ".ts",
  ".jsx",
  ".tsx",
  ".json",
  ".vue"
]

root

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

server

fs

allow
  • : array
  • デフォルト
[
  "/<rootDir>/.nuxt",
  "/<srcDir>",
  "/<rootDir>",
  "/<workspaceDir>",
  "/<rootDir>/node_modules"
]

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

vue

Vue.js 設定

compilerOptions

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

参照: 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

rewatchOnRawEvents

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

webpack

webpackに直接渡すwatchOptions

参照: webpack@4 watch options.

aggregateTimeout

  • : number
  • デフォルト: 1000

webpack

aggressiveCodeRemoval

typeof processtypeof windowtypeof 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は通常コンポーネントごとに1つずつ、個別のファイルに抽出されます。これにより、CSSとJavaScriptを個別にキャッシュできます。

  • : boolean
  • デフォルト: true

:

export default {
  webpack: {
    extractCSS: true,
    // or
    extractCSS: {
      ignoreOrder: true
    }
  }
}

:

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

filenames

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

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

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

:

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

esModule
  • : boolean
  • デフォルト: false
importLoaders
  • : number
  • デフォルト: 0
url
filter
  • : function

cssModules

esModule
  • : boolean
  • デフォルト: false
importLoaders
  • : number
  • デフォルト: 0
modules
localIdentName
  • : string
  • デフォルト: "[local]_[hash:base64:5]"
url
filter
  • : function

esbuild

参照: esbuild ローダー

jsxFactory
  • : string
  • デフォルト: "h"
jsxFragment
  • : string
  • デフォルト: "Fragment"
tsconfigRaw
  • : string
  • デフォルト: "{}"

file

参照: file-loader オプション

デフォルト:

{ esModule: false }
esModule
  • : boolean
  • デフォルト: false

fontUrl

参照: file-loader オプション

デフォルト:

{ esModule: false, limit: 1000  }
esModule
  • : boolean
  • デフォルト: false
limit
  • : number
  • デフォルト: 1000

imgUrl

参照: file-loader オプション

デフォルト:

{ esModule: false, limit: 1000  }
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 を参照してください。

  • : object
  • デフォルト
{
  "transformAssetUrls": {},
  "compilerOptions": {},
  "propsDestructure": {}
}

vueStyle

  • デフォルト
{
  "sourceMap": false
}

optimization

Webpack の最適化 を設定します。

minimize

すべてのミニファイアを無効にするには、false に設定します。(開発環境ではデフォルトで無効になっています)。

  • : boolean
  • デフォルト: true

minimizer

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 ローダーをカスタマイズします。postcss-loader オプション と同じオプションです。

postcssOptions

config
plugins
  • : object
  • デフォルト
{
  "autoprefixer": {},
  "cssnano": {}
}

profile

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

通常、CLI引数 --profile で有効になります。

  • : boolean
  • デフォルト: false

参照: webpackbar.

serverURLPolyfill

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

'url' がデフォルトです(パッケージを参照)。

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

warningIgnoreFilters

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

  • : array

workspaceDir

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

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

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

左矢印と「Import meta」のリンク、右矢印と「Getting Help」のリンク(詳細は省略。元のHTMLのリンクと説明を維持)