Nuxt 3 已于 31 July 2026 结束生命周期
此版本将不再接收错误修复或安全补丁。 升级到 Nuxt 4 或获取 HeroDevs 提供的延长支持

Nuxt 配置

了解您可以在 nuxt.config.ts 文件中使用的所有选项。

Maschinelle Übersetzung ·0 % geprüft

此文件由 Nuxt 源代码自动生成。

alias

Du kannst deine DX verbessern, indem du zusätzliche Aliase definierst, um in JavaScript und CSS auf eigene Verzeichnisse zuzugreifen.

  • Typ: object
  • Standard
{
  "~": "/<srcDir>/",
  "@": "/<srcDir>/",
  "~~": "/<rootDir>/",
  "@@": "/<rootDir>/",
  "#shared": "/<rootDir>/shared/",
  "assets": "/<srcDir>/assets/",
  "public": "/<srcDir>/public/",
  "#server": "/<srcDir>/server/",
  "#build": "/<rootDir>/.nuxt/",
  "#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
}
Hinweis: In einem webpack-Kontext (Bildquellen, CSS – aber nicht JavaScript) musst du beim Zugriff auf deinen Alias ~ voranstellen.
Note: These aliases will be automatically added to the generated .nuxt/tsconfig.json so you can get full type support and path auto-complete. In case you need to extend options provided by ./.nuxt/tsconfig.json further, make sure to add them here or within the typescript.tsConfig property in nuxt.config.

Beispiel:

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

Das Verzeichnis, in dem Nuxt die erzeugten Dateien speichert, wenn nuxt analyze ausgeführt wird.

Wenn ein relativer Pfad angegeben wird, ist er relativ zu deinem rootDir.

  • Typ: string
  • Standard: "/<rootDir>/.nuxt/analyze"

app

Konfiguration der Nuxt-App.

baseURL

Der Basispfad deiner Nuxt-Anwendung.

Zum Beispiel:

  • Typ: string
  • Standard: "/"

Beispiel:

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

Beispiel:

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

buildAssetsDir

Der Verzeichnisname für die erzeugten Website-Assets, relativ zu baseURL (oder cdnURL, falls gesetzt). Er wird zur Build-Zeit festgelegt und sollte zur Laufzeit nicht angepasst werden.

  • Typ: string
  • Standard: "/_nuxt/"

cdnURL

Eine absolute URL, von der das öffentliche Verzeichnis ausgeliefert wird (nur in Produktion).

Zum Beispiel:

  • Typ: string
  • Standard: ""

Beispiel:

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

Beispiel:

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

head

Lege die Standardkonfiguration für <head> auf jeder Seite fest.

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

Beispiel:

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' }
    ],
    // bitte beachte, dass sich dieser Bereich voraussichtlich ändern wird
    style: [
      // <style>:root { color: red }</style>
      { textContent: ':root { color: red }' }
    ],
    noscript: [
      // <noscript>JavaScript is required</noscript>
      { textContent: 'JavaScript is required' }
    ]
  }
}

keepalive

Standardwerte für die KeepAlive-Konfiguration zwischen Seiten.

Dies kann auf einer einzelnen Seite mit definePageMeta überschrieben werden. Es sind nur JSON-serialisierbare Werte erlaubt.

  • Typ: boolean
  • Standard: false

Siehe: Vue KeepAlive

layoutTransition

Standardwerte für Layout-Übergänge.

Dies kann auf einer einzelnen Seite mit definePageMeta überschrieben werden. Es sind nur JSON-serialisierbare Werte erlaubt.

  • Typ: boolean
  • Standard: false

Siehe: Vue-Dokumentation zu Transition

pageTransition

Standardwerte für Seitenübergänge.

Dies kann auf einer einzelnen Seite mit definePageMeta überschrieben werden. Es sind nur JSON-serialisierbare Werte erlaubt.

  • Typ: boolean
  • Standard: false

Siehe: Vue-Dokumentation zu Transition

rootAttrs

Passe die ID des Nuxt-Wurzelelements an.

  • Typ: object
  • Standard
{
  "id": "__nuxt"
}

rootId

Passe die ID des Nuxt-Wurzelelements an.

  • Typ: string
  • Standard: "__nuxt"

rootTag

Passe das Tag des Nuxt-Wurzelelements an.

  • Typ: string
  • Standard: "div"

spaLoaderAttrs

Customize Nuxt Nuxt SpaLoader element attributes.

id

  • Typ: string
  • Standard: "__nuxt-loader"

spaLoaderTag

Passe das Tag des Nuxt-SpaLoader-Elements an.

  • Typ: string
  • Standard: "div"

teleportAttrs

Passe die Attribute des Nuxt-Teleport-Elements an.

  • Typ: object
  • Standard
{
  "id": "teleports"
}

teleportId

Passe die ID des Nuxt-Teleport-Elements an.

  • Typ: string
  • Standard: "teleports"

teleportTag

Passe das Tag des Nuxt-Teleport-Elements an.

  • Typ: string
  • Standard: "div"

viewTransition

Standardwerte für View Transitions.

Dies hat nur eine Wirkung, wenn die experimentelle Unterstützung für View Transitions in deiner nuxt.config-Datei aktiviert ist. Dies kann auf einer einzelnen Seite mit definePageMeta überschrieben werden.

  • Typ: boolean
  • Standard: false

Siehe: Dokumentation zur Nuxt View Transition API

appConfig

Zusätzliche App-Konfiguration

Für die programmatische Verwendung und Typunterstützung kannst du die App-Konfiguration direkt über diese Option angeben. Sie wird mit der Datei app.config als Standardwert zusammengeführt.

nuxt

appId

Bei Projekten mit mehreren Apps die eindeutige ID der Nuxt-Anwendung.

Der Standardwert ist nuxt-app.

  • Typ: string
  • Standard: "nuxt-app"

build

Gemeinsame Build-Konfiguration.

analyze

Nuxt ermöglicht es, deine Bundles zu visualisieren und zu sehen, wie du sie optimieren kannst.

Setze den Wert auf true, um die Bundle-Analyse zu aktivieren, oder übergib ein Objekt mit Optionen: für webpack oder für Vite.

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

Beispiel:

analyze: {
  analyzerMode: 'static'
}

templates

Es wird empfohlen, stattdessen addTemplate aus @nuxt/kit zu verwenden.

  • Typ: array

Beispiel:

templates: [
  {
    src: '~/modules/support/plugin.js', // `src` kann absolut oder relativ sein
    dst: 'support.js', // `dst` ist relativ zum Verzeichnis `.nuxt` des Projekts
  }
]

transpile

Wenn du bestimmte Abhängigkeiten mit Babel transpilieren möchtest, kannst du sie hier hinzufügen. Jedes Element in transpile kann ein Paketname, eine Funktion, ein String oder ein regulärer Ausdruck sein, der zum Dateinamen der Abhängigkeit passt.

You can also use a function to conditionally transpile. The function will receive an object ({ isDev, isServer, isClient, isModern, isLegacy }).

  • Typ: array

Beispiel:

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

buildDir

Lege das Verzeichnis fest, in dem deine erzeugten Nuxt-Dateien abgelegt werden.

Viele Tools gehen davon aus, dass .nuxt ein verstecktes Verzeichnis ist (weil es mit einem . beginnt). Falls das ein Problem darstellt, kannst du es mit dieser Option verhindern.

  • Typ: string
  • Standard: "/<rootDir>/.nuxt"

Beispiel:

export default {
  buildDir: 'nuxt-build'
}

buildId

Ein eindeutiger Bezeichner für den Build. Er kann den Hash des aktuellen Projektzustands enthalten.

  • Typ: string
  • Standard: "cf819bfb-dece-40e8-ad97-a4091ee7fe95"

builder

Der Builder, der zum Bündeln des Vue-Teils deiner Anwendung verwendet wird.

  • Typ: string
  • Standard: "@nuxt/vite-builder"

compatibilityDate

Lege ein Kompatibilitätsdatum für deine App fest.

Es steuert das Verhalten von Presets in Nitro, Nuxt Image und anderen Modulen, die ihr Verhalten ändern können, ohne dass sich die Hauptversion erhöht. Wir planen, das Tooling rund um diese Funktion in Zukunft zu verbessern.

components

Konfiguriere die automatische Registrierung von Nuxt-Komponenten.

Alle Komponenten in den hier konfigurierten Verzeichnissen kannst du in deinen Seiten, Layouts (und anderen Komponenten) verwenden, ohne sie explizit importieren zu müssen.

  • Typ: object
  • Standard
{
  "dirs": [
    {
      "path": "~/components/global",
      "global": true
    },
    "~/components"
  ]
}

Siehe: components/-Verzeichnis in der Dokumentation

css

Du kannst die CSS-Dateien, -Module und -Bibliotheken festlegen, die global gelten sollen (d. h. in jeder Seite eingebunden werden).

Nuxt erkennt den Dateityp automatisch anhand der Dateiendung und verwendet den passenden Präprozessor. Wenn du Präprozessoren verwenden möchtest, musst du den erforderlichen Loader trotzdem installieren.

  • Typ: array

Beispiel:

css: [
  // Ein Node.js-Modul direkt laden (hier eine Sass-Datei).
  'bulma',
  // CSS-Datei im Projekt
  '~/assets/css/main.css',
  // SCSS-Datei im Projekt
  '~/assets/css/main.scss'
]

debug

Auf true setzen, um den Debug-Modus zu aktivieren.

Derzeit gibt Nuxt auf dem Server die Namen und Laufzeiten der Hooks aus und protokolliert im Browser zusätzlich die Hook-Argumente. Du kannst hier auch ein Objekt angeben, um bestimmte Debug-Optionen zu aktivieren.

  • Typ: boolean
  • Standard: false

dev

Gibt an, ob Nuxt im Entwicklungsmodus läuft.

Normalerweise musst du diese Option nicht setzen.

  • Typ: boolean
  • Standard: false

devServer

cors

CORS-Optionen für den Entwicklungsserver festlegen

origin

  • Typ: array
  • Standard
[
  {}
]

host

Host, auf dem der Entwicklungsserver lauscht

https

Gibt an, ob HTTPS aktiviert werden soll.

  • Typ: boolean
  • Standard: false

Beispiel:

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

loadingTemplate

Vorlage für die Anzeige eines Ladebildschirms

  • Typ: function

port

Port, auf dem der Entwicklungsserver lauscht

  • Typ: number
  • Standard: 3000

url

URL, unter der der Entwicklungsserver erreichbar ist.

Diese Option solltest du nicht direkt setzen, da der Entwicklungsserver sie immer mit der vollständigen URL überschreibt (für Module und die interne Verwendung).

  • Typ: string
  • Standard: "http://localhost:3000"

devServerHandlers

Server-Handler von Nitro, die nur in der Entwicklung verwendet werden.

  • Typ: array

Siehe: Dokumentation zu Nitro-Server-Routen

devtools

Aktiviert Nuxt DevTools für die Entwicklung.

Inkompatible Änderungen an den DevTools spiegeln sich möglicherweise nicht in der Version von Nuxt wider.

Siehe: Nuxt DevTools für weitere Informationen.

dir

Passe die von Nuxt verwendete Standardverzeichnisstruktur an.

Am besten bleibst du bei den Standardwerten, sofern keine Änderung nötig ist.

app

  • Typ: string
  • Standard: "app"

assets

Das assets-Verzeichnis (in deinem Build als ~assets verfügbar).

  • Typ: string
  • Standard: "assets"

layouts

Das layouts-Verzeichnis. Jede Datei darin wird automatisch als Nuxt-Layout registriert.

  • Typ: string
  • Standard: "layouts"

middleware

Das middleware-Verzeichnis. Jede Datei darin wird automatisch als Nuxt-Middleware registriert.

  • Typ: string
  • Standard: "middleware"

modules

Das modules-Verzeichnis. Jede Datei darin wird automatisch als Nuxt-Modul registriert.

  • Typ: string
  • Standard: "modules"

pages

Das Verzeichnis, das verarbeitet wird, um die Seitenrouten deiner Anwendung automatisch zu generieren.

  • Typ: string
  • Standard: "pages"

plugins

Das plugins-Verzeichnis. Jede Datei darin wird automatisch als Nuxt-Plugin registriert.

  • Typ: string
  • Standard: "plugins"

public

Das Verzeichnis mit deinen statischen Dateien. Diese sind direkt über den Nuxt-Server erreichbar und werden beim Generieren deiner App in deinen Ordner dist kopiert.

  • Typ: string
  • Standard: "public"

shared

Das Shared-Verzeichnis. Dieses Verzeichnis wird von der App und dem Server gemeinsam genutzt.

  • Typ: string
  • Standard: "shared"

static

  • Typ: string
  • Standard: "public"

esbuild

options

Configure shared esbuild options used within Nuxt and passed to other builders, such as Vite or Webpack.

jsxFactory

  • Typ: string
  • Standard: "h"

jsxFragment

  • Typ: string
  • Standard: "Fragment"

target

  • Typ: string
  • Standard: "esnext"

tsconfigRaw

  • Typ: object

experimental

alwaysRunFetchOnKeyChange

Legt fest, ob useFetch ausgeführt wird, wenn sich der Schlüssel ändert, auch wenn es auf immediate: false gesetzt ist und noch nicht ausgelöst wurde.

useFetch und useAsyncData werden bei einer Änderung des Schlüssels immer ausgeführt, wenn immediate: true gilt oder wenn sie bereits ausgelöst wurden.

  • Typ: boolean
  • Standard: true

appManifest

Verwende App-Manifeste, um Route-Rules auch auf der Client-Seite zu berücksichtigen.

  • Typ: boolean
  • Standard: true

asyncContext

Enable native async context to be accessible for nested composables

  • Typ: boolean
  • Standard: false

See: Nuxt PR #20918

asyncEntry

Set to true to generate an async entry point for the Vue bundle (for module federation support).

  • Typ: boolean
  • Standard: false

browserDevtoolsTiming

Enable timings for Nuxt application hooks in the performance panel of Chromium-based browsers.

This feature adds performance markers for Nuxt hooks, allowing you to track their execution time in the browser's Performance tab. This is particularly useful for debugging performance issues.

  • Typ: boolean
  • Standard: false

Beispiel:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // Enable performance markers for Nuxt hooks in browser devtools
    browserDevtoolsTiming: true
  }
})

See: PR #29922

See: Chrome DevTools Performance API

buildCache

Cache Nuxt/Nitro build artifacts based on a hash of the configuration and source files.

Das funktioniert nur für Quelldateien innerhalb von srcDir und serverDir für die Vue-/Nitro-Teile deiner App.

  • Typ: boolean
  • Standard: false

checkOutdatedBuildInterval

Legt das Zeitintervall (in ms) fest, in dem nach neuen Builds gesucht wird. Deaktiviert, wenn experimental.appManifest den Wert false hat.

Auf false setzen, um die Funktion zu deaktivieren.

  • Typ: number
  • Standard: 3600000

chromeDevtoolsProjectSettings

Enable integration with Chrome DevTools Workspaces for Nuxt projects.

  • Typ: boolean
  • Standard: true

See: Chrome DevTools Project Settings

clientFallback

Whether to enable the experimental <NuxtClientFallback> component for rendering content on the client if there's an error in SSR.

  • Typ: boolean
  • Standard: false

clientNodeCompat

Automatically polyfill Node.js imports in the client build using unenv.

  • Typ: boolean
  • Standard: false

See: unenv

compileTemplate

Whether to use lodash.template to compile Nuxt templates.

This flag will be removed with the release of v4 and exists only for advance testing within Nuxt v3.12+ or in the nightly release channel.

  • Typ: boolean
  • Standard: true

componentIslands

Experimental component islands support with <NuxtIsland> and .island.vue files.

By default it is set to 'auto', which means it will be enabled only when there are islands, server components or server pages in your app.

  • Typ: string
  • Standard: "auto"

configSchema

Config schema support

  • Typ: boolean
  • Standard: true

See: Nuxt Issue #15592

cookieStore

Aktiviert die Unterstützung für CookieStore, um auf Cookie-Änderungen zu lauschen (sofern der Browser dies unterstützt) und die Ref-Werte von useCookie zu aktualisieren.

  • Typ: boolean
  • Standard: true

See: CookieStore

crossOriginPrefetch

Enable cross-origin prefetch using the Speculation Rules API.

  • Typ: boolean
  • Standard: false

debugModuleMutation

Record mutations to nuxt.options in module context, helping to debug configuration changes made by modules during the Nuxt initialization phase.

When enabled, Nuxt will track which modules modify configuration options, making it easier to trace unexpected configuration changes.

  • Typ: boolean
  • Standard: false

Beispiel:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // Enable tracking of config mutations by modules
    debugModuleMutation: true
  }
})

See: PR #30555

decorators

Enable to use experimental decorators in Nuxt and Nitro.

  • Typ: boolean
  • Standard: false

Siehe: https://github.com/tc39/proposal-decorators

defaults

Hiermit lassen sich die Standardoptionen für zentrale Nuxt-Komponenten und Composables festlegen.

Diese Optionen werden voraussichtlich künftig an andere Stellen verschoben, etwa in app.config oder in das Verzeichnis app/.

nuxtLink

componentName
  • Typ: string
  • Standard: "NuxtLink"
prefetch
  • Typ: boolean
  • Standard: true
prefetchOn
visibility
  • Typ: boolean
  • Standard: true

useAsyncData

Options that apply to useAsyncData (and also therefore useFetch)

deep
  • Typ: boolean
  • Standard: true
errorValue
  • Typ: string
  • Standard: "null"
value
  • Typ: string
  • Standard: "null"

useFetch

emitRouteChunkError

Emit app:chunkError hook when there is an error loading vite/webpack chunks.

By default, Nuxt will also perform a reload of the new route when a chunk fails to load when navigating to a new route (automatic). Setting automatic-immediate will lead Nuxt to perform a reload of the current route right when a chunk fails to load (instead of waiting for navigation). You can disable automatic handling by setting this to false, or handle chunk errors manually by setting it to manual.

  • Typ: string
  • Standard: "automatic"

See: Nuxt PR #19038

enforceModuleCompatibility

Whether Nuxt should stop if a Nuxt module is incompatible.

  • Typ: boolean
  • Standard: false

entryImportMap

  • Typ: boolean
  • Standard: true

externalVue

Externalize vue, @vue/* and vue-router when building.

  • Typ: boolean
  • Standard: true

See: Nuxt Issue #13632

extraPageMetaExtractionKeys

Configure additional keys to extract from the page metadata when using scanPageMeta.

This allows modules to access additional metadata from the page metadata. It's recommended to augment the NuxtPage types with your keys.

  • Typ: array

extractAsyncDataHandlers

  • Typ: boolean
  • Standard: false

granularCachedData

Whether to call and use the result from getCachedData on manual refresh for useAsyncData and useFetch.

  • Typ: boolean
  • Standard: false

headNext

Use new experimental head optimisations:

  • Add the capo.js head plugin in order to render tags in of the head in a more performant way. - Uses the hash hydration plugin to reduce initial hydration
  • Typ: boolean
  • Standard: true

See: Nuxt Discussion #22632

inlineRouteRules

Allow defining routeRules directly within your ~/pages directory using defineRouteRules.

Rules are converted (based on the path) and applied for server requests. For example, a rule defined in ~/pages/foo/bar.vue will be applied to /foo/bar requests. A rule in ~/pages/foo/[id].vue will be applied to /foo/** requests. For more control, such as if you are using a custom path or alias set in the page's definePageMeta, you should set routeRules directly within your nuxt.config.

  • Typ: boolean
  • Standard: false

lazyHydration

Enable automatic configuration of hydration strategies for <Lazy> components.

This feature intelligently determines when to hydrate lazy components based on visibility, idle time, or other triggers, improving performance by deferring hydration of components until they're needed.

  • Typ: boolean
  • Standard: true

Beispiel:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    lazyHydration: true // Enable smart hydration strategies for Lazy components
  }
})

// In your Vue components
<template>
  <Lazy>
    <ExpensiveComponent />
  </Lazy>
</template>

See: PR #26468

localLayerAliases

Löst die Aliasse ~, ~~, @ und @@, die sich in Layern befinden, relativ zum jeweiligen Quell- und Wurzelverzeichnis des Layers auf.

  • Typ: boolean
  • Standard: true

navigationRepaint

Wartet vor der Navigation auf einen einzelnen Animation Frame. So hat der Browser die Gelegenheit, neu zu zeichnen und die Interaktion der Nutzenden sichtbar zu bestätigen.

Das kann den INP bei der Navigation auf vorab gerenderten Routen verringern.

  • Typ: boolean
  • Standard: true

nitroAutoImports

  • Typ: boolean
  • Standard: true

noVueServer

Disable vue server renderer endpoint within nitro.

  • Typ: boolean
  • Standard: false

normalizeComponentNames

Ensure that auto-generated Vue component names match the full component name you would use to auto-import the component.

  • Typ: boolean
  • Standard: false

parseErrorData

Legt fest, ob error.data beim Rendern einer Server-Fehlerseite geparst wird.

  • Typ: boolean
  • Standard: false

payloadExtraction

When this option is enabled (by default) payload of pages that are prerendered are extracted

  • Typ: boolean
  • Standard: true

pendingWhenIdle

Für useAsyncData und useFetch: ob pending true sein soll, wenn das Abrufen der Daten noch nicht begonnen hat.

  • Typ: boolean
  • Standard: true

polyfillVueUseHead

Whether or not to add a compatibility layer for modules, plugins or user code relying on the old @vueuse/head API.

This is disabled to reduce the client-side bundle by ~0.5kb.

  • Typ: boolean
  • Standard: false

purgeCachedData

Legt fest, ob die statischen Caches von Nuxt und die asyncData-Caches bei der Routennavigation bereinigt werden.

Nuxt entfernt automatisch zwischengespeicherte Daten aus useAsyncData und nuxtApp.static.data. Das verhindert Speicherlecks und stellt sicher, dass bei Bedarf aktuelle Daten geladen werden. Du kannst dieses Verhalten aber deaktivieren.

  • Typ: boolean
  • Standard: true

Beispiel:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // Disable automatic cache cleanup (default is true)
    purgeCachedData: false
  }
})

See: PR #31379

relativeWatchPaths

Whether to provide relative paths in the builder:watch hook.

This flag will be removed with the release of v4 and exists only for advance testing within Nuxt v3.12+ or in the nightly release channel.

  • Typ: boolean
  • Standard: true

renderJsonPayloads

Render JSON payloads with support for revivifying complex types.

  • Typ: boolean
  • Standard: true

resetAsyncDataToUndefined

Whether clear and clearNuxtData should reset async data to its default value or update it to null/undefined.

  • Typ: boolean
  • Standard: true

respectNoSSRHeader

Allow disabling Nuxt SSR responses by setting the x-nuxt-no-ssr header.

  • Typ: boolean
  • Standard: false

restoreState

Whether to restore Nuxt app state from sessionStorage when reloading the page after a chunk error or manual reloadNuxtApp() call.

To avoid hydration errors, it will be applied only after the Vue app has been mounted, meaning there may be a flicker on initial load. Consider carefully before enabling this as it can cause unexpected behavior, and consider providing explicit keys to useState as auto-generated keys may not match across builds.

  • Typ: boolean
  • Standard: false

runtimeBaseURL

  • Typ: boolean
  • Standard: false

scanPageMeta

Allow exposing some route metadata defined in definePageMeta at build-time to modules (alias, name, path, redirect, props, middleware).

This only works with static or strings/arrays rather than variables or conditional assignment.

  • Typ: boolean
  • Standard: true

See: Nuxt Issues #24770

serverAppConfig

  • Typ: boolean
  • Standard: true

sharedPrerenderData

Automatically share payload data between pages that are prerendered. This can result in a significant performance improvement when prerendering sites that use useAsyncData or useFetch and fetch the same data in different pages.

Beim Aktivieren dieser Funktion ist es besonders wichtig sicherzustellen, dass sich jeder eindeutige Schlüssel deiner Daten immer zu denselben Daten auflösen lässt. Wenn du beispielsweise useAsyncData verwendest, um Daten zu einer bestimmten Seite abzurufen, solltest du einen Schlüssel angeben, der eindeutig zu diesen Daten passt. (useFetch sollte das automatisch für dich erledigen.)

  • Typ: boolean
  • Standard: false

Beispiel:

// Das wäre auf einer dynamischen Seite (z. B. `[slug].vue`) unsicher, weil der Route-Slug einen Unterschied für
// die abgerufenen Daten macht, Nuxt das aber nicht wissen kann, da es sich nicht im Schlüssel widerspiegelt.
const route = useRoute()
const { data } = await useAsyncData(async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})
// Verwende stattdessen einen Schlüssel, der die abgerufenen Daten eindeutig identifiziert.
const { data } = await useAsyncData(route.params.slug, async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})

spaLoadingTemplateLocation

Keep showing the spa-loading-template until suspense:resolve

  • Typ: string
  • Standard: "within"

See: Nuxt Issues #21721

templateImportResolution

Deaktiviert das Auflösen von Importen in Nuxt-Vorlagen ausgehend vom Pfad des Moduls, das die Vorlage hinzugefügt hat.

Standardmäßig versucht Nuxt, Importe in Vorlagen relativ zum Modul aufzulösen, das sie hinzugefügt hat. Wenn du dies auf false setzt, wird dieses Verhalten deaktiviert. Das kann nützlich sein, wenn in bestimmten Umgebungen Auflösungskonflikte auftreten.

  • Typ: boolean
  • Standard: true

Beispiel:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // Disable template import resolution from module path
    templateImportResolution: false
  }
})

See: PR #31175

templateRouteInjection

Standardmäßig wird das Route-Objekt, das vom automatisch importierten Composable useRoute() zurückgegeben wird, mit der aktuell in <NuxtPage> angezeigten Seite synchron gehalten. Das gilt nicht für das exportierte useRoute von vue-router oder für das standardmäßige $route-Objekt, das in deinen Vue-Vorlagen verfügbar ist.

Wenn du diese Option aktivierst, wird ein Mixin eingebunden, das das $route-Vorlagenobjekt mit der von Nuxt verwalteten useRoute() synchron hält.

  • Typ: boolean
  • Standard: true

templateUtils

Whether to provide a legacy templateUtils object (with serialize, importName and importSources) when compiling Nuxt templates.

This flag will be removed with the release of v4 and exists only for advance testing within Nuxt v3.12+ or in the nightly release channel.

  • Typ: boolean
  • Standard: true

treeshakeClientOnly

Tree shakes contents of client-only components from server bundle.

  • Typ: boolean
  • Standard: true

See: Nuxt PR #5750

typedPages

Enable the new experimental typed router using unplugin-vue-router.

  • Typ: boolean
  • Standard: false

viewTransition

Enable View Transition API integration with client-side router.

  • Typ: boolean
  • Standard: false

See: View Transitions API

viteEnvironmentApi

  • Typ: boolean
  • Standard: false

watcher

Legt einen alternativen Watcher fest, der als Überwachungsdienst für Nuxt verwendet wird.

Nuxt uses 'chokidar-granular' if your source directory is the same as your root directory . This will ignore top-level directories (like node_modules and .git) that are excluded from watching. You can set this instead to parcel to use @parcel/watcher, which may improve performance in large projects or on Windows platforms. You can also set this to chokidar to watch all files in your source directory.

  • Typ: string
  • Standard: "chokidar"

Siehe: chokidar

See: @parcel/watcher

writeEarlyHints

Write early hints when using node server.

  • Typ: boolean
  • Standard: false
Note: nginx does not support 103 Early hints in the current version.

extends

Erweitere das Projekt aus mehreren lokalen oder entfernten Quellen.

Der Wert sollte entweder ein String oder ein Array von Strings sein, die auf Quellverzeichnisse oder auf Konfigurationspfade relativ zur aktuellen Konfiguration verweisen. Du kannst github:, gh: gitlab: oder bitbucket: verwenden.

Siehe: c12-Dokumentation zum Erweitern von Konfigurations-Layern

Siehe: giget-Dokumentation

extensions

Die Dateiendungen, die vom Nuxt-Resolver aufgelöst werden sollen.

  • Typ: array
  • Standard
[
  ".js",
  ".jsx",
  ".mjs",
  ".ts",
  ".tsx",
  ".vue"
]

features

Einige Features von Nuxt sind nur auf Opt-in-Basis verfügbar oder lassen sich je nach Bedarf deaktivieren.

devLogs

Streamt Server-Protokolle während der Entwicklung an den Client. Diese Protokolle kannst du im dev:ssr-logs-Hook verarbeiten.

Ist der Wert silent gesetzt, werden die Protokolle nicht in der Browser-Konsole ausgegeben.

  • Typ: boolean
  • Standard: false

inlineStyles

Inline styles when rendering HTML (currently vite only).

Du kannst auch eine Funktion übergeben, die den Pfad einer Vue-Komponente erhält und einen booleschen Wert zurückgibt, der angibt, ob die Styles für diese Komponente inline eingebunden werden sollen.

  • Typ: boolean
  • Standard: true

noScripts

Turn off rendering of Nuxt scripts and JS resource hints. You can also disable scripts more granularly within routeRules.

If set to 'production' or true, JS will be disabled in production mode only.

  • Typ: boolean
  • Standard: false

future

future is for early opting-in to new features that will become default in a future (possibly major) version of the framework.

compatibilityVersion

Enable early access to Nuxt v4 features or flags.

Setting compatibilityVersion to 4 changes defaults throughout your Nuxt configuration, but you can granularly re-enable Nuxt v3 behaviour when testing (see example). Please file issues if so, so that we can address in Nuxt or in the ecosystem.

  • Typ: number
  • Standard: 3

Beispiel:

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

This enables early access to the experimental multi-app support.

  • Typ: boolean
  • Standard: false

See: Nuxt Issue #21635

typescriptBundlerResolution

This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting for frameworks like Nuxt and Vite.

It improves type support when using modern libraries with exports. You can set it to false to use the legacy 'Node' mode, which is the default for TypeScript.

  • Typ: boolean
  • Standard: true

See: TypeScript PR implementing bundler module resolution

generate

exclude

This option is no longer used. Instead, use nitro.prerender.ignore.

  • Typ: array

routes

The routes to generate.

If you are using the crawler, this will be only the starting point for route generation. This is often necessary when using dynamic routes. It is preferred to use nitro.prerender.routes.

  • Typ: array

Beispiel:

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

hooks

Hooks sind Listener für Nuxt-Ereignisse, die üblicherweise in Modulen verwendet werden, aber auch in nuxt.config verfügbar sind.

Intern folgen Hooks einem Namensmuster mit Doppelpunkten (z. B. build:done). Zur einfacheren Konfiguration kannst du sie in nuxt.config auch als hierarchisches Objekt strukturieren (siehe unten).

Beispiel:

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

Anpassbarer als ignorePrefix: Alle Dateien, die den im Array ignore angegebenen Glob-Mustern entsprechen, werden beim Erstellen ignoriert.

  • Typ: array
  • Standard
[
  "**/*.stories.{js,cts,mts,ts,jsx,tsx}",
  "**/*.{spec,test}.{js,cts,mts,ts,jsx,tsx}",
  "**/*.d.{cts,mts,ts}",
  "**/*.d.vue.{cts,mts,ts}",
  "**/.{pnpm-store,vercel,netlify,output,git,cache,data,direnv}",
  "/vendor",
  "**/node-compile-cache",
  "**/test-results",
  "**/*.sock",
  ".nuxt/analyze",
  ".nuxt",
  "**/-*.*"
]

ignoreOptions

Übergib Optionen direkt an node-ignore (das Nuxt zum Ignorieren von Dateien verwendet).

Siehe: node-ignore

Beispiel:

ignoreOptions: {
  ignorecase: false
}

ignorePrefix

Jede Datei in den Verzeichnissen pages/, layouts/, middleware/ und public/ wird im Erstellungsprozess ignoriert, wenn ihr Dateiname mit dem in ignorePrefix angegebenen Präfix beginnt. So soll verhindert werden, dass bestimmte Dateien verarbeitet oder in der erzeugten Anwendung ausgeliefert werden. Standardmäßig ist ignorePrefix auf '-' gesetzt, sodass alle Dateien ignoriert werden, die mit '-' beginnen.

  • Typ: string
  • Standard: "-"

imports

Konfiguriere, wie Nuxt Composables automatisch in deine Anwendung importiert.

Siehe: Nuxt-Dokumentation

dirs

Ein Array benutzerdefinierter Verzeichnisse, die automatisch importiert werden. Beachte, dass diese Option die Standardverzeichnisse (~/composables, ~/utils) nicht überschreibt.

  • Typ: array

Beispiel:

imports: {
  // Pinia-Stores automatisch importieren, die in `~/stores` definiert sind
  dirs: ['stores']
}

global

  • Typ: boolean
  • Standard: false

scan

Legt fest, ob deine Verzeichnisse composables/ und utils/ nach Composables für den automatischen Import durchsucht werden. Von Nuxt oder anderen Modulen registrierte automatische Importe, etwa aus vue oder nuxt, bleiben weiterhin aktiviert.

  • Typ: boolean
  • Standard: true

logLevel

Protokollierungsstufe für Protokolle beim Erstellen.

Defaults to 'silent' when running in CI or when a TTY is not available. This option is then used as 'silent' in Vite and 'none' in Webpack

  • Typ: string
  • Standard: "info"

modules

Module sind Nuxt-Erweiterungen, die dessen Kernfunktionalität erweitern und unzählige Integrationen ermöglichen.

Jedes Modul ist entweder ein String (der auf ein Paket verweisen oder ein Dateipfad sein kann), ein Tupel mit dem Modul als erstem String und den Optionen als zweitem Objekt oder eine Inline-Modulfunktion. Nuxt versucht, jeden Eintrag im Array modules über den Node-require-Pfad (in node_modules) aufzulösen. Wird der Alias ~ verwendet, erfolgt die Auflösung anschließend ausgehend vom Projektverzeichnis srcDir.

  • Typ: array
Hinweis: Module werden nacheinander ausgeführt, daher ist die Reihenfolge wichtig. Zuerst werden die in nuxt.config.ts definierten Module geladen. Danach werden die im Verzeichnis modules/ gefundenen Module ausgeführt, und sie werden in alphabetischer Reihenfolge geladen.

Beispiel:

modules: [
  // Verwendung des Paketnamens
  '@nuxtjs/axios',
  // Relative to your project srcDir
  '~/modules/awesome.js',
  // Optionen übergeben
  ['@nuxtjs/google-analytics', { ua: 'X1234567' }],
  // Inline-Definition
  function () {}
]

modulesDir

Legt die Modulverzeichnisse für die Pfadauflösung fest (z. B. resolveLoading, nodeExternals und postcss von webpack).

Der Konfigurationspfad ist relativ zu options.rootDir (Standard ist das aktuelle Arbeitsverzeichnis). Dieses Feld musst du eventuell setzen, wenn dein Projekt als Mono-Repository im Stil eines Yarn-Workspace organisiert ist.

  • Typ: array
  • Standard
[
  "/<rootDir>/node_modules"
]

Beispiel:

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

nitro

Konfiguration für Nitro.

Siehe: Dokumentation zur Nitro-Konfiguration

routeRules

  • Typ: object

runtimeConfig

  • Typ: object
  • Standard
{
  "public": {},
  "app": {
    "buildId": "cf819bfb-dece-40e8-ad97-a4091ee7fe95",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  },
  "nitro": {
    "envPrefix": "NUXT_"
  }
}

optimization

Konfiguration der Optimierung zur Build-Zeit.

asyncTransforms

Optionen, die direkt an den Transformer von unctx übergeben werden, der den asynchronen Kontext nach await beibehält.

asyncFunctions

  • Typ: array
  • Standard
[
  "defineNuxtPlugin",
  "defineNuxtRouteMiddleware"
]

objectDefinitions

defineNuxtComponent
  • Typ: array
  • Standard
[
  "asyncData",
  "setup"
]
defineNuxtPlugin
  • Typ: array
  • Standard
[
  "setup"
]
definePageMeta
  • Typ: array
  • Standard
[
  "middleware",
  "validate"
]

keyedComposables

Funktionen, für die ein Schlüssel eingefügt wird.

As long as the number of arguments passed to the function is less than argumentLength, an additional magic string will be injected that can be used to deduplicate requests between server and client. You will need to take steps to handle this additional key. The key will be unique based on the location of the function being invoked within the file.

  • Typ: array
  • Standard
[
  {
    "name": "callOnce",
    "argumentLength": 3,
    "source": "#app/composables/once"
  },
  {
    "name": "defineNuxtComponent",
    "argumentLength": 2,
    "source": "#app/composables/component"
  },
  {
    "name": "useState",
    "argumentLength": 2,
    "source": "#app/composables/state"
  },
  {
    "name": "useFetch",
    "argumentLength": 3,
    "source": "#app/composables/fetch"
  },
  {
    "name": "useAsyncData",
    "argumentLength": 3,
    "source": "#app/composables/asyncData"
  },
  {
    "name": "useLazyAsyncData",
    "argumentLength": 3,
    "source": "#app/composables/asyncData"
  },
  {
    "name": "useLazyFetch",
    "argumentLength": 3,
    "source": "#app/composables/fetch"
  }
]

treeShake

Code aus bestimmten Builds per Tree Shaking entfernen.

composables

Composables per Tree Shaking aus den Server- oder Client-Builds entfernen.

Beispiel:

treeShake: { client: { myPackage: ['useServerOnlyComposable'] } }
client
  • Typ: object
  • Standard
{
  "vue": [
    "onRenderTracked",
    "onRenderTriggered",
    "onServerPrefetch"
  ],
  "#app": [
    "definePayloadReducer",
    "definePageMeta",
    "onPrehydrate"
  ]
}
server
  • Typ: object
  • Standard
{
  "vue": [
    "onMounted",
    "onUpdated",
    "onUnmounted",
    "onBeforeMount",
    "onBeforeUpdate",
    "onBeforeUnmount",
    "onRenderTracked",
    "onRenderTriggered",
    "onActivated",
    "onDeactivated"
  ],
  "#app": [
    "definePayloadReviver",
    "definePageMeta"
  ]
}

oxc

Configure shared oxc options used within Nuxt and passed where necessary.

transform

Options for oxc-transform

See: Oxc transform docs

options

jsxFactory
  • Typ: string
  • Standard: "h"
jsxFragment
  • Typ: string
  • Standard: "Fragment"
target
  • Typ: string
  • Standard: "esnext"

pages

Legt fest, ob die vue-router-Integration in Nuxt 3 verwendet wird. Wenn du keinen Wert angibst, wird sie aktiviert, sobald in deinem Quellverzeichnis ein Verzeichnis pages/ existiert.

Zusätzlich kannst du ein Glob-Muster oder ein Array von Mustern angeben, um nur bestimmte Dateien nach Seiten zu durchsuchen.

Beispiel:

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

plugins

Ein Array von Nuxt-App-Plugins.

Jedes Plugin kann ein String sein (ein absoluter oder relativer Pfad zu einer Datei). Endet er auf .client oder .server, wird das Plugin automatisch nur im passenden Kontext geladen. Ein Plugin kann auch ein Objekt mit den Schlüsseln src und mode sein.

  • Typ: array
Hinweis: Plugins werden auch automatisch aus dem Verzeichnis ~/plugins registriert. Diese Plugins müssen nicht in nuxt.config aufgeführt werden, außer du möchtest ihre Reihenfolge anpassen. Alle Plugins werden anhand ihres src-Pfads dedupliziert.

Siehe: plugins/-Verzeichnis in der Dokumentation

Beispiel:

plugins: [
  '~/plugins/foo.client.js', // nur auf der Client-Seite
  '~/plugins/bar.server.js', // nur auf der Server-Seite
  '~/plugins/baz.js', // sowohl Client als auch Server
  { src: '~/plugins/both-sides.js' },
  { src: '~/plugins/client-only.js', mode: 'client' }, // nur auf der Client-Seite
  { src: '~/plugins/server-only.js', mode: 'server' } // nur auf der Server-Seite
]

postcss

order

Eine Strategie zur Sortierung von PostCSS-Plugins.

  • Typ: function

plugins

Optionen zur Konfiguration von PostCSS-Plugins.

Siehe: PostCSS-Dokumentation

autoprefixer

Plugin, das CSS parst und CSS-Regeln mit Vendor-Präfixen versieht.

Siehe: autoprefixer

cssnano

  • Typ: object

Siehe: Konfigurationsoptionen von cssnano

rootDir

Legt das Stammverzeichnis deiner Anwendung fest.

Diese Eigenschaft kann überschrieben werden (z. B. setzt die Ausführung von nuxt ./my-app/ den Wert rootDir auf den absoluten Pfad von ./my-app/ ausgehend vom aktuellen Arbeitsverzeichnis). Normalerweise ist es nicht nötig, diese Option zu konfigurieren.

  • Typ: string
  • Standard: "/<rootDir>"

routeRules

Globale Routenoptionen, die auf passende Server-Routen angewendet werden.

Experimentell: Dies ist eine experimentelle Funktion, und die API kann sich in Zukunft ändern.

Siehe: Dokumentation zu Nitro-Routenregeln

router

options

Zusätzliche Router-Optionen, die an vue-router übergeben werden. Zusätzlich zu den Optionen für vue-router bietet Nuxt weitere Optionen zur Anpassung des Routers (siehe unten).

Note: Only JSON serializable options should be passed by Nuxt config. For more control, you can use app/router.options.ts file.

See: Vue Router documentation.

hashMode

Du kannst den Hash-Verlauf im SPA-Modus aktivieren. In diesem Modus verwendet der Router ein Hash-Zeichen (#) vor der eigentlichen URL, die intern weitergegeben wird. Ist er aktiviert, wird die URL nie an den Server gesendet und SSR wird nicht unterstützt.

  • Typ: boolean
  • Standard: false

Standardwert: false

scrollBehaviorType

Passt das Scrollverhalten für Hash-Links an.

  • Typ: string
  • Standard: "auto"

Standardwert: 'auto'

runtimeConfig

Die Laufzeitkonfiguration ermöglicht es, dynamische Konfiguration und Umgebungsvariablen an den Kontext der Nuxt-App zu übergeben.

Der Wert dieses Objekts ist nur auf dem Server über useRuntimeConfig zugänglich. Er sollte hauptsächlich private Konfiguration enthalten, die im Frontend nicht offengelegt wird. Dazu kann ein Verweis auf deine geheimen API-Tokens gehören. Alles unter public und app wird ebenfalls im Frontend offengelegt. Werte werden zur Laufzeit automatisch durch passende Umgebungsvariablen ersetzt. Wenn du z. B. die Umgebungsvariable NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/ setzt, werden die beiden Werte im folgenden Beispiel überschrieben.

  • Typ: object
  • Standard
{
  "public": {},
  "app": {
    "buildId": "cf819bfb-dece-40e8-ad97-a4091ee7fe95",
    "baseURL": "/",
    "buildAssetsDir": "/_nuxt/",
    "cdnURL": ""
  }
}

Beispiel:

export default {
 runtimeConfig: {
    apiKey: '', // Standardmäßig ein leerer String, wird zur Laufzeit automatisch über process.env.NUXT_API_KEY gesetzt
    public: {
       baseURL: '' // Wird ebenfalls im Frontend offengelegt.
    }
  }
}

server

builder

  • Typ: string
  • Standard: "@nuxt/nitro-server"

serverDir

Legt das Server-Verzeichnis deiner Nuxt-Anwendung fest, in dem Nitro-Routen, Middleware und Plugins liegen.

Wenn ein relativer Pfad angegeben wird, ist er relativ zu deinem rootDir.

  • Typ: string
  • Standard: "/<srcDir>/server"

serverHandlers

Nitro-Server-Handler.

Jeder Handler akzeptiert die folgenden Optionen:

  • handler: Der Pfad zur Datei, die den Handler definiert. - route: Die Route, unter der der Handler verfügbar ist. Sie folgt den Konventionen von rou3. - method: Die HTTP-Methode der Anfragen, die verarbeitet werden sollen. - middleware: Gibt an, ob es sich um einen Middleware-Handler handelt. - lazy: Gibt an, ob der Handler per verzögertem Laden importiert werden soll.
  • Typ: array

Siehe: server/-Verzeichnis in der Dokumentation

Hinweis: Dateien aus server/api, server/middleware und server/routes werden von Nuxt automatisch registriert.

Beispiel:

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

sourcemap

Legt fest, ob und wie Sourcemaps für Server- und/oder Client-Bundles erzeugt werden.

If set to a single boolean, that value applies to both server and client. Additionally, the 'hidden' option is also available for both server and client. Available options for both client and server: - true: Generates sourcemaps and includes source references in the final bundle. - false: Does not generate any sourcemaps. - 'hidden': Generates sourcemaps but does not include references in the final bundle.

  • Typ: object
  • Standard
{
  "server": true,
  "client": false
}

spaLoadingTemplate

Boolean oder ein Pfad zu einer HTML-Datei, deren Inhalt in jede mit ssr: false gerenderte HTML-Seite eingefügt wird.

  • If it is unset, it will use ~/app/spa-loading-template.html file in one of your layers, if it exists. - If it is false, no SPA loading indicator will be loaded. - If true, Nuxt will look for ~/app/spa-loading-template.html file in one of your layers, or a default Nuxt image will be used. Some good sources for spinners are SpinKit or SVG Spinners.
  • Standard: null

Example: ~/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

Legt das Quellverzeichnis deiner Nuxt-Anwendung fest.

Wenn ein relativer Pfad angegeben wird, ist er relativ zu rootDir.

  • Typ: string
  • Standard: "/<srcDir>"

Beispiel:

export default {
  srcDir: 'src/'
}

This would work with the following folder structure:

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

Legt fest, ob das Rendern von HTML aktiviert wird – entweder dynamisch (im Servermodus) oder zur Generierungszeit. Wenn der Wert auf false gesetzt ist, haben generierte Seiten keinen Inhalt.

  • Typ: boolean
  • Standard: true

telemetry

Deaktiviert die Nuxt-Telemetrie manuell.

Siehe: Nuxt Telemetry für weitere Informationen.

test

Gibt an, ob deine App gerade einem Unit-Test unterzogen wird.

  • Typ: boolean
  • Standard: false

theme

Erweitert das Projekt aus einer lokalen oder entfernten Quelle.

Der Wert sollte ein String sein, der auf ein Quellverzeichnis oder einen Konfigurationspfad relativ zur aktuellen Konfiguration verweist. Mit github:, gitlab:, bitbucket: oder https:// kannst du ein entferntes Git-Repository als Basis verwenden.

  • Typ: string

typescript

Konfiguration für die TypeScript-Integration von Nuxt.

builder

Legt fest, welche Builder-Typen für dein Projekt eingebunden werden.

Standardmäßig leitet Nuxt dies aus deiner Option builder ab (Standardwert: 'vite'). Du kannst die Builder-Umgebungstypen aber auch ausschalten (mit false), um dies vollständig selbst zu übernehmen, oder die Option 'shared' wählen. Die Option 'shared' wird für Modulautorinnen und -autoren empfohlen, die mehrere mögliche Builder unterstützen möchten.

  • Standard: null

hoist

Module, für die in compilerOptions.paths tiefe Aliase generiert werden. Unterpfade werden dabei noch nicht unterstützt. Dies kann nötig sein, wenn du Nuxt in einem pnpm-Monorepo mit shamefully-hoist=false verwendest.

  • Typ: array
  • Standard
[
  "@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

Bindet den übergeordneten Workspace in das Nuxt-Projekt ein. Vor allem für Themes und Modulautorinnen und -autoren nützlich.

  • Typ: boolean
  • Standard: false

shim

Generiert einen Shim für *.vue.

Wir empfehlen stattdessen, die offizielle Vue-Erweiterung korrekte Typen für deine Komponenten generieren zu lassen. Beachte, dass du dies auf true setzen solltest, wenn du andere Bibliotheken wie ESLint verwendest, die den Typ von .vue-Dateien nicht verstehen.

  • Typ: boolean
  • Standard: false

strict

TypeScript bringt bestimmte Prüfungen mit, die dir mehr Sicherheit und Analysen für dein Programm bieten. Sobald du deine Codebasis zu TypeScript migriert hast, kannst du diese Prüfungen für mehr Sicherheit aktivieren. Mehr erfahren

  • Typ: boolean
  • Standard: true

tsConfig

You can extend generated .nuxt/tsconfig.json using this option.

typeCheck

Enable build-time type checking.

If set to true, this will type check in development. You can restrict this to build-time type checking by setting it to build. Requires to install typescript and vue-tsc as dev dependencies.

  • Typ: boolean
  • Standard: false

Siehe: Nuxt-TypeScript-Dokumentation

unhead

Ein Objekt, mit dem du das Nuxt-Modul unhead konfigurieren kannst.

legacy

Aktiviert den Legacy-Kompatibilitätsmodus für das Modul unhead. Dadurch ergeben sich folgende Änderungen: – Deaktiviert die Sortierung von Capo.js – Fügt DeprecationsPlugin hinzu: unterstützt hid, vmid, children, body – Fügt PromisesPlugin hinzu: unterstützt Promises als Eingabe

  • Typ: boolean
  • Standard: false

Siehe: Migrationsdokumentation zu unhead

Beispiel:

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

renderSSRHeadOptions

Ein Objekt, das an renderSSRHead übergeben wird, um die Ausgabe anzupassen.

  • Typ: object
  • Standard
{
  "omitLineBreaks": false
}

Beispiel:

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

vite

Konfiguration, die direkt an Vite übergeben wird.

Siehe: Vite-Konfigurationsdokumentation für weitere Informationen. Beachte, dass nicht alle Vite-Optionen in Nuxt unterstützt werden.

build

assetsDir

  • Typ: string
  • Standard: "_nuxt/"

emptyOutDir

  • Typ: boolean
  • Standard: false

cacheDir

  • Typ: string
  • Standard: "/<rootDir>/node_modules/.cache/vite"

clearScreen

  • Typ: boolean
  • Standard: true

define

  • Typ: object
  • Standard
{
  "__VUE_PROD_DEVTOOLS__": false,
  "__VUE_PROD_HYDRATION_MISMATCH_DETAILS__": false,
  "process.dev": false,
  "import.meta.dev": false,
  "process.test": false,
  "import.meta.test": false
}

esbuild

  • Typ: object
  • Standard
{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

mode

  • Typ: string
  • Standard: "production"

optimizeDeps

esbuildOptions

  • Typ: object
  • Standard
{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

exclude

  • Typ: array
  • Standard
[
  "vue-demi"
]

publicDir

  • Typ: boolean
  • Standard: false

resolve

extensions

  • Typ: array
  • Standard
[
  ".mjs",
  ".js",
  ".ts",
  ".jsx",
  ".tsx",
  ".json",
  ".vue"
]

root

  • Typ: string
  • Standard: "/<srcDir>"

server

fs

allow
  • Typ: array
  • Standard
[
  "/<rootDir>/.nuxt",
  "/<srcDir>",
  "/<rootDir>",
  "/<workspaceDir>"
]

vue

features

propsDestructure
  • Typ: boolean
  • Standard: true

isProduction

  • Typ: boolean
  • Standard: true

script

hoistStatic

template

compilerOptions
  • Typ: object
transformAssetUrls
  • Typ: object
  • Standard
{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

vueJsx

  • Typ: object
  • Standard
{
  "isCustomElement": {
    "$schema": {
      "title": "",
      "description": "",
      "tags": []
    }
  },
  "defineComponentName": [
    "defineComponent",
    "defineNuxtComponent"
  ]
}

vue

Vue.js-Konfiguration

compilerOptions

Optionen für den Vue-Compiler, die zur Build-Zeit übergeben werden.

Siehe: Vue-Dokumentation

config

It is possible to pass configure the Vue app globally. Only serializable options may be set in your nuxt.config. All other options should be set at runtime in a Nuxt plugin..

Siehe: Dokumentation zur Vue-App-Konfiguration

propsDestructure

Aktiviert reaktives Destrukturieren für defineProps

  • Typ: boolean
  • Standard: true

runtimeCompiler

Bindet den Vue-Compiler in das Runtime-Bundle ein.

  • Typ: boolean
  • Standard: false

transformAssetUrls

image

  • Typ: array
  • Standard
[
  "xlink:href",
  "href"
]

img

  • Typ: array
  • Standard
[
  "src"
]

source

  • Typ: array
  • Standard
[
  "src"
]

use

  • Typ: array
  • Standard
[
  "xlink:href",
  "href"
]

video

  • Typ: array
  • Standard
[
  "src",
  "poster"
]

watch

Mit der Eigenschaft watch definierst du Muster, bei deren Änderung der Nuxt-Entwicklungsserver neu gestartet wird.

Sie ist ein Array aus Strings oder regulären Ausdrücken. Strings sollten entweder absolute Pfade oder relativ zu srcDir (und dem srcDir aller Layer) sein. Reguläre Ausdrücke werden mit dem Pfad relativ zum srcDir des Projekts (und dem srcDir aller Layer) abgeglichen.

  • Typ: array

watchers

Mit der Eigenschaft watchers kannst du die Watcher-Konfiguration in deiner nuxt.config überschreiben.

chokidar

Optionen, die direkt an chokidar übergeben werden.

Siehe: chokidar

ignoreInitial

  • Typ: boolean
  • Standard: true

ignorePermissionErrors

  • Typ: boolean
  • Standard: true

rewatchOnRawEvents

Ein Array von Ereignistypen, bei deren Empfang der Watcher neu gestartet wird.

webpack

watchOptions, die direkt an webpack übergeben werden.

Siehe: Watch-Optionen von webpack@4.

aggregateTimeout

  • Typ: number
  • Standard: 1000

webpack

aggressiveCodeRemoval

Ersetzt typeof process, typeof window und typeof document fest, um das Bundle per Tree-Shaking zu verkleinern.

  • Typ: boolean
  • Standard: false

analyze

Nuxt uses webpack-bundle-analyzer to visualize your bundles and how to optimize them.

Setze den Wert auf true, um die Bundle-Analyse zu aktivieren, oder übergib ein Objekt mit Optionen: für webpack oder für Vite.

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

Beispiel:

analyze: {
  analyzerMode: 'static'
}

cssSourceMap

Aktiviert die Unterstützung für CSS-Source-Maps (standardmäßig true in der Entwicklung).

  • Typ: boolean
  • Standard: false

devMiddleware

Verfügbare Optionen findest du in webpack-dev-middleware.

stats

  • Typ: string
  • Standard: "none"

experiments

Konfiguriert webpack-Experimente.

extractCSS

Aktiviert die gemeinsame CSS-Extraktion.

Mithilfe von mini-css-extract-plugin wird dein CSS in separate Dateien extrahiert, in der Regel eine pro Komponente. So lassen sich CSS und JavaScript getrennt voneinander cachen.

  • Typ: boolean
  • Standard: true

Beispiel:

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

Beispiel:

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

filenames

Passt die Dateinamen der Bundles an.

Um mehr über die Verwendung von Manifesten zu erfahren, wirf einen Blick in die webpack-Dokumentation.

Hinweis: Sei vorsichtig bei der Verwendung von Dateinamen ohne Hash in der Produktion, da die meisten Browser das Asset cachen und Änderungen beim ersten Laden nicht erkennen.

Beispiel:

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

app

  • Typ: function

chunk

  • Typ: function

css

  • Typ: function

font

  • Typ: function

img

  • Typ: function

video

  • Typ: function

friendlyErrors

Set to false to disable the overlay provided by FriendlyErrorsWebpackPlugin.

  • Typ: boolean
  • Standard: true

hotMiddleware

Verfügbare Optionen findest du in webpack-hot-middleware.

loaders

Passt die Optionen der in Nuxt integrierten webpack-Loader an.

css

Verfügbare Optionen findest du in css-loader.

esModule
  • Typ: boolean
  • Standard: false
importLoaders
  • Typ: number
  • Standard: 0
url
filter
  • Typ: function

cssModules

Verfügbare Optionen findest du in css-loader.

esModule
  • Typ: boolean
  • Standard: false
importLoaders
  • Typ: number
  • Standard: 0
modules
localIdentName
  • Typ: string
  • Standard: "[local]_[hash:base64:5]"
url
filter
  • Typ: function

esbuild

  • Typ: object
  • Standard
{
  "target": "esnext",
  "jsxFactory": "h",
  "jsxFragment": "Fragment",
  "tsconfigRaw": {}
}

Siehe: esbuild-Loader

file

Siehe: file-loader-Optionen

Standard:

{ esModule: false }
esModule
  • Typ: boolean
  • Standard: false
limit
  • Typ: number
  • Standard: 1000

fontUrl

Siehe: file-loader-Optionen

Standard:

{ esModule: false }
esModule
  • Typ: boolean
  • Standard: false
limit
  • Typ: number
  • Standard: 1000

imgUrl

Siehe: file-loader-Optionen

Standard:

{ esModule: false }
esModule
  • Typ: boolean
  • Standard: false
limit
  • Typ: number
  • Standard: 1000

less

  • Standard
{
  "sourceMap": false
}

Siehe: less-loader-Optionen

pugPlain

Siehe: pug-Optionen

sass

Siehe: sass-loader-Optionen

Standard:

{
  sassOptions: {
    indentedSyntax: true
  }
}
sassOptions
indentedSyntax
  • Typ: boolean
  • Standard: true

scss

  • Standard
{
  "sourceMap": false
}

Siehe: sass-loader-Optionen

stylus

  • Standard
{
  "sourceMap": false
}

Siehe: stylus-loader-Optionen

vue

Verfügbare Optionen findest du in vue-loader.

compilerOptions
  • Typ: object
propsDestructure
  • Typ: boolean
  • Standard: true
transformAssetUrls
  • Typ: object
  • Standard
{
  "video": [
    "src",
    "poster"
  ],
  "source": [
    "src"
  ],
  "img": [
    "src"
  ],
  "image": [
    "xlink:href",
    "href"
  ],
  "use": [
    "xlink:href",
    "href"
  ]
}

vueStyle

  • Standard
{
  "sourceMap": false
}

optimization

Konfiguriert die webpack-Optimierung.

minimize

Setze minimize auf false, um alle Minimizer zu deaktivieren. (In der Entwicklung ist dies standardmäßig deaktiviert.)

  • Typ: boolean
  • Standard: true

minimizer

Du kannst minimizer auf ein angepasstes Array von plugins setzen.

runtimeChunk

  • Typ: string
  • Standard: "single"

splitChunks

automaticNameDelimiter
  • Typ: string
  • Standard: "/"
cacheGroups
chunks
  • Typ: string
  • Standard: "all"

optimizeCSS

Optionen des OptimizeCSSAssets-plugins.

Standardmäßig true, wenn extractCSS aktiviert ist.

  • Typ: boolean
  • Standard: false

Siehe: Dokumentation zu css-minimizer-webpack-plugin.

plugins

Fügt webpack-plugins hinzu.

  • Typ: array

Beispiel:

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

postcss

Passt den PostCSS-Loader an. Die Optionen entsprechen denen von postcss-loader-Optionen.

postcssOptions

plugins
  • Typ: object
  • Standard
{
  "autoprefixer": {},
  "cssnano": {}
}

profile

Aktiviert den Profiler in webpackbar.

Er wird normalerweise über das Kommandozeilenargument --profile aktiviert.

  • Typ: boolean
  • Standard: false

Siehe: webpackbar.

serverURLPolyfill

Die Polyfill-Bibliothek, die geladen wird, um URL und URLSearchParams bereitzustellen.

Standardmäßig 'url' (siehe Paket).

  • Typ: string
  • Standard: "url"

warningIgnoreFilters

Filter, um Warnungen beim Erzeugen auszublenden.

  • Typ: array

workspaceDir

Legt das Workspace-Verzeichnis deiner Anwendung fest.

Dies wird häufig in einem Monorepo-Setup verwendet. Nuxt versucht, dein Workspace-Verzeichnis automatisch zu erkennen, aber du kannst es hier überschreiben. Normalerweise ist es nicht nötig, diese Option zu konfigurieren.

  • Typ: string
  • Standard: "/<workspaceDir>"