@nuxt/docs 3.19.2 → 3.20.0

package/2.guide/3.going-further/1.experimental-features.md

@@ -5,7 +5,7 @@ description: "Enable Nuxt experimental features to unlock new possibilities."
 
 The Nuxt experimental features can be enabled in the Nuxt configuration file.
 
-Internally, Nuxt uses `@nuxt/schema` to define these experimental features. You can refer to the [API documentation](/docs/api/configuration/nuxt-config#experimental) or the [source code](https://github.com/nuxt/nuxt/blob/main/packages/schema/src/config/experimental.ts) for more information.
+Internally, Nuxt uses `@nuxt/schema` to define these experimental features. You can refer to the [API documentation](/docs/3.x/api/configuration/nuxt-config#experimental) or the [source code](https://github.com/nuxt/nuxt/blob/main/packages/schema/src/config/experimental.ts) for more information.
 
 ::note
 Note that these features are experimental and could be removed or modified in the future.
@@ -18,8 +18,8 @@ Enable native async context to be accessible for nested composables in Nuxt and
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    asyncContext: true
-  }
+    asyncContext: true,
+  },
 })
 ```
 
@@ -34,8 +34,8 @@ Enables generation of an async entry point for the Vue bundle, aiding module fed
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    asyncEntry: true
-  }
+    asyncEntry: true,
+  },
 })
 ```
 
@@ -48,8 +48,8 @@ Externalizes `vue`, `@vue/*` and `vue-router` when building.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    externalVue: true
-  }
+    externalVue: true,
+  },
 })
 ```
 
@@ -66,55 +66,93 @@ Tree shakes contents of client-only components from server bundle.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    treeshakeClientOnly: true
-  }
+    treeshakeClientOnly: true,
+  },
 })
 ```
 
+## extractAsyncDataHandlers
+
+Extracts handler functions from `useAsyncData` and `useLazyAsyncData` calls into separate chunks for improved code splitting and caching efficiency.
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    extractAsyncDataHandlers: true,
+  },
+})
+```
+
+This feature transforms inline handler functions into dynamically imported chunks:
+
+```vue
+<!-- Before -->
+<script setup>
+const { data } = await useAsyncData('user', async () => {
+  return await $fetch('/api/user')
+})
+</script>
+```
+
+```vue
+<!-- After transformation -->
+<script setup>
+const { data } = await useAsyncData('user', () =>
+  import('/generated-chunk.js').then(r => r.default()),
+)
+</script>
+```
+
+The benefit of this transformation is that we can split out data fetching logic &mdash; while still allowing the code to be loaded if required.
+
+::important
+This feature is only recommended for **static builds** with payload extraction, and where data does not need to be re-fetched at runtime.
+::
+
 ## emitRouteChunkError
 
 Emits `app:chunkError` hook when there is an error loading vite/webpack chunks. Default behavior is to perform a reload of the new route on navigation to a new route when a chunk fails to load.
 
-If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
+If you set this to `'automatic-immediate'` Nuxt will reload the current route immediately, instead of waiting for a navigation. This is useful for chunk errors that are not triggered by navigation, e.g., when your Nuxt app fails to load a [lazy component](/docs/3.x/guide/directory-structure/components#dynamic-imports). A potential downside of this behavior is undesired reloads, e.g., when your app does not need the chunk that caused the error.
 
 You can disable automatic handling by setting this to `false`, or handle chunk errors manually by setting it to `manual`.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    emitRouteChunkError: 'automatic' // or 'automatic-immediate', 'manual' or false
-  }
+    emitRouteChunkError: 'automatic', // or 'automatic-immediate', 'manual' or false
+  },
 })
 ```
 
 ## restoreState
 
-Allows Nuxt app state to be restored from `sessionStorage` when reloading the page after a chunk error or manual [`reloadNuxtApp()`](/docs/api/utils/reload-nuxt-app) call.
+Allows Nuxt app state to be restored from `sessionStorage` when reloading the page after a chunk error or manual [`reloadNuxtApp()`](/docs/3.x/api/utils/reload-nuxt-app) 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.
 
 ::important
 Consider carefully before enabling this as it can cause unexpected behavior,
-and consider providing explicit keys to [`useState`](/docs/api/composables/use-state) as auto-generated keys may not match across builds.
+and consider providing explicit keys to [`useState`](/docs/3.x/api/composables/use-state) as auto-generated keys may not match across builds.
 ::
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    restoreState: true
-  }
+    restoreState: true,
+  },
 })
 ```
 
 ## inlineRouteRules
 
-Define route rules at the page level using [`defineRouteRules`](/docs/api/utils/define-route-rules).
+Define route rules at the page level using [`defineRouteRules`](/docs/3.x/api/utils/define-route-rules).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    inlineRouteRules: true
-  }
+    inlineRouteRules: true,
+  },
 })
 ```
 
@@ -135,8 +173,8 @@ Allows rendering of JSON payloads with support for revivifying complex types.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    renderJsonPayloads: true
-  }
+    renderJsonPayloads: true,
+  },
 })
 ```
 
@@ -147,8 +185,8 @@ Disables Vue server renderer endpoint within Nitro.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    noVueServer: true
-  }
+    noVueServer: true,
+  },
 })
 ```
 
@@ -159,20 +197,20 @@ Enables extraction of payloads of pages generated with `nuxt generate`.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    payloadExtraction: true
-  }
+    payloadExtraction: true,
+  },
 })
 ```
 
 ## clientFallback
 
-Enables the experimental [`<NuxtClientFallback>`](/docs/api/components/nuxt-client-fallback) component for rendering content on the client if there's an error in SSR.
+Enables the experimental [`<NuxtClientFallback>`](/docs/3.x/api/components/nuxt-client-fallback) component for rendering content on the client if there's an error in SSR.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    clientFallback: true
-  }
+    clientFallback: true,
+  },
 })
 ```
 
@@ -183,8 +221,8 @@ Enables cross-origin prefetch using the Speculation Rules API.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    crossOriginPrefetch: true
-  }
+    crossOriginPrefetch: true,
+  },
 })
 ```
 
@@ -199,8 +237,8 @@ Enables View Transition API integration with client-side router.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    viewTransition: true
-  }
+    viewTransition: true,
+  },
 })
 ```
 
@@ -217,20 +255,20 @@ Enables writing of early hints when using node server.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    writeEarlyHints: true
-  }
+    writeEarlyHints: true,
+  },
 })
 ```
 
 ## componentIslands
 
-Enables experimental component islands support with [`<NuxtIsland>`](/docs/api/components/nuxt-island) and `.island.vue` files.
+Enables experimental component islands support with [`<NuxtIsland>`](/docs/3.x/api/components/nuxt-island) and `.island.vue` files.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    componentIslands: true // false or 'local+remote'
-  }
+    componentIslands: true, // false or 'local+remote'
+  },
 })
 ```
 
@@ -249,8 +287,8 @@ Enables config schema support.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    configSchema: true
-  }
+    configSchema: true,
+  },
 })
 ```
 
@@ -261,8 +299,8 @@ Adds a compatibility layer for modules, plugins, or user code relying on the old
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    polyfillVueUseHead: false
-  }
+    polyfillVueUseHead: false,
+  },
 })
 ```
 
@@ -273,8 +311,8 @@ Allow disabling Nuxt SSR responses by setting the `x-nuxt-no-ssr` header.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    respectNoSSRHeader: false
-  }
+    respectNoSSRHeader: false,
+  },
 })
 ```
 
@@ -287,8 +325,8 @@ Resolve `~`, `~~`, `@` and `@@` aliases located within layers with respect to th
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    localLayerAliases: true
-  }
+    localLayerAliases: true,
+  },
 })
 ```
 
@@ -299,12 +337,12 @@ Enable the new experimental typed router using [`unplugin-vue-router`](https://g
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    typedPages: true
-  }
+    typedPages: true,
+  },
 })
 ```
 
-Out of the box, this will enable typed usage of [`navigateTo`](/docs/api/utils/navigate-to), [`<NuxtLink>`](/docs/api/components/nuxt-link), [`router.push()`](/docs/api/composables/use-router) and more.
+Out of the box, this will enable typed usage of [`navigateTo`](/docs/3.x/api/utils/navigate-to), [`<NuxtLink>`](/docs/3.x/api/components/nuxt-link), [`router.push()`](/docs/3.x/api/composables/use-router) and more.
 
 You can even get typed params within a page by using `const route = useRoute('route-name')`.
 
@@ -329,8 +367,8 @@ You can also set this to `chokidar` to watch all files in your source directory.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    watcher: 'chokidar-granular' // 'chokidar' or 'parcel' are also options
-  }
+    watcher: 'chokidar-granular', // 'chokidar' or 'parcel' are also options
+  },
 })
 ```
 
@@ -343,8 +381,8 @@ fetch the same data in different pages.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    sharedPrerenderData: true
-  }
+    sharedPrerenderData: true,
+  },
 })
 ```
 
@@ -378,7 +416,7 @@ To make globals like `Buffer` work in the browser, you need to manually inject t
 ```ts
 import { Buffer } from 'node:buffer'
 
-globalThis.Buffer = globalThis.Buffer || Buffer
+globalThis.Buffer ||= Buffer
 ```
 ::
 
@@ -395,8 +433,8 @@ You can disable this feature if it causes issues in your project.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    scanPageMeta: false
-  }
+    scanPageMeta: false,
+  },
 })
 ```
 
@@ -407,8 +445,8 @@ Enables CookieStore support to listen for cookie updates (if supported by the br
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    cookieStore: true
-  }
+    cookieStore: true,
+  },
 })
 ```
 
@@ -423,8 +461,8 @@ Caches Nuxt build artifacts based on a hash of the configuration and source file
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    buildCache: true
-  }
+    buildCache: true,
+  },
 })
 ```
 
@@ -457,7 +495,7 @@ This option allows passing additional keys to extract from the page metadata whe
 ```vue
 <script lang="ts" setup>
 definePageMeta({
-  foo: 'bar'
+  foo: 'bar',
 })
 </script>
 ```
@@ -475,7 +513,7 @@ export default defineNuxtConfig({
 })
 ```
 
-This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/guide/directory-structure/pages#typing-custom-metadata).
+This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to [augment the `NuxtPage` types with your keys](/docs/3.x/guide/directory-structure/pages#typing-custom-metadata).
 
 ## normalizeComponentNames
 
@@ -485,8 +523,8 @@ you would use to auto-import the component.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    normalizeComponentNames: true
-  }
+    normalizeComponentNames: true,
+  },
 })
 ```
 
@@ -535,8 +573,8 @@ This is enabled by default in development mode. If you need to disable this feat
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    browserDevtoolsTiming: false
-  }
+    browserDevtoolsTiming: false,
+  },
 })
 ```
 
@@ -559,8 +597,8 @@ To enable it explicitly:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    debugModuleMutation: true
-  }
+    debugModuleMutation: true,
+  },
 })
 ```
 
@@ -577,8 +615,8 @@ Lazy hydration is enabled by default, but you can disable this feature:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    lazyHydration: false
-  }
+    lazyHydration: false,
+  },
 })
 ```
 
@@ -595,8 +633,8 @@ This is enabled by default, so if you're experiencing resolution conflicts in ce
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    templateImportResolution: false
-  }
+    templateImportResolution: false,
+  },
 })
 ```
 
@@ -650,8 +688,8 @@ and ensures fresh data is loaded when needed, but it is possible to disable it:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    purgeCachedData: false
-  }
+    purgeCachedData: false,
+  },
 })
 ```
 
@@ -666,8 +704,8 @@ Whether to call and use the result from `getCachedData` when refreshing data for
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    granularCachedData: true
-  }
+    granularCachedData: true,
+  },
 })
 ```
 
@@ -684,8 +722,8 @@ That means that when `immediate: false` is passed, `pending` will be `false` unt
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    pendingWhenIdle: false
-  }
+    pendingWhenIdle: false,
+  },
 })
 ```
 
@@ -710,14 +748,64 @@ If you need to disable this feature you can do so:
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    entryImportMap: false
+    entryImportMap: false,
   },
-// or, better, simply tell vite your desired target
+  // or, better, simply tell vite your desired target
   // which nuxt will respect
   vite: {
     build: {
-      target: 'safari13'
+      target: 'safari13',
     },
   },
 })
 ```
+
+## typescriptPlugin
+
+Enable enhanced TypeScript developer experience with the `@dxup/nuxt` module.
+
+This experimental plugin provides improved TypeScript integration and development tooling for better DX when working with TypeScript in Nuxt applications.
+
+This flag is disabled by default, but you can enable this feature:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    typescriptPlugin: true,
+  },
+})
+```
+
+::important
+To use this feature, you need to:
+- Have `typescript` installed as a dependency
+- Configure VS Code to use your workspace TypeScript version (see [VS Code documentation](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript))
+::
+
+::read-more{icon="i-simple-icons-github" to="https://github.com/KazariEX/dxup" target="_blank"}
+Learn more about **@dxup/nuxt**.
+::
+
+## viteEnvironmentApi
+
+Enable Vite 6's new [Environment API](https://vite.dev/guide/api-environment) for improved build configuration and plugin architecture.
+
+When you set `future.compatibilityVersion` to `5`, this feature is enabled by default. You can also enable it explicitly for testing:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    viteEnvironmentApi: true,
+  },
+})
+```
+
+The Vite Environment API provides better consistency between development and production builds, more granular control over environment-specific configuration, and improved performance.
+
+::important
+Enabling this feature changes how Vite plugins are registered and configured. See the [Vite Environment API migration guide](/docs/4.x/getting-started/upgrade#migration-to-vite-environment-api) for details on updating your plugins.
+::
+
+::read-more{to="https://vite.dev/guide/api-environment" target="_blank"}
+Learn more about Vite's Environment API.
+::

package/2.guide/3.going-further/1.features.md

@@ -16,8 +16,8 @@ You can also pass a function that receives the path of a Vue component and retur
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   features: {
-    inlineStyles: false // or a function to determine inlining
-  }
+    inlineStyles: false, // or a function to determine inlining
+  },
 })
 ```
 
@@ -28,8 +28,8 @@ Disables rendering of Nuxt scripts and JS resource hints. Can also be configured
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   features: {
-    noScripts: true
-  }
+    noScripts: true,
+  },
 })
 ```
 
@@ -58,7 +58,7 @@ export default defineNuxtConfig({
   // To re-enable _all_ Nuxt v3 behaviour, set the following options:
   srcDir: '.',
   dir: {
-    app: 'app'
+    app: 'app',
   },
   experimental: {
     scanPageMeta: 'after-resolve',
@@ -67,21 +67,21 @@ export default defineNuxtConfig({
     resetAsyncDataToUndefined: true,
     templateUtils: true,
     relativeWatchPaths: true,
-    normalizeComponentNames: false
+    normalizeComponentNames: false,
     defaults: {
       useAsyncData: {
-        deep: true
-      }
-    }
+        deep: true,
+      },
+    },
   },
   features: {
-    inlineStyles: true
+    inlineStyles: true,
   },
   unhead: {
     renderSSRHeadOptions: {
-      omitLineBreaks: false
-    }
-  }
+      omitLineBreaks: false,
+    },
+  },
 })
 ```
 
@@ -97,7 +97,7 @@ See [the original TypeScript pull request](https://github.com/microsoft/TypeScri
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   future: {
-    typescriptBundlerResolution: true
-  }
+    typescriptBundlerResolution: true,
+  },
 })
 ```

package/2.guide/3.going-further/1.internals.md

@@ -7,15 +7,15 @@ This guide helps you better understand Nuxt internals to develop new solutions a
 
 ## The Nuxt Interface
 
-When you start Nuxt in development mode with [`nuxt dev`](/docs/api/commands/dev) or building a production application with [`nuxt build`](/docs/api/commands/build),
+When you start Nuxt in development mode with [`nuxt dev`](/docs/3.x/api/commands/dev) or building a production application with [`nuxt build`](/docs/3.x/api/commands/build),
 a common context will be created, referred to as `nuxt` internally. It holds normalized options merged with `nuxt.config` file,
-some internal state, and a powerful [hooking system](/docs/api/advanced/hooks) powered by [unjs/hookable](https://github.com/unjs/hookable)
+some internal state, and a powerful [hooking system](/docs/3.x/api/advanced/hooks) powered by [unjs/hookable](https://github.com/unjs/hookable)
 allowing different components to communicate with each other. You can think of it as **Builder Core**.
 
-This context is globally available to be used with [Nuxt Kit](/docs/guide/going-further/kit) composables.
+This context is globally available to be used with [Nuxt Kit](/docs/3.x/guide/going-further/kit) composables.
 Therefore only one instance of Nuxt is allowed to run per process.
 
-To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/docs/guide/going-further/modules).
+To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/docs/3.x/guide/going-further/modules).
 
 For more details, check out [the source code](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/core/nuxt.ts).
 
@@ -25,42 +25,42 @@ When rendering a page in the browser or on the server, a shared context will be
 This context keeps vue instance, runtime hooks, and internal states like ssrContext and payload for hydration.
 You can think of it as **Runtime Core**.
 
-This context can be accessed using [`useNuxtApp()`](/docs/api/composables/use-nuxt-app) composable within Nuxt plugins and `<script setup>` and vue composables.
+This context can be accessed using [`useNuxtApp()`](/docs/3.x/api/composables/use-nuxt-app) composable within Nuxt plugins and `<script setup>` and vue composables.
 Global usage is possible for the browser but not on the server, to avoid sharing context between users.
 
-Since [`useNuxtApp`](/docs/api/composables/use-nuxt-app) throws an exception if context is currently unavailable, if your composable does not always require `nuxtApp`, you can use [`tryUseNuxtApp`](/docs/api/composables/use-nuxt-app#tryusenuxtapp) instead, which will return `null` instead of throwing an exception.
+Since [`useNuxtApp`](/docs/3.x/api/composables/use-nuxt-app) throws an exception if context is currently unavailable, if your composable does not always require `nuxtApp`, you can use [`tryUseNuxtApp`](/docs/3.x/api/composables/use-nuxt-app#tryusenuxtapp) instead, which will return `null` instead of throwing an exception.
 
-To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/docs/guide/directory-structure/plugins).
+To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/docs/3.x/guide/directory-structure/plugins).
 
-Check [Nuxt App](/docs/api/composables/use-nuxt-app) for more information about this interface.
+Check [Nuxt App](/docs/3.x/api/composables/use-nuxt-app) for more information about this interface.
 
 `nuxtApp` has the following properties:
 
-```js
-const nuxtApp = {
-  vueApp, // the global Vue application: https://vuejs.org/api/application.html#application-api
+```ts
+interface NuxtApp {
+  vueApp // the global Vue application: https://vuejs.org/api/application.html#application-api
 
-  versions, // an object containing Nuxt and Vue versions
+  versions // an object containing Nuxt and Vue versions
 
   // These let you call and add runtime NuxtApp hooks
   // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
-  hooks,
-  hook,
-  callHook,
+  hooks
+  hook
+  callHook
 
   // Only accessible on server-side
   ssrContext: {
-    url,
-    req,
-    res,
-    runtimeConfig,
-    noSSR,
-  },
+    url
+    req
+    res
+    runtimeConfig
+    noSSR
+  }
 
   // This will be stringified and passed from server to client
   payload: {
-    serverRendered: true,
-    data: {},
+    serverRendered: true
+    data: {}
     state: {}
   }
 
@@ -76,6 +76,6 @@ Nuxt builds and bundles project using Node.js but also has a runtime side.
 
 While both areas can be extended, that runtime context is isolated from build-time. Therefore, they are not supposed to share state, code, or context other than runtime configuration!
 
-`nuxt.config` and [Nuxt Modules](/docs/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/guide/directory-structure/plugins) can be used to extend runtime.
+`nuxt.config` and [Nuxt Modules](/docs/3.x/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/3.x/guide/directory-structure/plugins) can be used to extend runtime.
 
-When building an application for production, `nuxt build` will generate a standalone build in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/guide/going-further/modules).
+When building an application for production, `nuxt build` will generate a standalone build in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/3.x/guide/going-further/modules).