nuxt-framework (main)

# addRspackPlugin()

Append rspack plugin to the config.

# addVitePlugin()

Append Vite plugin to the config.

# addWebpackPlugin()

Append webpack plugin to the config.

# extendRspackConfig()

Extend rspack config The fallback function might be called multiple times when applying to both client and server builds.

# extendViteConfig()

Extend Vite config

# extendWebpackConfig()

Extend webpack config The fallback function might be called multiple times when applying to both client and server builds.

# assertNuxtCompatibility()

Check version constraints and throw a detailed error if has any, otherwise returns true

# checkNuxtCompatibility()

Check version constraints and return incompatibility issues as an array

# getNuxtVersion()

Get nuxt version

# hasNuxtCompatibility()

Check version constraints and return true if passed, otherwise returns false

# isNuxt2()

# isNuxt3()

# isNuxtMajorVersion()

Check if current Nuxt instance is of specified major version

# addComponent()

Register a component by its name and filePath.

# addComponentsDir()

Register a directory to be scanned for components and imported only when used.

# nuxtCtx()

Direct access to the Nuxt context - see https://github.com/unjs/unctx.

# tryUseNuxt()

Get access to Nuxt instance. Returns null if Nuxt instance is unavailable.

# useNuxt()

Get access to Nuxt instance. Throws an error if Nuxt instance is unavailable.

# isIgnored()

Return a filter function to filter an array of paths

# resolveGroupSyntax(group)

This function turns string containing groups '/*.{spec,test}.{js,ts}' into an array of strings. For example will '/.{spec,test}.{js,ts}' be resolved to: ['**/.spec.js', '/*.spec.ts', '/.test.js', '**/.test.ts']

Parameters

# requireModule()

# tryRequireModule()

# tryResolveModule()

Resolve a module from a given root path using an algorithm patterned on the upcoming import.meta.resolve. It returns a file URL

# getNuxtModuleVersion()

Get the version of a Nuxt module. Scans installed modules for the version, if it's not found it will attempt to load the module instance and get the version from there.

# hasNuxtModule()

Check if a Nuxt module is installed by name. This will check both the installed modules and the modules to be installed. Note that it cannot detect if a module is going to be installed programmatically by another module.

# hasNuxtModuleCompatibility()

Checks if a Nuxt Module is compatible with a given semver version.

# defineNuxtModule()

Define a Nuxt module, automatically merging defaults with user provided options, installing any hooks that are provided, and calling an optional setup function for full control.

# installModule()

Installs a module on a Nuxt instance.

# addDevServerHandler()

Adds a nitro server handler for development-only

# addPrerenderRoutes()

Adds routes to be prerendered

# addServerHandler()

Adds a nitro server handler

# addServerImports()

Add server imports to be auto-imported by Nitro

# addServerImportsDir()

Add directories to be scanned for auto-imports by Nitro

# addServerPlugin()

Adds a Nitro plugin

# addServerScanDir()

Add directories to be scanned by Nitro. It will check for subdirectories, which will be registered just like the ~/server folder is.

# normalizeHandlerMethod()

normalize handler object

# useNitro()

Access to the Nitro instance Note: You can call useNitro() only after ready hook. Note: Changes to the Nitro instance configuration are not applied.

# addPluginTemplate()

Adds a template and registers as a nuxt plugin.

# normalizePlugin()

Normalize a nuxt plugin object

# createResolver()

Create a relative resolver

# findPath()

Try to resolve first existing file in paths

# resolveAlias()

Resolve path aliases respecting Nuxt alias options

# resolvePath()

Resolve full path to a file or directory respecting Nuxt alias and extensions options If path could not be resolved, normalized input path will be returned

# updateRuntimeConfig()

Update Nuxt runtime configuration.

# useRuntimeConfig()

Access 'resolved' Nuxt runtime configuration, with values updated from environment. This mirrors the runtime behavior of Nitro.

# addServerTemplate()

Adds a virtual file that can be used within the Nuxt Nitro server build.

# addTemplate()

Renders given template using lodash template during build into the project buildDir

# addTypeTemplate()

Renders given types using lodash template during build into the project buildDir and register them as types.

# normalizeTemplate()

Normalize a nuxt template object

# updateTemplates()

Trigger rebuilding Nuxt templates You can pass a filter within the options to selectively regenerate a subset of templates.

# toArray()

# h()

An option to either add or remove trailing slashes in the href. If unset or not matching the valid values append or remove, it will be ignored.

# s()

A class to apply to links that have been prefetched.

# props()

must be an array to handle v-for

# _wrapIf()

private method

Internal utility

# createBuffer()

private method

create buffer retrieved from @vue/server-renderer

# getFragmentHTML(element, withoutSlots)

Retrieve the HTML content from an element Handles <!--[--> Fragment elements

Parameters

# isChangingPage()

Utility used within router guards return true if the route has been changed with a page change during navigation

# vforToArray()

helper for NuxtIsland to generate a correct array for scoped data

# withAsyncContext()

# clearNuxtData()

# key()

Provide a function which returns cached data. An undefined return value will trigger a fetch. Default is key => nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key] which only caches data when payloadExtraction is enabled.

# pending()

# refreshNuxtData()

# useAsyncData(handler, options)

Provides access to data that resolves asynchronously in an SSR-friendly composable. See {@link https://nuxt.com/docs/api/composables/use-async-data}

Parameters

# useAsyncData(handler, options)

Provides access to data that resolves asynchronously in an SSR-friendly composable. See {@link https://nuxt.com/docs/api/composables/use-async-data}

Parameters

# useAsyncData(key, handler, options)

Provides access to data that resolves asynchronously in an SSR-friendly composable. See {@link https://nuxt.com/docs/api/composables/use-async-data}

Parameters

# useAsyncData(key, handler, options)

Provides access to data that resolves asynchronously in an SSR-friendly composable. See {@link https://nuxt.com/docs/api/composables/use-async-data}

Parameters

# useLazyAsyncData()

# useNuxtData()

# reloadNuxtApp()

# MAX_TIMEOUT_DELAY()

The maximum value allowed on a timeout delay. Reference: https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value

# refreshCookie()

# useCookie()

# clearError()

# createError()

# isNuxtError()

# showError()

# useError()

# timeoutLength()

Workaround for timeout not working due to custom abort controller TODO: remove this when upstream issue is resolved

# useFetch(request, opts)

Fetch data from an API endpoint with an SSR-friendly composable. See {@link https://nuxt.com/docs/api/composables/use-fetch}

Parameters

# useFetch(request, opts)

Fetch data from an API endpoint with an SSR-friendly composable. See {@link https://nuxt.com/docs/api/composables/use-fetch}

Parameters

# useLazyFetch()

# useHydration(key, get, set)

Allows full control of the hydration cycle to set and receive data from the server.

Parameters

# duration()

# duration()

You can provide a custom function to customize the progress estimation, which is a function that receives the duration of the loading bar (above) and the elapsed time. It should return a value between 0 and 100.

# hideDelay()

# resetDelay()

# throttle()

# useLoadingIndicator()

composable to handle the loading state of the page

# getAppManifest()

# getRouteRules()

# callOnce(key, fn)

An SSR-friendly utility to call a method once

Parameters

# definePayloadReducer()

This is an experimental function for configuring passing rich data from server -> client.

# definePayloadReviver()

This is an experimental function for configuring passing rich data from server -> client. This function must be called in a Nuxt plugin that is unshifted to the beginning of the Nuxt plugins array.

# getNuxtClientPayload()

# isPrerendered()

# loadPayload()

# preloadPayload()

# prefetchComponents(components)

Prefetch a component or components that have been globally registered.

Parameters

# preloadComponents(components)

Preload a component or components that have been globally registered.

Parameters

# preloadRouteComponents()

# state(state)

A function that determines whether preview mode should be enabled based on the current state.

Parameters

# state(state)

A function that retrieves the current state. The getState function will append returned values to current state, so be careful not to accidentally overwrite important state.

Parameters

# usePreviewMode()

# onNuxtReady()

# useRouteAnnouncer()

composable to handle the route announcer

# abortNavigation()

This will abort navigation within a Nuxt route middleware handler.

# addRouteMiddleware()

# encodeURL()

# isProcessingMiddleware()

# navigateTo()

# onBeforeRouteLeave()

# onBeforeRouteUpdate()

# resolveRouteObject()

# setPageLayout()

# useRoute()

# useRouter()

# onPrehydrate()

onPrehydrate is a composable lifecycle hook that allows you to run a callback on the client immediately before Nuxt hydrates the page. This is an advanced feature. The callback will be stringified and inlined in the HTML so it should not have any external dependencies (such as auto-imports) or refer to variables defined outside the callback. The callback will run before Nuxt runtime initializes so it should not rely on the Nuxt or Vue context.

# prerenderRoutes()

# setResponseStatus()

# setResponseStatus()

# useRequestEvent()

# useRequestFetch()

# useRequestHeader()

# useRequestHeaders()

# useResponseHeader()

# clearNuxtState()

# useState(key, init)

Create a global reactive ref that will be hydrated but not shared across ssr requests

Parameters

# useRequestURL()

# updateAppConfig()

Deep assign the current appConfig with the new one. Will preserve existing properties.

# _appConfig()

# _default()

# _id()

The id of the Nuxt application.

# _middleware()

# _once()

# _payloadReducers()

# _payloadRevivers()

# _route()

# _scope()

# applyPlugin()

# applyPlugins()

# callWithNuxt(nuxt, setup)

Ensures that the setup function passed in has access to the Nuxt instance via useNuxtApp.

Parameters

# createNuxtApp()

# defineAppConfig()

# isNuxtPlugin()

# loggedKeys()

Configure error getter on runtime secret property access that doesn't exist on the client side

# observe()

# pending()

# registerPluginHooks()

# tryUseNuxtApp()

Returns the current Nuxt instance. Returns null if Nuxt instance is unavailable.

# useNuxtApp()

Returns the current Nuxt instance. Throws an error if Nuxt instance is unavailable.

# yncData()

# yncDataPromises()

# Promise()

This gives an opportunity for the browser to repaint, acknowledging user interaction. It can reduce INP when navigating on prerendered routes.

# fullPath()

The whole location including the search and hash.

# h()

Hash of the current location. If present, starts with a #.

# matched()

compatibility type for vue-router

# meta()

Merged meta properties from all of the matched route records.

# name()

Name of the matched record

# params()

Object of decoded params extracted from the path.

# path()

Percentage encoded pathname section of the URL.

# query()

Object representation of the search property of the current location.

# redirectedFrom()

The location we were initially trying to access before ending up on the current location.

# browser()

# client()

# dev()

# nuxtApp()

Available exclusively for defineNuxtComponent. It will not be executed when using defineComponent.

# server()

# test()

# toArray()

# ComponentNamePlugin()

Set the default name of components to their PascalCase name

# extractAttributes()

extract attributes from a node

# findMatchingPatternToRemove()

find the Pattern to remove which the identifier is equal to the name parameter.

# getComponentName(ssrRenderNode)

retrieve the component identifier being used on ssrRender callExpression

Parameters

# isComponentNotCalledInSetup()

detect if the component is called else where ImportDeclarations and VariableDeclarations are ignored return the name of the component if is not called

# isSsrRender()

is the node a call expression ssrRenderComponent()

# removeFromSetupReturn()

find and remove all property with the name parameter from the setup return statement and the returned object

# removePropertyFromObject()

remove a property from an object expression

# removeVariableDeclarator()

remove a variable declaration within the code

# fileName()

In case we have index as filename the component become the parent path

# prefixParts()

Create an array of prefixes base on the prefix config Empty prefix will be an empty array

# scanComponents(dirs, srcDir)

Scan the components inside different components folders and return a unique list of components

Parameters

# compileTemplate()

# checkForExternalConfigurationFiles()

Check for those external configuration files that are not compatible with Nuxt, and warns the user about them.

# composableNames()

# defineDriver(opts)

Parameters

# normalizeFsKey(item)

Parameters

# isJsonRequest()

Nitro internal functions extracted from https://github.com/unjs/nitro/blob/main/src/runtime/internal/utils.ts

# getServerComponentHTML()

remove the root node from the html body

# fileNameParts()

Array of fileName parts split by case, / or -

# route()

Validate whether a given route can validly be rendered with this page. Return true if it is valid, or false if not. If another match can't be found, this will mean a 404. You can also directly return an object with statusCode/statusMessage to respond immediately with an error (other matches will not be checked).

# to()

Set to false to avoid scrolling to top on page navigations

# toArray()

# toArray()

# components()

Configure Nuxt component auto-registration. Any components in the directories configured here can be used throughout your pages, layouts (and other components) without needing to explicitly import them.

# devtools()

Enable Nuxt DevTools for development. Breaking changes for devtools might not reflect on the version of Nuxt.

# dirs()

An array of custom directories that will be auto-imported. Note that this option will not override the default directories (~/composables, ~/utils).

# imports()

Configure how Nuxt auto-imports composables into your application.

# pages()

Whether to use the vue-router integration in Nuxt 3. If you do not provide a value it will be enabled if you have a pages/ directory in your source folder.

# telemetry()

Manually disable nuxt telemetry.

# app()

Nuxt App configuration.

# cdnURL()

An absolute URL to serve the public folder from (production-only). For example:

# compilerOptions()

Options for the Vue compiler that will be passed at build time.

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

# css()

You can define the CSS files/modules/libraries you want to set globally (included in every page). Nuxt will automatically guess the file type by its extension and use the appropriate pre-processor. You will still need to install the required loader if you need to use them.

# eURL()

The base path of your Nuxt application. For example:

# head()

Set default configuration for <head> on every page.

# keepalive()

Default values for KeepAlive configuration between pages. This can be overridden with definePageMeta on an individual page. Only JSON-serializable values are allowed.

# layoutTransition()

Default values for layout transitions. This can be overridden with definePageMeta on an individual page. Only JSON-serializable values are allowed.

# pageTransition()

Default values for page transitions. This can be overridden with definePageMeta on an individual page. Only JSON-serializable values are allowed.

# plugins()

An array of nuxt app plugins. Each plugin can be a string (which can be an absolute or relative path to a file). If it ends with .client or .server then it will be automatically loaded only in the appropriate context. It can also be an object with src and mode keys.

# propsDestructure()

Enable reactive destructure for defineProps

# renderSSRHeadOptions()

An object that will be passed to renderSSRHead to customize the output.

# rootAttrs()

Customize Nuxt root element id.

# rootId()

Customize Nuxt root element id.

# rootTag()

Customize Nuxt root element tag.

# runtimeCompiler()

Include Vue compiler in runtime bundle.

# setsDir()

The folder name for the built site assets, relative to baseURL (or cdnURL if set). This is set at build time and should not be customized at runtime.

# setUrls()

# spaLoadingTemplate()

Boolean or a path to an HTML file with the contents of which will be inserted into any HTML page rendered with ssr: false. - 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.

# teleportAttrs()

Customize Nuxt Teleport element attributes.

# teleportId()

Customize Nuxt Teleport element id.

# teleportTag()

Customize Nuxt root element tag.

# unhead()

An object that allows us to configure the unhead nuxt module.

# viewTransition()

Default values for view transitions. This only has an effect when experimental support for View Transitions is enabled in your nuxt.config file. This can be overridden with definePageMeta on an individual page.

# vue()

Vue.js config

# analyze()

Nuxt allows visualizing your bundles and how to optimize them. Set to true to enable bundle analysis, or pass an object with options: for webpack or for vite.

# asyncTransforms()

Options passed directly to the transformer from unctx that preserves async context after await.

# build()

Shared build configuration.

# builder()

The builder to use for bundling the Vue part of your application.

# composables()

Tree shake composables from the server or client builds.

# keyedComposables()

Functions to inject a key for. 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.

# logLevel()

Log level when building logs. 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

# optimization()

Build time optimization configuration.

# sourcemap()

Whether to generate sourcemaps.

# templates()

You can provide your own templates which will be rendered based on Nuxt configuration. This feature is specially useful for using with modules. Templates are rendered using lodash/template.

# transpile()

If you want to transpile specific dependencies with Babel, you can add them here. Each item in transpile can be a package name, a function, a string or regex object matching the dependency's file name. You can also use a function to conditionally transpile. The function will receive an object ({ isDev, isServer, isClient, isModern, isLegacy }).

# treeShake()

Tree shake code from specific builds.

# alias()

You can improve your DX by defining additional aliases to access custom directories within your JavaScript and CSS.

# analyzeDir()

The directory where Nuxt will store the generated files when running nuxt analyze. If a relative path is specified, it will be relative to your rootDir.

# appConfig()

Additional app configuration For programmatic usage and type support, you can directly provide app config with this option. It will be merged with app.config file as default value.

# appId()

For multi-app projects, the unique id of the Nuxt application. Defaults to nuxt-app.

# assets()

The assets directory (aliased as ~assets in your build).

# buildDir()

Define the directory where your built Nuxt files will be placed. Many tools assume that .nuxt is a hidden directory (because it starts with a .). If that is a problem, you can use this option to prevent that.

# buildId()

A unique identifier matching the build. This may contain the hash of the current state of the project.

# chokidar()

Options to pass directly to chokidar.

# compatibilityDate()

Specify a compatibility date for your app. This is used to control the behavior of presets in Nitro, Nuxt Image and other modules that may change behavior without a major version bump. We plan to improve the tooling around this feature in the future.

# debug()

Set to true to enable debug mode. At the moment, it prints out hook names and timings on the server, and logs hook arguments as well in the browser.

# dev()

Whether Nuxt is running in development mode. Normally, you should not need to set this.

# dir()

Customize default directory structure used by Nuxt. It is better to stick with defaults unless needed.

# extends()

Extend project from multiple local or remote sources. Value should be either a string or array of strings pointing to source directories or config path relative to current config. You can use github:, gh: gitlab: or bitbucket:

# extensions()

The extensions that should be resolved by the Nuxt resolver.

# hooks()

Hooks are listeners to Nuxt events that are typically used in modules, but are also available in nuxt.config. Internally, hooks follow a naming pattern using colons (e.g., build:done). For ease of configuration, you can also structure them as an hierarchical object in nuxt.config (as below).

# ignore()

More customizable than ignorePrefix: all files matching glob patterns specified inside the ignore array will be ignored in building.

# ignoreOptions()

Pass options directly to node-ignore (which is used by Nuxt to ignore files).

# ignorePrefix()

Any file in pages/, layouts/, middleware/, and public/ directories will be ignored during the build process if its filename starts with the prefix specified by ignorePrefix. This is intended to prevent certain files from being processed or served in the built application. By default, the ignorePrefix is set to '-', ignoring any files starting with '-'.

# layouts()

The layouts directory, each file of which will be auto-registered as a Nuxt layout.

# middleware()

The middleware directory, each file of which will be auto-registered as a Nuxt middleware.

# modules()

Modules are Nuxt extensions which can extend its core functionality and add endless integrations. Each module is either a string (which can refer to a package, or be a path to a file), a tuple with the module as first string and the options as a second object, or an inline module function. Nuxt tries to resolve each item in the modules array using node require path (in node_modules) and then will be resolved from project srcDir if ~ alias is used.

# modules()

The modules directory, each file in which will be auto-registered as a Nuxt module.

# modulesDir()

Used to set the modules directories for path resolving (for example, webpack's resolveLoading, nodeExternals and postcss). The configuration path is relative to options.rootDir (default is current working directory). Setting this field may be necessary if your project is organized as a yarn workspace-styled mono-repository.

# pages()

The directory which will be processed to auto-generate your application page routes.

# plugins()

The plugins directory, each file of which will be auto-registered as a Nuxt plugin.

# public()

The directory containing your static files, which will be directly accessible via the Nuxt server and copied across into your dist folder when your app is generated.

# rewatchOnRawEvents()

An array of event types, which, when received, will cause the watcher to restart.

# rootDir()

Define the root directory of your application. This property can be overwritten (for example, running nuxt ./my-app/ will set the rootDir to the absolute path of ./my-app/ from the current/working directory. It is normally not needed to configure this option.

# runtimeConfig()

Runtime config allows passing dynamic config and environment variables to the Nuxt app context. The value of this object is accessible from server only using useRuntimeConfig. It mainly should hold private configuration which is not exposed on the frontend. This could include a reference to your API secret tokens. Anything under public and app will be exposed to the frontend as well. Values are automatically replaced by matching env variables at runtime, e.g. setting an environment variable NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/ would overwrite the two values in the example below.

# serverDir()

Define the server directory of your Nuxt application, where Nitro routes, middleware and plugins are kept. If a relative path is specified, it will be relative to your rootDir.

# srcDir()

Define the source directory of your Nuxt application. If a relative path is specified, it will be relative to the rootDir.

# ssr()

Whether to enable rendering of HTML - either dynamically (in server mode) or at generate time. If set to false generated pages will have no content.

# test()

Whether your app is being unit tested.

# theme()

Extend project from a local or remote source. Value should be a string pointing to source directory or config path relative to current config. You can use github:, gitlab:, bitbucket: or https:// to extend from a remote git repository.

# watch()

The watch property lets you define patterns that will restart the Nuxt dev server when changed. It is an array of strings or regular expressions. Strings should be either absolute paths or relative to the srcDir (and the srcDir of any layers). Regular expressions will be matched against the path relative to the project srcDir (and the srcDir of any layers).

# watchers()

The watchers property lets you overwrite watchers configuration in your nuxt.config.

# webpack()

watchOptions to pass directly to webpack.

# workspaceDir()

Define the workspace directory of your application. Often this is used when in a monorepo setup. Nuxt will attempt to detect your workspace directory automatically, but you can override it here. It is normally not needed to configure this option.

# https()

Whether to enable HTTPS.

# process.env.NUXT_HOST()

Dev server listening host

# process.env.NUXT_PORT()

Dev server listening port

# url()

Listening dev server URL. This should not be set directly as it will always be overridden by the dev server with the full URL (for module and internal use).

# appManifest()

Use app manifests to respect route rules on client-side.

# asyncContext()

Enable native async context to be accessible for nested composables

# asyncEntry()

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

# buildCache()

Cache Nuxt/Nitro build artifacts based on a hash of the configuration and source files. This only works for source files within srcDir and serverDir for the Vue/Nitro parts of your app.

# checkOutdatedBuildInterval()

Set the time interval (in ms) to check for new builds. Disabled when experimental.appManifest is false. Set to false to disable.

# clientFallback()

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

# clientNodeCompat()

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

# compatibilityVersion()

Enable early access to future features or flags. It is currently not configurable but may be in future.

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

# cookieStore()

Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh useCookie ref values.

# crossOriginPrefetch()

Enable cross-origin prefetch using the Speculation Rules API.

# defaults()

This allows specifying the default options for core Nuxt components and composables. These options will likely be moved elsewhere in the future, such as into app.config or into the app/ directory.

# devLogs()

Stream server logs to the client as you are developing. These logs can be handled in the dev:ssr-logs hook. If set to silent, the logs will not be printed to the browser console.

# emitRouteChunkError()

Emit app:chunkError hook when there is an error loading vite/webpack chunks. By default, Nuxt will also perform a hard reload of the new route when a chunk fails to load when navigating to a new route. You can disable automatic handling by setting this to false, or handle chunk errors manually by setting it to manual.

# es()

Resolve ~, ~~, @ and @@ aliases located within layers with respect to their layer source and root directories.

# externalVue()

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

# features()

Some features of Nuxt are available on an opt-in basis, or can be disabled based on your needs.

# future()

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

# 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

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

# inlineStyles()

Inline styles when rendering HTML (currently vite only). You can also pass a function that receives the path of a Vue component and returns a boolean indicating whether to inline the styles for that component.

# multiApp()

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

# navigationRepaint()

Wait for a single animation frame before navigation, which gives an opportunity for the browser to repaint, acknowledging user interaction. It can reduce INP when navigating on prerendered routes.

# normalizeComponentNames()

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

# noScripts()

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

# noVueServer()

Disable vue server renderer endpoint within nitro.

# nuxtLink()

# payloadExtraction()

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

# renderJsonPayloads()

Render JSON payloads with support for revivifying complex types.

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

# scanPageMeta()

Allow exposing some route metadata defined in definePageMeta at build-time to modules (alias, name, path, redirect). This only works with static or strings/arrays rather than variables or conditional assignment.

# serverAppConfig()

Enable accessing appConfig from server routes.

# 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. It is particularly important when enabling this feature to make sure that any unique key of your data is always resolvable to the same data. For example, if you are using useAsyncData to fetch data related to a particular page, you should provide a key that uniquely matches that data. (useFetch should do this automatically for you.)

# templateRouteInjection()

By default the route object returned by the auto-imported useRoute() composable is kept in sync with the current page in view in <NuxtPage>. This is not true for vue-router's exported useRoute or for the default $route object available in your Vue templates. By enabling this option a mixin will be injected to keep the $route template object in sync with Nuxt's managed useRoute().

# typedPages()

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

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

# useFetch()

# viewTransition()

Enable View Transition API integration with client-side router.

# watcher()

Set an alternative watcher that will be used as the watching service for Nuxt. 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.

# writeEarlyHints()

Write early hints when using node server.

# yncData()

Options that apply to useAsyncData (and also therefore useFetch)

# exclude()

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

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

# _build()

private method

# _cli()

private method

# _generate()

private method

# _installedModules()

private method

# _legacyGenerate()

private method

# _majorVersion()

private method

# _modules()

private method

# _nuxtConfigFile()

private method

# _nuxtConfigFiles()

private method

# _prepare()

private method

# _requiredModules()

private method

# _start()

private method

# appDir()

private method

# devServerHandlers()

Nitro development-only server handlers.

# nitro()

Configuration for Nitro.

# routeRules()

Global route options applied to matching server routes.

# serverHandlers()

Nitro server handlers. Each handler accepts the following options: - handler: The path to the file defining the handler. - route: The route under which the handler is available. This follows the conventions of rou3 - method: The HTTP method of requests that should be handled. - middleware: Specifies whether it is a middleware handler. - lazy: Specifies whether to use lazy loading to import the handler.

# autoprefixer()

Plugin to parse CSS and add vendor prefixes to CSS rules.

# cssnano()

# order()

A strategy for ordering PostCSS plugins.

# plugins()

Options for configuring PostCSS plugins.

# hMode()

You can enable hash history in SPA mode. In this mode, router uses a hash character (#) before the actual URL that is internally passed. When enabled, the URL is never sent to the server and SSR is not supported.

# options()

Additional router options passed to vue-router. On top of the options for vue-router, Nuxt offers additional options to customize the router (see below).

# scrollBehaviorType()

Customize the scroll behavior for hash links.

# builder()

Which builder types to include for your project. By default Nuxt infers this based on your builder option (defaulting to 'vite') but you can either turn off builder environment types (with false) to handle this fully yourself, or opt for a 'shared' option. The 'shared' option is advised for module authors, who will want to support multiple possible builders.

# hoist()

Modules to generate deep aliases for within compilerOptions.paths. This does not yet support subpaths. It may be necessary when using Nuxt within a pnpm monorepo with shamefully-hoist=false.

# includeWorkspace()

Include parent workspace in the Nuxt project. Mostly useful for themes and module authors.

# shim()

Generate a *.vue shim. We recommend instead letting the official Vue extension generate accurate types for your components. Note that you may wish to set this to true if you are using other libraries, such as ESLint, that are unable to understand the type of .vue files.

# strict()

TypeScript comes with certain checks to give you more safety and analysis of your program. Once you’ve converted your codebase to TypeScript, you can start enabling these checks for greater safety. Read More

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

# typescript()

Configuration for Nuxt's TypeScript integration.

# vite()

Configuration that will be passed directly to Vite.

# aggressiveCodeRemoval()

Hard-replaces typeof process, typeof window and typeof document to tree-shake bundle.

# analyze()

Nuxt uses webpack-bundle-analyzer to visualize your bundles and how to optimize them. Set to true to enable bundle analysis, or pass an object with options: for webpack or for vite.

# cssSourceMap()

Enables CSS source map support (defaults to true in development).

# devMiddleware()

See webpack-dev-middleware for available options.

# esbuild()

# experiments()

Configure webpack experiments

# extractCSS()

Enables Common CSS Extraction. Using mini-css-extract-plugin under the hood, your CSS will be extracted into separate files, usually one per component. This allows caching your CSS and JavaScript separately.

# file()

# filenames()

Customize bundle filenames. To understand a bit more about the use of manifests, take a look at webpack documentation.

# fontUrl()

# friendlyErrors()

Set to false to disable the overlay provided by FriendlyErrorsWebpackPlugin.

# hotMiddleware()

See webpack-hot-middleware for available options.

# imgUrl()

# less()

# loaders()

Customize the options of Nuxt's integrated webpack loaders.

# minimize()

Set minimize to false to disable all minimizers. (It is disabled in development by default).

# minimizer()

You can set minimizer to a customized array of plugins.

# optimization()

Configure webpack optimization.

# optimizeCSS()

OptimizeCSSAssets plugin options. Defaults to true when extractCSS is enabled.

# plugins()

Add webpack plugins.

# postcss()

Customize PostCSS Loader. same options as postcss-loader options

# process.argv.includes()

Enable the profiler in webpackbar. It is normally enabled by CLI argument --profile.

# pugPlain()

# s()

# scss()

# serverURLPolyfill()

The polyfill library to load to provide URL and URLSearchParams. Defaults to 'url' (see package).

# stylus()

# vue()

See vue-loader for available options.

# warningIgnoreFilters()

Filters to hide build warnings.

# url()

the file: url of the current file (similar to __filename but as file url)

# glob()

vite glob import utility - https://vitejs.dev/guide/features.html#glob-import

# globEager()

# accept(dependencies, callback, errorHandler)

Accept code updates for the specified dependencies. The callback is called when dependencies were replaced.

Parameters

# accept(dependency, callback, errorHandler)

Accept code updates for the specified dependencies. The callback is called when dependencies were replaced.

Parameters

# accept(errHandler)

Accept code updates for this module without notification of parents. This should only be used if the module doesn’t export anything. The errHandler can be used to handle errors that occur while loading the updated module.

Parameters

# addDisposeHandler(callback)

Add a one time handler, which is executed when the current module code is replaced. Here you should destroy/remove any persistent resource you have claimed/created. If you want to transfer state to the new module, add it to data object. The data will be available at module.hot.data on the new module.

Parameters

# addStatusHandler()

Register a callback on status change.

# apply(options, callback)

If status() != "ready" it throws an error. Continue the update process.

Parameters

# apply(callback)

If status() != "ready" it throws an error. Continue the update process.

Parameters

# check(autoApply, callback)

Throws an exceptions if status() is not idle. Check all currently loaded modules for updates and apply updates if found. If no update was found, the callback is called with null. If autoApply is truthy the callback will be called with all modules that were disposed. apply() is automatically called with autoApply as options parameter. If autoApply is not set the callback will be called with all modules that will be disposed on apply().

Parameters

# check(callback)

Throws an exceptions if status() is not idle. Check all currently loaded modules for updates and apply updates if found. If no update was found, the callback is called with null. The callback will be called with all modules that will be disposed on apply().

Parameters

# decline()

Do not accept updates for the specified dependencies. If any dependencies is updated, the code update fails with code "decline".

# decline()

Do not accept updates for the specified dependencies. If any dependencies is updated, the code update fails with code "decline".

# decline()

Flag the current module as not update-able. If updated the update code would fail with code "decline".

# dispose(callback)

Add a one time handler, which is executed when the current module code is replaced. Here you should destroy/remove any persistent resource you have claimed/created. If you want to transfer state to the new module, add it to data object. The data will be available at module.hot.data on the new module.

Parameters

# info()

Notifier for declined modules.

# info()

Notifier for unaccepted modules.

# info()

Notifier for accepted modules.

# info()

Notifier for disposed modules.

# info()

Notifier for errors.

# moduleId()

The module in question.

# removeDisposeHandler(callback)

Remove a handler. This can useful to add a temporary dispose handler. You could i. e. replace code while in the middle of a multi-step async function.

Parameters

# removeStatusHandler(callback)

Remove a registered status change handler.

Parameters

# status()

Return one of idle, check, watch, watch-delay, prepare, ready, dispose, apply, abort or fail.

# status()

Register a callback on status change.

# toString()

Return formatted error message.

# path()

Path (absolute or relative) to the directory containing your components. You can use Nuxt aliases (~ or @) to refer to directories inside project or directly use an npm package path similar to require.

# ync()

This flag indicates, component should be loaded async (with a separate chunk) regardless of using Lazy prefix or not.

# app(app)

Called after resolving the app instance.

Parameters

# app(app)

Called during NuxtApp generation, to allow customizing, modifying or adding new files to the build directory (either virtually or to written to .nuxt).

Parameters

# app(app)

Called after templates are compiled into the virtual file system (vfs).

Parameters

# build()

Called before Nuxt bundle builder.

# build()

Called after Nuxt bundle builder is complete.

# build(manifest)

Called during the manifest build by Vite and Webpack. This allows customizing the manifest that Nitro will use to render <script> and <link> tags in the final HTML.

Parameters

# build(meta)

Called when nuxt analyze is finished

Parameters

# build(error)

Called when an error occurs at build time.

Parameters

# builder(options)

Called before generating the app.

Parameters

# builder(event, path)

Called at build time in development when the watcher spots a change to a file or directory in the project.

Parameters

# components(dirs)

Called within app:resolve allowing to extend the directories that are scanned for auto-importable components.

Parameters

# components(components)

Allows extending new components.

Parameters

# imports(presets)

Called at setup allowing modules to extend sources.

Parameters

# imports(imports)

Called at setup allowing modules to extend imports.

Parameters

# imports(context)

Called when the unimport context is created.

Parameters

# imports(dirs)

Allows extending import directories.

Parameters

# kit(compatibility, issues)

Allows extending compatibility checks.

Parameters

# listenerServer(listenerServer, listener)

Called when the dev server is loading.

Parameters

# modules()

Called during Nuxt initialization, before installing user modules.

# modules()

Called during Nuxt initialization, after installing user modules.

# nitro(nitroConfig)

Called before initializing Nitro, allowing customization of Nitro's configuration.

Parameters

# nitro(nitro)

Called after Nitro is initialized, which allows registering Nitro hooks and interacting directly with Nitro.

Parameters

# nitro(nitro)

Called before building the Nitro instance.

Parameters

# nitro(nitro)

Called after copying public assets. Allows modifying public assets before Nitro server is built.

Parameters

# nuxt(nuxt)

Called after Nuxt initialization, when the Nuxt instance is ready to work.

Parameters

# nuxt(nuxt)

Called when Nuxt instance is gracefully closing.

Parameters

# pages(pages)

Called after pages routes are resolved.

Parameters

# pages(context)

Called when resolving app/router.options files. It allows modifying the detected router options files and adding new ones. Later items in the array override earlier ones. Adding a router options file will switch on page-based routing, unless optional is set, in which case it will only apply when page-based routing is already enabled.

Parameters

# prepare(options)

Called before Nuxi writes .nuxt/tsconfig.json and .nuxt/nuxt.d.ts, allowing addition of custom references and declarations in nuxt.d.ts, or directly modifying the options in tsconfig.json

Parameters

# prerender(ctx)

Allows extending the routes to be pre-rendered.

Parameters

# rspack(webpackConfigs)

Called before configuring the webpack compiler.

Parameters

# rspack(webpackConfigs)

Allows to read the resolved webpack config

Parameters

# rspack(options)

Called right before compilation.

Parameters

# rspack(options)

Called after resources are loaded.

Parameters

# rspack(shortPath)

Called on change on WebpackBar.

Parameters

# rspack()

Called on done if has errors on WebpackBar.

# rspack()

Called on allDone on WebpackBar.

# rspack(statesArray)

Called on progress on WebpackBar.

Parameters

# schema(schemas)

Allows extending default schemas.

Parameters

# schema(schema)

Allows extending resolved schema.

Parameters

# schema(schema)

Called before writing the given schema.

Parameters

# schema()

Called after the schema is written.

# server(handler)

Called when the dev middleware is being registered on the Nitro dev server.

Parameters

# vite(viteBuildContext)

Allows to extend Vite default context.

Parameters

# vite(viteInlineConfig, env)

Allows to extend Vite default config.

Parameters

# vite(viteInlineConfig, env)

Allows to read the resolved Vite config.

Parameters

# vite(viteServer, env)

Called when the Vite server is created.

Parameters

# vite()

Called after Vite server is compiled.

# webpack(webpackConfigs)

Called before configuring the webpack compiler.

Parameters

# webpack(webpackConfigs)

Allows to read the resolved webpack config

Parameters

# webpack(options)

Called right before compilation.

Parameters

# webpack(options)

Called after resources are loaded.

Parameters

# webpack(shortPath)

Called on change on WebpackBar.

Parameters

# webpack()

Called on done if has errors on WebpackBar.

# webpack()

Called on allDone on WebpackBar.

# webpack(statesArray)

Called on progress on WebpackBar.

Parameters

# data()

Provided compile option instead of src

# filename()

The target filename once the template is copied into the Nuxt buildDir

# options()

The resolved Nuxt configuration.

# s()

Only JSON serializable router options are configurable from nuxt config

# toArray()

# node()

This file is based on Vue.js (MIT) webpack plugins https://github.com/vuejs/vue/blob/dev/src/server/webpack-plugin/client.js

# toArray()

# nitro()

Inject rollup plugin for Nitro to handle dynamic imports from webpack chunks

# userConfig()

This is an example app config defined in custom schema

# render()

most of the time, vue compiler need at least a VNode, use h() to render the component

# defineEventHandler()

sometimes, CMS wants to give full control on components. This might not be a good practice. SO MAKE SURE TO SANITIZE ALL YOUR STRINGS

# defineEventHandler()

mock the behavior of nuxt retrieving data from an api