🐎

Nuxt.jsの設定を全部把握する

2024/06/23に公開

Nuxt

モチベーション＝設定で何ができるのかを知りたかった。

alias

JavaScript および CSS 内のカスタムディレクトリにアクセスするための追加のエイリアスを定義することで、DX を改善できます。

デフォルト：

{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "assets": "/<srcDir>/assets",
  "public": "/<srcDir>/public"
}

analyzeDir

nuxt analyze の実行時に Nuxt が生成されたファイルを保存するディレクトリ。
相対パスが指定されている場合は、rootDir を基準とします。

デフォルト："/<rootDir>/.nuxt/analyze"

app

baseURL

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

Storybookだったりテストコードをモリモリに書くプロジェクトなら嬉しいのかな？
基本は使わなさそう。

デフォルト："/"

buildAssetsDir

構築されたサイトアセットのフォルダー名。baseURL (または設定されている場合、cdnURL) を基準とします。これはビルド時に設定され、実行時にカスタマイズしないでください。

デフォルト："/_nuxt/"

cdnURL

パブリックフォルダーを提供する絶対 URL (本番環境のみ)。

デフォルト：""

head

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

これはすべてのプロジェクトで設定が必要な設定だろう。
なるほどここで設定できるのか。

デフォルト：

{
  "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 シリアル化可能な値のみが許可されます。

デフォルト：false

組み込みコンポーネント<KeepAlive>

layoutTransition

レイアウト遷移のデフォルト値。
これは、個々のページで definePageMeta を使用して上書きできます。JSON シリアル化可能な値のみが許可されます。

デフォルト：false

組み込みコンポーネント<Transition>

pageTransition

ページ遷移のデフォルト値。
これは、個々のページで definePageMeta を使用して上書きできます。JSON シリアル化可能な値のみが許可されます。

デフォルト：false

rootAttrs

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

iframeとかで埋め込むのが前提だったら変更するかも？
この感じだとクラスも付与できるな。

デフォルト：

{
  "id": "__nuxt"
}

rootId

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

デフォルト："__nuxt"

rootTag

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

デフォルト："div"

teleportAttrs

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

組み込みコンポーネント<Teleport>

デフォルト：

{
  "id": "teleports"
}

teleportId

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

デフォルト："teleports"

teleportTag

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

デフォルト："div"

viewTransition

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

appConfig

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

appId

マルチアプリプロジェクトの場合、Nuxt アプリケーションの一意の名前。

デフォルト："nuxt-app"

build

ビルドの設定。
ここまで設定する必要があるのってどんな場合なのかがイメージ湧かない。

analyze

Nuxt を使用すると、バンドルを視覚化して最適化することができます。
バンドル分析を有効にするには true に設定するか、webpack の場合はオプション、vite の場合はオプション付きのオブジェクトを渡します。

デフォルト：

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

templates

Nuxt の設定に基づいてレンダリングされる独自のテンプレートを提供できます。この機能は、モジュールで使用する場合に特に便利です。
テンプレートは lodash/template を使用してレンダリングされます。

transpile

Babel を使用して特定の依存関係をトランスパイルする場合は、ここで追加できます。トランスパイル内の各項目は、パッケージ名、関数、依存関係のファイル名に一致する文字列または正規表現オブジェクトにすることができます。
関数を使用して条件付きでトランスパイルすることもできます。関数はオブジェクト ({ isDev、isServer、isClient、isModern、isLegacy }) を受け取ります。

例：

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

buildDir

ビルドした Nuxt ファイルが配置されるディレクトリを定義します。
多くのツールでは、.nuxt は隠しディレクトリであると想定されています (. で始まるため)。これが問題になる場合は、このオプションを使用してそれを回避できます。

デフォルト："/<rootDir>/.nuxt"

buildId

ビルドに一致する一意の識別子。プロジェクトの現在の状態のハッシュが含まれる場合があります。

デフォルト："fe87672d-b76f-48b4-b663-b898273bd435"

builder

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

デフォルト："fe87672d-b76f-48b4-b663-b898273bd435"

compatibilityDate

アプリの互換性日付を指定します。
これは、メジャーバージョンをアップグレードしなくても動作が変わる可能性がある Nitro、Nuxt Image、その他のモジュールのプリセットの動作を制御するために使用されます。今後、この機能に関するツールを改善する予定です。

components

Nuxt コンポーネントの自動登録を構成します。
ここで構成されたディレクトリ内のコンポーネントは、明示的にインポートしなくても、ページ、レイアウト (およびその他のコンポーネント) 全体で使用できます。

Nuxt.jsはcomponents配下をオートインポートするのはこの設定がデフォルトであるからか～

デフォルト：

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

css

グローバルに設定する CSS ファイル/モジュール/ライブラリを定義できます (すべてのページに含まれる)。
Nuxt は拡張子によってファイルの種類を自動的に推測し、適切なプリプロセッサを使用します。必要なローダーを使用する必要がある場合は、それらをインストールする必要があります。

例：

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 に設定します。
現時点では、サーバー上のフック名とタイミングが出力され、フック引数もブラウザーに記録されます。

デフォルト：false

dev

Nuxt が開発モードで実行されているかどうか。
通常、これを設定する必要はありません。

デフォルト：false

devServer

host

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

https

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

例：

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

loadingTemplate

読み込み画面を表示するテンプレート

開発サーバー立ち上げ中に開くと表示される画面？

port

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

デフォルト：3000

url

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

デフォルト："http://localhost:3000"

devServerHandlers

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

devtools

開発用に Nuxt DevTools を有効にします。
devtools の重大な変更は Nuxt のバージョンに反映されない可能性があります。

dir

Nuxt が使用するデフォルトのディレクトリ構造をカスタマイズします。
必要がない限り、デフォルトのままにしておくことをお勧めします。

app

デフォルト："app"

assets

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

デフォルト："assets"

layouts

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

デフォルト："layouts"

middleware

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

デフォルト："middleware"

modules

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

デフォルト："modules"

pages

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

デフォルト："pages"

plugins

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

デフォルト："plugins"

public

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

デフォルト："public"

static

デフォルト："public"

publicがデフォルトなのか！！

experimental

実験的な機能を有効にするためのフラグを設定している。

extends

複数のローカルまたはリモートソースからプロジェクトを拡張します。
値は、ソースディレクトリまたは現在の構成を基準とした構成パスを指す文字列または文字列の配列である必要があります。github:、gh:、gitlab:、または bitbucket: を使用できます。

デフォルト：null

extensions

Nuxt リゾルバによって解決される必要がある拡張子。

デフォルト：

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

features

Nuxt の一部の機能はオプトインベースで利用可能であり、必要に応じて無効にすることもできます。

devLogs

開発中にサーバーログをクライアントにストリームします。これらのログは dev:ssr-logs フックで処理できます。
silent に設定すると、ログはブラウザーコンソールに出力されません。

デフォルト：false

inlineStyles

HTML をレンダリングするときにスタイルをインライン化します (現在は vite のみ)。
Vue コンポーネントのパスを受け取り、そのコンポーネントのスタイルをインライン化するかどうかを示すブール値を返す関数を渡すこともできます。

デフォルト：true

noScripts

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

デフォルト：false

future

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

compatibilityVersion

Nuxt v4 の機能またはフラグへの早期アクセスを有効にします。
compatibilityVersion を 4 に設定すると、Nuxt 構成全体のデフォルトが変更されますが、テスト時に Nuxt v3 の動作を細かく再度有効にすることができます (例を参照)。その場合は、Nuxt またはエコシステムで対処できるように、問題を報告してください。

（compatibilityVersion ＝　互換性バージョン）

デフォルト：3

multiApp

これにより、実験的なマルチアプリサポートへの早期アクセスが可能になります。

デフォルト：false

typescriptBundlerResolution

これにより、TypeScript の「Bundler」モジュール解決モードが有効になります。これは、Nuxt や Vite などのフレームワークに推奨される設定です。
エクスポートを含む最新のライブラリを使用する場合の型サポートが向上します。これを false に設定すると、TypeScript のデフォルトである従来の「Node」モードを使用できます。

generate

exclude

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

nitro.prerender

routes

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

nitro.prerender

hooks

フックは、通常はモジュールで使用される Nuxt イベントのリスナーですが、nuxt.config でも使用できます。
内部的には、フックはコロンを使用した命名パターンに従います (例: 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 パターンに一致するすべてのファイルはビルド時に無視されます。

デフォルト：

[
  "**/*.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 がファイルを無視するために使用される) に直接渡します。

ignorePrefix

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

デフォルト："-"

imports

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

composables配下のオートインポートの設定らしい。
オートインポートされる条件を参照。

dirs

自動インポートされるカスタムディレクトリの配列。このオプションは、デフォルトのディレクトリ (~/composables、~/utils) を上書きしないことに注意してください。

例：

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

global

デフォルト：false

logLevel

ログを構築するときのログレベル。
CI で実行している場合、または TTY が利用できない場合は、デフォルトで「silent」になります。このオプションは、Vite では「silent」として、Webpack では「none」として使用されます。

デフォルト："info"

modules

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

言わずもがなって感じ。

modulesDir

パス解決用のモジュールディレクトリを設定するために使用されます (たとえば、webpack の resolveLoading、nodeExternals、postcss)。
構成パスは options.rootDir を基準とします (デフォルトは現在の作業ディレクトリ)。プロジェクトが yarn ワークスペーススタイルのモノリポジトリとして構成されている場合は、このフィールドの設定が必要になることがあります。

デフォルト：

[
  "/<rootDir>/node_modules"
]

nitro

Nitro の設定。

Config

routeRules

runtimeConfig

デフォルト：

{
  "public": {},
  "app": {
    "buildId": "fe87672d-b76f-48b4-b663-b898273bd435",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  },
  "nitro": {
    "envPrefix": "NUXT_"
  }
}

optimization

ビルド時間の最適化構成。

asyncTransforms

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

asyncFunctions

デフォルト：

[
  "defineNuxtPlugin",
  "defineNuxtRouteMiddleware"
]

objectDefinitions, defineNuxtComponent

デフォルト：

[
  "asyncData",
  "setup"
]

defineNuxtPlugin

デフォルト：

[
  "setup"
]

definePageMeta

デフォルト：

[
  "middleware",
  "validate"
]

keyedComposables

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

デフォルト：

[
  {
    "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

デフォルト：

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

server

デフォルト：

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

pages

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

plugins

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

例：

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

plugins

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

https://postcss.org/

autoprefixer

https://github.com/postcss/autoprefixer

cssnano

https://cssnano.github.io/cssnano/docs/config-file/#configuration-options

rootDir

アプリケーションのルートディレクトリを定義します。
このプロパティは上書きできます (たとえば、nuxt ./my-app/ を実行すると、rootDir が現在の作業ディレクトリから ./my-app/ の絶対パスに設定されます)。通常、このオプションを構成する必要はありません。

routeRules

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

router

options

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

hashMode

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

デフォルト：false

scrollBehaviorType

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

デフォルト："auto"

runtimeConfig

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

デフォルト：

{
  "public": {},
  "app": {
    "buildId": "fe87672d-b76f-48b4-b663-b898273bd435",
    "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 を基準とします。

デフォルト："/<srcDir>/server"

serverHandlers

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

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

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

例：

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

sourcemap

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

デフォルト：

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

spaLoadingTemplate

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

設定されていない場合は、レイヤーの 1 つに ~/app/spa-loading-template.html ファイルが存在する場合はそれを使用します。 - false の場合、SPA 読み込みインジケーターは読み込まれません。 - true の場合、Nuxt はレイヤーの 1 つで ~/app/spa-loading-template.html ファイルを探すか、デフォルトの Nuxt イメージが使用されます。スピナーの優れたソースとしては、SpinKit や SVG Spinners などがあります。

デフォルト：null

srcDir

Nuxt アプリケーションのソースディレクトリを定義します。
相対パスを指定すると、rootDir を基準とした相対パスになります。

デフォルト："/<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 に設定すると、生成されたページにはコンテンツが含まれません。

デフォルト：true

telemetry

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

Nuxt は、一般的な使用状況に関する匿名のテレメトリデータを収集します。これにより、すべてのユーザーにおける Nuxt 機能の使用状況とカスタマイズを正確に把握できます。
by https://github.com/nuxt/telemetry

test

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

デフォルト：false

theme

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

デフォルト：null

typescript

Nuxt の TypeScript 統合の構成。

builder

プロジェクトに含めるビルダーの種類。
デフォルトでは、Nuxt はビルダーオプション (デフォルトは 'vite') に基づいてこれを推測しますが、ビルダー環境の種類を無効にして (false で) これを完全に自分で処理するか、'shared' オプションを選択することもできます。'shared' オプションは、複数のビルダーをサポートしたいモジュール作成者に推奨されます。

デフォルト：null

hoist

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

デフォルト：

[
  "nitropack",
  "defu",
  "h3",
  "consola",
  "ofetch",
  "@unhead/vue",
  "@nuxt/devtools",
  "vue",
  "@vue/runtime-core",
  "@vue/compiler-sfc",
  "@vue/runtime-dom",
  "vue-router",
  "@nuxt/schema",
  "nuxt"
]

includeWorkspace

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

デフォルト：false

shim

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

デフォルト：false

strict

TypeScript には、プログラムの安全性と分析を強化するための特定のチェックが付属しています。コードベースを TypeScript に変換したら、これらのチェックを有効にして安全性を高めることができます。

デフォルト：true

tsConfig

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

デフォルト：

{
  "compilerOptions": {}
}

typeCheck

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

デフォルト：false

型チェックを有効にする方法はこちら。

unhead

unhead nuxt モジュールを構成できるオブジェクト。

renderSSRHeadOptions

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

詳しい設定方法

デフォルト：

{
  "omitLineBreaks": false
}

例：

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

vite

Vite に直接渡される構成。
詳細については、https://vitejs.dev/config を参照してください。すべての vite オプションが Nuxt でサポートされているわけではないことに注意してください。

build

assetsDir

デフォルト："_nuxt/"

emptyOutDir

デフォルト：false

cacheDir

デフォルト："/<rootDir>/node_modules/.cache/vite"

clearScreen

デフォルト：true

define

デフォルト：

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

esbuild

jsxFactory

デフォルト："h"

jsxFragment

デフォルト："Fragment"

tsconfigRaw

デフォルト："{}"

mode

デフォルト："production"

optimizeDeps

exclude

デフォルト：

[
  "vue-demi"
]

publicDir

デフォルト：false

resolve

extensions

デフォルト：

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

root

デフォルト："/<srcDir>"

server

fs, allow

デフォルト：

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

vue

isProduction

デフォルト：true

script, hoistStatic, propsDestructure

デフォルト：false

template, compilerOptions

transformAssetUrls

デフォルト：

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

vueJsx

vue

Vue.js の設定

compilerOptions

ビルド時に渡される Vue コンパイラのオプション。
https://ja.vuejs.org/api/application#app-config-compileroptions

propsDestructure

Vue 実験的: defineProps のリアクティブ分解を有効にする
デフォルト：false

runtimeCompiler

ランタイムバンドルに Vue コンパイラを含めます。
デフォルト：false

transformAssetUrls

image

デフォルト：

[
  "xlink:href",
  "href"
]

img

デフォルト：

[
  "src"
]

source

デフォルト：

[
  "src"
]

use

デフォルト：

[
  "xlink:href",
  "href"
]

video

デフォルト：

[
  "src",
  "poster"
]

watch

watch プロパティを使用すると、変更時に Nuxt 開発サーバーを再起動するパターンを定義できます。
これは文字列または正規表現の配列です。文字列は絶対パスか、srcDir (および任意のレイヤーの srcDir) に対する相対パスのいずれかである必要があります。正規表現は、プロジェクトの srcDir (および任意のレイヤーの srcDir) に対する相対パスと照合されます。

watchers

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

chokidar

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

ignoreInitial

デフォルト：true

rewatchOnRawEvents

イベントタイプの配列。これを受信すると、ウォッチャーが再起動されます。

webpack

webpack に直接渡す watchOptions。

aggregateTimeout

デフォルト：1000

webpack

workspaceDir

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

デフォルト："/<workspaceDir>"