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>
// Uncomment the below
//@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": []
}

例:

export default defineNuxtConfig({
  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>: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`

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

これは、View Transitions の実験的サポートが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"
}

例:

export default defineNuxtConfig({
  analyze: {
    analyzerMode: 'static',
  },
})

`templates`

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

型: array

例:

export default defineNuxtConfig({
  build: {
    templates: [
      {
        src: '~/modules/support/plugin.js', // `src` can be absolute or relative
        dst: 'support.js', // `dst` is relative to project `.nuxt` dir
      },
    ],
  },
})

`transpile`

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

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

型: array

例:

export default defineNuxtConfig({
  build: {
    transpile: [({ isLegacy }) => isLegacy && 'ky'],
  },
})

buildDir

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

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

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

例:

export default defineNuxtConfig({
  buildDir: 'nuxt-build',
})

buildId

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

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

builder

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

Nuxt はクライアントサイドアプリケーションのために複数のビルダーをサポートしています。デフォルトでは Vite が使用されますが、webpack、Rspack に切り替えたり、カスタムビルダー実装を提供したりすることもできます。

型: 'vite' | 'webpack' | 'rspack' | string | { bundle: (nuxt: Nuxt) => Promise<void> }
デフォルト: "@nuxt/vite-builder"

サポートされているビルダーの使用

export default defineNuxtConfig({
  // default - uses @nuxt/vite-builder
  // builder: 'vite',

  // uses @nuxt/webpack-builder
  // builder: 'webpack',

  // uses @nuxt/rspack-builder
  builder: 'rspack',
})

webpack または rspack を使用している場合、プロジェクトに @nuxt/webpack-builder または @nuxt/rspack-builder が明示的にインストールされていることを確認する必要があります。

カスタムビルダーオブジェクトの使用

bundle 関数を持つオブジェクトを渡すことで、カスタムビルダーを提供できます

export default defineNuxtConfig({
  builder: {
    async bundle (nuxt) {
      const entry = await resolvePath(resolve(nuxt.options.appDir, 'entry'))

      // Build client and server bundles
      await buildClient(nuxt, entry)
      if (nuxt.options.ssr) {
        await buildServer(nuxt, entry)
      }

      // ... it's a bit more complicated than that, of course!
    },
  },
})

カスタムビルダーパッケージの作成

カスタムビルダーを別のパッケージとして作成するには、bundle 関数をエクスポートする必要があります。その後、nuxt.config.ts でパッケージ名を指定できます。

export default defineNuxtConfig({
  builder: 'my-custom-builder',
})

compatibilityDate

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

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

components

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

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

型: object
デフォルト

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

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

css

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

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

型: array

例:

export default defineNuxtConfig({
  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

`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
デフォルト: "https://: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

::read-more{to="/docs/4.x/guide/going-further/experimental-features"} Nuxt の実験的機能について詳しく学ぶ。 :

extends

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

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

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

参照:: giget ドキュメント

extensions

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

型: array
デフォルト

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

features

::read-more{to="/docs/4.x/guide/going-further/features#features"} Nuxt のオプトイン機能について詳しく学ぶ。 :

future

::read-more{to="/docs/4.x/guide/going-further/features#features"} 将来の (おそらくメジャー) バージョンでデフォルトになる新しい機能にオプトインする方法について学ぶ。 :

hooks

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

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

例:

import fs from 'node:fs'
import path from 'node:path'

export default defineNuxtConfig({
  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

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

参照:: node-ignore

例:

export default defineNuxtConfig({
  ignoreOptions: {
    ignorecase: false,
  },
})

ignorePrefix

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

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

imports

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

参照:: Nuxt ドキュメント

`dirs`

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

型: array

例:

export default defineNuxtConfig({
  imports: {
  // Auto-import pinia stores defined in `~/stores`
    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 内) を使用して modules 配列内の各アイテムを解決しようとします。その後、~ エイリアスが使用されている場合は、プロジェクトの srcDir から解決されます。

型: array

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

例:

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

modulesDir

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

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

型: array
デフォルト

[
  "/<rootDir>/node_modules"
]

例:

export default defineNuxtConfig({
  modulesDir: ['../../node_modules'],
})

ニトロ

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`

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

例:

export default defineNuxtConfig({
  optimization: {
    treeShake: {
      composables: {
        client: { vue: ['onMounted'] },
        server: { vue: ['onServerPrefetch'] },
      },
    },
  },
})

`client`

型: object
デフォルト

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

`サーバー`

型: object
デフォルト

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

pages

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

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

例:

export default defineNuxtConfig({
  pages: {
    pattern: ['**/*/*.vue', '!**/*.spec.*'],
  },
})

plugins

Nuxt アプリケーションプラグインの配列。

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

型: array

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

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

例:

export default defineNuxtConfig({
  plugins: [
    '~/custom-plugins/foo.client.js', // only in client side
    '~/custom-plugins/bar.server.js', // only in server side
    '~/custom-plugins/baz.js', // both client & server
    { src: '~/custom-plugins/both-sides.js' },
    { src: '~/custom-plugins/client-only.js', mode: 'client' }, // only on client side
    { src: '~/custom-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 config では、JSON シリアライズ可能なオプションのみを渡す必要があります。より詳細な制御が必要な場合は、router.options.ts ファイルを使用できます。

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

`ハッシュモード`

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 defineNuxtConfig({
  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.
    },
  },
})

サーバー

Nuxt のサーバービルダーの設定。

`builder`

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

デフォルトでは、Nuxt はスタンドアロンの Nitro 統合を提供する @nuxt/nitro-server を使用します。このアーキテクチャにより、Nitro を Vite プラグインとして使用するなど、さまざまな Nitro 統合パターンが可能になります (Vite Environment API を使用)。

型: string | { bundle: (nuxt: Nuxt) => Promise<void> }
デフォルト: "@nuxt/nitro-server"

このオプションは内部使用を目的としており、API は確定していません。現在の実装に依存する前に、問題を報告してください。

serverDir

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

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

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

serverHandlers

Nitro サーバーハンドラー。

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

ハンドラー: ハンドラーを定義するファイルへのパス。- ルート: ハンドラーが利用可能なルート。これはrou3の規則に従います。- メソッド: 処理されるべきリクエストの HTTP メソッド。- ミドルウェア: ミドルウェアハンドラーかどうかを指定します。- lazy: ハンドラーを遅延ロードするかどうかを指定します。
型: array

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

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

例:

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

sourcemap

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

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

型: object
デフォルト

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

spaLoadingTemplate

ブール値、または ssr: false でレンダリングされたすべての HTML ページに挿入されるコンテンツを持つ 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 defineNuxtConfig({
  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 テレメトリをご覧ください。

test

アプリが単体テスト中かどうか。

型: boolean
デフォルト: false

theme

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

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

型: string

typescript

Nuxt の TypeScript 統合の設定。

`builder`

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

デフォルトでは、Nuxt は builder オプション (デフォルトは「vite」) に基づいてこれを推測しますが、ビルダー環境タイプをオフにすることもできます (false を使用)。または「shared」オプションを選択することもできます。「shared」オプションは、複数のビルダーをサポートしたいモジュール作者に推奨されます。

デフォルト: null

`hoist`

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

型: 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 設定ドキュメント詳細については、をご覧ください。ただし、すべての Vite オプションが Nuxt でサポートされているわけではないことに注意してください。

`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": {}
}

`モード`

型: 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>"

`サーバー`

`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 の監視オプション.

`aggregateTimeout`

型: number
デフォルト: 1000

webpack

`aggressiveCodeRemoval`

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

型: boolean
デフォルト: false

`analyze`

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

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

型: object
デフォルト

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

例:

export default defineNuxtConfig({
  webpack: {
    analyze: {
      analyzerMode: 'static',
    },
  },
})

`cssSourceMap`

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

型: boolean
デフォルト: false

`devMiddleware`

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

`stats`

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

`experiments`

webpack 実験を設定しますextractCSS

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

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

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

型: boolean
デフォルト: true

例:

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

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

例:

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

`マニフェストの使用についてもう少し理解するには、`

webpack ドキュメント

をご覧ください。注: 本番環境でハッシュベースではないファイル名を使用する場合は、ほとんどのブラウザがアセットをキャッシュし、初回ロード時に変更を検出しないため、注意が必要です。.

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

chunk

例:

export default defineNuxtConfig({
  webpack: {
    filenames: {
      chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js'),
    },
  },
})

`app`

型: function

`font`

型: function

`css`

型: function

`friendlyErrors`

型: function

`img`

型: function

`video`

型: function

`FriendlyErrorsWebpackPlugin`

が提供するオーバーレイを無効にするには false に設定します。hotMiddleware.

型: boolean
デフォルト: true

`importLoaders`

型: boolean
デフォルト: false

`デフォルト: 0`

型: number
filter

`url`

`cssModules`

型: function

`localIdentName`

参照:esModule利用可能なオプションについては、をご覧ください。

`importLoaders`

型: boolean
デフォルト: false

`デフォルト: 0`

型: number
filter

`modules`

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

型: string
esbuild loader

`url`

`cssModules`

型: function

`esbuild`

型: object
デフォルト

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

参照:: file

`file-loader オプション`

参照:: limit

デフォルト:

{ "esModule": false }

`importLoaders`

型: boolean
デフォルト: false

`fontUrl`

型: number
デフォルト: 1000

`imgUrl`

参照:: limit

デフォルト:

{ "esModule": false }

`importLoaders`

型: boolean
デフォルト: false

`fontUrl`

型: number
デフォルト: 1000

`less`

参照:: limit

デフォルト:

{ "esModule": false }

`importLoaders`

型: boolean
デフォルト: false

`fontUrl`

型: number
デフォルト: 1000

`less-loader オプション`

デフォルト

{
  "sourceMap": false
}

参照:: pugPlain

`pug オプション`

参照:: sass

`sass-loader オプション`

参照:: sassOptions

デフォルト:

{
  "sassOptions": {
    "indentedSyntax": true
  }
}

`indentedSyntax`

`scss`

型: boolean
デフォルト: true

`stylus`

デフォルト

{
  "sourceMap": false
}

参照:: sassOptions

`stylus-loader オプション`

デフォルト

{
  "sourceMap": false
}

参照:: vue-loader

`vue`

参照:vueStyle利用可能なオプションについては、をご覧ください。

`compilerOptions`

型: object

`propsDestructure`

型: boolean
デフォルト: true

`transformAssetUrls`

型: object
デフォルト

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

`webpack 最適化`

デフォルト

{
  "sourceMap": false
}

`optimization`

webpack 実験を設定しますminimize.

`すべてのミニマイザを無効にするには、minimize を false に設定します (開発中はデフォルトで無効になっています)。`

minimizer

型: boolean
デフォルト: true

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

runtimeChunk

`デフォルト: "single"`

型: string
splitChunks

`automaticNameDelimiter`

`cacheGroups`

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

`chunks`

`デフォルト: "all"`

型: string
optimizeCSS

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

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

css-minimizer-webpack-plugin のドキュメント

型: boolean
デフォルト: false

参照:: webpack プラグインを追加します。.

`plugins`

PostCSS ローダーをカスタマイズします。オプションは

型: array

例:

import webpack from 'webpack'
import { version } from './package.json'

export default defineNuxtConfig({
  webpack: {
    plugins: [
      // ...
      new webpack.DefinePlugin({
        'process.VERSION': version,
      }),
    ],
  },
})

`postcss`

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

お役に立ちましたか？

問題を報告またはGitHub でこのページを編集

Import meta

`import.meta` を使用して、コードがどこで実行されているかを理解します。

Hello World

最小限の Nuxt アプリケーションには、`app.vue` と `nuxt.config.js` ファイルのみが必要です。