@nuxt/docs 4.1.2 → 4.2.0

package/3.api/5.kit/12.resolving.md

@@ -165,10 +165,10 @@ Watch Vue School video about createResolver.
 ### Usage
 
 ```ts
-import { defineNuxtModule, createResolver } from '@nuxt/kit'
+import { createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  async setup (_, nuxt) {
+  setup (_, nuxt) {
     const { resolve, resolvePath } = createResolver(import.meta.url)
   },
 })

package/3.api/5.kit/14.builder.md

@@ -14,6 +14,10 @@ Nuxt have builders based on [Vite](https://github.com/nuxt/nuxt/tree/main/packag
 
 Extends the Vite configuration. Callback function can be called multiple times, when applying to both client and server builds.
 
+::warning
+This hook is now deprecated, and we recommend using a Vite plugin instead with a `config` hook, or — for environment-specific configuration — the `applyToEnvironment` hook.
+::
+
 ### Usage
 
 ```ts twoslash
@@ -30,6 +34,45 @@ export default defineNuxtModule({
 })
 ```
 
+For environment-specific configuration in Nuxt 5+, use `addVitePlugin()` instead:
+
+```ts twoslash
+import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  setup () {
+    // For global configuration (affects all environments)
+    addVitePlugin(() => ({
+      name: 'my-global-plugin',
+      config (config) {
+        // This runs before environment setup
+        config.optimizeDeps ||= {}
+        config.optimizeDeps.include ||= []
+        config.optimizeDeps.include.push('cross-fetch')
+      },
+    }))
+
+    // For environment-specific configuration
+    addVitePlugin(() => ({
+      name: 'my-client-plugin',
+      applyToEnvironment (environment) {
+        return environment.name === 'client'
+      },
+      configEnvironment (name, config) {
+        // This only affects the client environment
+        config.optimizeDeps ||= {}
+        config.optimizeDeps.include ||= []
+        config.optimizeDeps.include.push('client-only-package')
+      },
+    }))
+  },
+})
+```
+
+::warning
+**Important:** The `config` hook runs before `applyToEnvironment` and modifies the global configuration. Use `configEnvironment` for environment-specific configuration changes.
+::
+
 ### Type
 
 ```ts twoslash
@@ -54,8 +97,8 @@ Checkout Vite website for more information about its configuration.
 | --------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------ |
 | `dev`     | `boolean` | `false`  | If set to `true`, the callback function will be called when building in development mode.                    |
 | `build`   | `boolean` | `false`  | If set to `true`, the callback function will be called when building in production mode.                     |
-| `server`  | `boolean` | `false`  | If set to `true`, the callback function will be called when building the server bundle.                      |
-| `client`  | `boolean` | `false`  | If set to `true`, the callback function will be called when building the client bundle.                      |
+| `server`  | `boolean` | `false`  | If set to `true`, the callback function will be called when building the server bundle. **Deprecated in Nuxt 5+.** Use `addVitePlugin()` with `applyToEnvironment()` instead. |
+| `client`  | `boolean` | `false`  | If set to `true`, the callback function will be called when building the client bundle. **Deprecated in Nuxt 5+.** Use `addVitePlugin()` with `applyToEnvironment()` instead. |
 | `prepend` | `boolean` | `false`  | If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`. |
 
 ## `extendWebpackConfig`
@@ -111,6 +154,10 @@ Checkout webpack website for more information about its configuration.
 
 Append Vite plugin to the config.
 
+::warning
+In Nuxt 5+, plugins registered with `server: false` or `client: false` options will not have their `config` or `configResolved` hooks called. Instead, use the `applyToEnvironment()` method instead for environment-specific plugins.
+::
+
 ### Usage
 
 ```ts twoslash
@@ -131,6 +178,15 @@ export default defineNuxtModule({
   },
   setup (options) {
     addVitePlugin(svg4VuePlugin(options.svg4vue))
+
+    // or, to add a vite plugin to only one environment
+    addVitePlugin(() => ({
+      name: 'my-client-plugin',
+      applyToEnvironment (environment) {
+        return environment.name === 'client'
+      },
+      // ... rest of your client-only plugin
+    }))
   },
 })
 ```
@@ -159,8 +215,8 @@ See [Vite website](https://vite.dev/guide/api-plugin.html) for more information
 | --------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------ |
 | `dev`     | `boolean` | `false`  | If set to `true`, the callback function will be called when building in development mode.                    |
 | `build`   | `boolean` | `false`  | If set to `true`, the callback function will be called when building in production mode.                     |
-| `server`  | `boolean` | `false`  | If set to `true`, the callback function will be called when building the server bundle.                      |
-| `client`  | `boolean` | `false`  | If set to `true`, the callback function will be called when building the client bundle.                      |
+| `server`  | `boolean` | `false`  | If set to `true`, the callback function will be called when building the server bundle. **Deprecated in Nuxt 5+.** Use `applyToEnvironment()` instead. |
+| `client`  | `boolean` | `false`  | If set to `true`, the callback function will be called when building the client bundle. **Deprecated in Nuxt 5+.** Use `applyToEnvironment()` instead. |
 | `prepend` | `boolean` | `false`  | If set to `true`, the callback function will be prepended to the array with `unshift()` instead of `push()`. |
 
 ## `addWebpackPlugin`
@@ -234,6 +290,7 @@ import type { ExtendConfigOptions } from '@nuxt/kit'
 import type { Plugin as VitePlugin } from 'vite'
 import type { WebpackPluginInstance } from 'webpack'
 import type { RspackPluginInstance } from '@rspack/core'
+
 interface AddBuildPluginFactory {
   vite?: () => VitePlugin | VitePlugin[]
   webpack?: () => WebpackPluginInstance | WebpackPluginInstance[]

package/3.api/5.kit/15.examples.md

@@ -16,17 +16,15 @@ Some examples of projects doing this already:
 Here is a brief example of how you might access the Vite config from a project; you could implement a similar approach to get the webpack configuration.
 
 ```js
-import { loadNuxt, buildNuxt } from '@nuxt/kit'
+import { buildNuxt, loadNuxt } from '@nuxt/kit'
 
 // https://github.com/nuxt/nuxt/issues/14534
-async function getViteConfig() {
+async function getViteConfig () {
   const nuxt = await loadNuxt({ cwd: process.cwd(), dev: false, overrides: { ssr: false } })
   return new Promise((resolve, reject) => {
-    nuxt.hook('vite:extendConfig', (config, { isClient }) => {
-      if (isClient) {
-        resolve(config)
-        throw new Error('_stop_')
-      }
+    nuxt.hook('vite:extend', (config) => {
+      resolve(config)
+      throw new Error('_stop_')
     })
     buildNuxt(nuxt).catch((err) => {
       if (!err.toString().includes('_stop_')) {

package/3.api/5.kit/16.layers.md

@@ -20,9 +20,9 @@ Get the resolved directory paths for all layers in a Nuxt application. This func
 import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     const layerDirs = getLayerDirectories()
-    
+
     // Access directories from all layers
     for (const [index, layer] of layerDirs.entries()) {
       console.log(`Layer ${index}:`)
@@ -32,7 +32,7 @@ export default defineNuxtModule({
       console.log(`  Pages: ${layer.appPages}`)
       // ... other directories
     }
-  }
+  },
 })
 ```
 
@@ -42,7 +42,7 @@ export default defineNuxtModule({
 // @errors: 2391
 import type { Nuxt } from '@nuxt/schema'
 // ---cut---
-function getLayerDirectories(nuxt?: Nuxt): LayerDirectories[]
+function getLayerDirectories (nuxt?: Nuxt): LayerDirectories[]
 
 interface LayerDirectories {
   /** Nuxt rootDir (`/` by default) */
@@ -110,9 +110,9 @@ import { resolve } from 'pathe'
 import { globby } from 'globby'
 
 export default defineNuxtModule({
-  async setup() {
+  async setup () {
     const layerDirs = getLayerDirectories()
-    
+
     // Find all component files across layers
     // Note: layerDirs[0] is the user layer (highest priority)
     // Later layers in the array have lower priority
@@ -120,37 +120,37 @@ export default defineNuxtModule({
     for (const [index, layer] of layerDirs.entries()) {
       const files = await globby('**/*.vue', {
         cwd: resolve(layer.app, 'components'),
-        absolute: true
+        absolute: true,
       })
       console.log(`Layer ${index} (${index === 0 ? 'user' : 'base'}):`, files.length, 'components')
       componentFiles.push(...files)
     }
-  }
+  },
 })
 ```
 
 **Adding templates from multiple layers:**
 
 ```ts twoslash
-import { defineNuxtModule, getLayerDirectories, addTemplate } from '@nuxt/kit'
-import { resolve, basename } from 'pathe'
-import { existsSync } from 'fs'
+import { addTemplate, defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
+import { basename, resolve } from 'pathe'
+import { existsSync } from 'node:fs'
 
 export default defineNuxtModule({
-  async setup() {
+  setup () {
     const layerDirs = getLayerDirectories()
-    
+
     // Add a config file from each layer that has one
     for (const dirs of layerDirs) {
       const configPath = resolve(dirs.app, 'my-module.config.ts')
       if (existsSync(configPath)) {
         addTemplate({
           filename: `my-module-${basename(dirs.root)}.config.ts`,
-          src: configPath
+          src: configPath,
         })
       }
     }
-  }
+  },
 })
 ```
 
@@ -159,12 +159,12 @@ export default defineNuxtModule({
 ```ts twoslash
 import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
 import { resolve } from 'pathe'
-import { existsSync, readFileSync } from 'fs'
+import { existsSync, readFileSync } from 'node:fs'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     const layerDirs = getLayerDirectories()
-    
+
     // Find the first (highest priority) layer that has a specific config file
     // This respects the layer priority system
     let configContent = null
@@ -176,7 +176,7 @@ export default defineNuxtModule({
         break // Use the first (highest priority) config found
       }
     }
-    
+
     // Alternative: Collect configs from all layers, with user layer taking precedence
     const allConfigs = {}
     for (const dirs of layerDirs.reverse()) { // Process from lowest to highest priority
@@ -186,7 +186,7 @@ export default defineNuxtModule({
         Object.assign(allConfigs, config) // Later assignments override earlier ones
       }
     }
-  }
+  },
 })
 ```
 
@@ -194,20 +194,20 @@ export default defineNuxtModule({
 
 ```ts twoslash
 import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit'
-import { existsSync } from 'fs'
+import { existsSync } from 'node:fs'
 import { resolve } from 'pathe'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     const layerDirs = getLayerDirectories()
-    
+
     // Find layers that have a specific custom directory
-    const layersWithAssets = layerDirs.filter(layer => {
+    const layersWithAssets = layerDirs.filter((layer) => {
       return existsSync(resolve(layer.app, 'assets'))
     })
-    
+
     console.log(`Found ${layersWithAssets.length} layers with assets directory`)
-  }
+  },
 })
 ```
 

package/3.api/5.kit/3.compatibility.md

@@ -17,7 +17,7 @@ Checks if constraints are met for the current Nuxt version. If not, returns an a
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, checkNuxtCompatibility } from '@nuxt/kit'
+import { checkNuxtCompatibility, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   async setup (_options, nuxt) {
@@ -27,14 +27,14 @@ export default defineNuxtModule({
     } else {
       // do something
     }
-  }
+  },
 })
 ```
 
 ### Type
 
 ```ts
-function checkNuxtCompatibility(constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<NuxtCompatibilityIssues>;
+function checkNuxtCompatibility (constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<NuxtCompatibilityIssues>
 ```
 
 ### Parameters
@@ -58,12 +58,12 @@ Asserts that constraints are met for the current Nuxt version. If not, throws an
 // @errors: 2391
 import type { Nuxt, NuxtCompatibility } from '@nuxt/schema'
 // ---cut---
-function assertNuxtCompatibility(constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<true>;
+function assertNuxtCompatibility (constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<true>
 ```
 
 ### Parameters
 
-**`constraints`**: Version and builder constraints to check against. Refer to the [constraints table in `checkNuxtCompatibility`](#parameters) for details.
+**`constraints`**: Version and builder constraints to check against. Refer to the [constraints table in `checkNuxtCompatibility`](/docs/4.x/api/kit/compatibility#parameters) for details.
 
 **`nuxt`**: Nuxt instance. If not provided, it will be retrieved from the context via `useNuxt()` call.
 
@@ -84,19 +84,19 @@ export default defineNuxtModule({
     } else {
       // do something else
     }
-  }
+  },
 })
 ```
 
 ### Type
 
 ```ts
-function hasNuxtCompatibility(constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<boolean>;
+function hasNuxtCompatibility (constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<boolean>
 ```
 
 ### Parameters
 
-**`constraints`**: Version and builder constraints to check against. Refer to the [constraints table in `checkNuxtCompatibility`](#parameters) for details.
+**`constraints`**: Version and builder constraints to check against. Refer to the [constraints table in `checkNuxtCompatibility`](/docs/4.x/api/kit/compatibility#parameters) for details.
 
 **`nuxt`**: Nuxt instance. If not provided, it will be retrieved from the context via `useNuxt()` call.
 
@@ -110,20 +110,20 @@ Check if current Nuxt instance is of specified major version
 import { defineNuxtModule, isNuxtMajorVersion } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  async setup () {
+  setup () {
     if (isNuxtMajorVersion(3)) {
       // do something for Nuxt 3
     } else {
       // do something else for other versions
     }
-  }
+  },
 })
 ```
 
 ### Type
 
 ```ts
-function isNuxtMajorVersion(major: number, nuxt?: Nuxt): boolean;
+function isNuxtMajorVersion (major: number, nuxt?: Nuxt): boolean
 ```
 
 ### Parameters
@@ -143,7 +143,7 @@ Use `isNuxtMajorVersion(2, nuxt)` instead. This may be removed in \@nuxt/kit v5
 ### Type
 
 ```ts
-function isNuxt3(nuxt?: Nuxt): boolean;
+function isNuxt3 (nuxt?: Nuxt): boolean
 ```
 
 ### Parameters
@@ -161,7 +161,7 @@ Use `isNuxtMajorVersion(2, nuxt)` instead. This may be removed in \@nuxt/kit v5
 ### Type
 
 ```ts
-function isNuxt2(nuxt?: Nuxt): boolean;
+function isNuxt2 (nuxt?: Nuxt): boolean
 ```
 
 ### Parameters
@@ -175,7 +175,7 @@ Returns the current Nuxt version.
 ### Type
 
 ```ts
-function getNuxtVersion(nuxt?: Nuxt): string;
+function getNuxtVersion (nuxt?: Nuxt): string
 ```
 
 ### Parameters

package/3.api/5.kit/4.autoimports.md

@@ -15,7 +15,7 @@ With Nuxt Kit you can also add your own auto-imports. `addImports` and `addImpor
 These utilities are powered by [`unimport`](https://github.com/unjs/unimport), which provides the underlying auto-import mechanism used in Nuxt.
 
 ::note
-These functions are designed for registering your own utils, composables and Vue APIs. For pages, components and plugins, please refer to the specific sections: [Pages](/docs/api/kit/pages), [Components](/docs/api/kit/components), [Plugins](/docs/api/kit/plugins).
+These functions are designed for registering your own utils, composables and Vue APIs. For pages, components and plugins, please refer to the specific sections: [Pages](/docs/4.x/api/kit/pages), [Components](/docs/4.x/api/kit/components), [Plugins](/docs/4.x/api/kit/plugins).
 ::
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/expanding-nuxt-s-auto-imports?friend=nuxt" target="_blank"}
@@ -29,22 +29,22 @@ Add imports to the Nuxt application. It makes your imports available in the Nuxt
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, addImports } from "@nuxt/kit";
+import { addImports, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const names = [
       'useStoryblok',
       'useStoryblokApi',
       'useStoryblokBridge',
       'renderRichText',
-      'RichTextSchema'
+      'RichTextSchema',
     ]
 
-    names.forEach((name) =>
-      addImports({ name, as: name, from: '@storyblok/vue' })
+    names.forEach(name =>
+      addImports({ name, as: name, from: '@storyblok/vue' }),
     )
-  }
+  },
 })
 ```
 
@@ -76,14 +76,14 @@ Add imports from a directory to the Nuxt application. It will automatically impo
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, addImportsDir, createResolver } from '@nuxt/kit'
+import { addImportsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
     name: '@vueuse/motion',
     configKey: 'motion',
   },
-  setup(options, nuxt) {
+  setup (options, nuxt) {
     const resolver = createResolver(import.meta.url)
     addImportsDir(resolver.resolve('./runtime/composables'))
   },
@@ -110,10 +110,10 @@ Add listed imports to the Nuxt application.
 ### Usage
 
 ```ts twoslash
-import { defineNuxtModule, addImportsSources } from '@nuxt/kit'
+import { addImportsSources, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     addImportsSources({
       from: 'h3',
       imports: [
@@ -121,10 +121,10 @@ export default defineNuxtModule({
         'getQuery',
         'getRouterParams',
         'readBody',
-        'sendRedirect'
+        'sendRedirect',
       ],
     })
-  }
+  },
 })
 ```
 

package/3.api/5.kit/5.components.md

@@ -26,13 +26,13 @@ export default defineNuxtModule({
     name: '@nuxt/ui',
     configKey: 'ui',
   },
-  setup() {
+  setup () {
     addComponentsDir({
       path: resolve('./runtime/components'),
       prefix: 'U',
-      pathPrefix: false
+      pathPrefix: false,
     })
-  }
+  },
 })
 ```
 
@@ -58,7 +58,7 @@ function addComponentsDir (dir: ComponentsDir, opts: { prepend?: boolean } = {})
 | `isAsync`          | `boolean`                    | `false`  | This flag indicates, component should be loaded async (with a separate chunk) regardless of using Lazy prefix or not. |
 | `extendComponent`  | `(component: Component) => Promise<Component \| void> \| (Component \| void)`{lang="ts"} | `false`  | A function that will be called for each component found in the directory. It accepts a component object and should return a component object or a promise that resolves to a component object. |
 | `global`           | `boolean`                    | `false`  | If enabled, registers components to be globally available.                                                      |
-| `island`           | `boolean`                    | `false`  | If enabled, registers components as islands. You can read more about islands in [`<NuxtIsland/>`](/docs/api/components/nuxt-island#nuxtisland) component description. |
+| `island`           | `boolean`                    | `false`  | If enabled, registers components as islands. You can read more about islands in [`<NuxtIsland/>`](/docs/4.x/api/components/nuxt-island) component description. |
 | `watch`            | `boolean`                    | `false`  | Watch specified path for changes, including file additions and file deletions.                                  |
 | `extensions`       | `string[]`                   | `false`  | Extensions supported by Nuxt builder.                                                                          |
 | `transpile`        | `'auto' \| boolean`{lang="ts"} | `false`  | Transpile specified path using build.transpile. If set to `'auto'`, it will set `transpile: true` if `node_modules/` is in path. |
@@ -76,14 +76,14 @@ Register a component to be automatically imported.
 ### Usage
 
 ```ts
-import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit'
+import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
     name: '@nuxt/image',
     configKey: 'image',
   },
-  async setup() {
+  setup () {
     const resolver = createResolver(import.meta.url)
 
     addComponent({
@@ -113,6 +113,7 @@ function addComponent (options: AddComponentOptions): void
 | ------------------ | ---------------------------- | -------- | --------------------------------------------------------------------------------------------------------------- |  
 | `name`             | `string`                     | `true`   | Component name.                                                                                                 |
 | `filePath`         | `string`                     | `true`   | Path to the component.                                                                                          |
+| `declarationPath`  | `string`                     | `false`  | Path to component's declaration file. It is used to generate components' [type templates](/docs/4.x/api/kit/templates#addtypetemplate); if not provided, `filePath` is used instead. |
 | `pascalName`       | `string`                     | `false`  | Pascal case component name. If not provided, it will be generated from the component name.                      |
 | `kebabName`        | `string`                     | `false`  | Kebab case component name. If not provided, it will be generated from the component name.                       |
 | `export`           | `string`                     | `false`  | Specify named or default export. If not provided, it will be set to `'default'`.                                 |
@@ -121,7 +122,7 @@ function addComponent (options: AddComponentOptions): void
 | `prefetch`         | `boolean`                    | `false`  | These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments. Learn more on [webpack documentation](https://webpack.js.org/api/module-methods/#magic-comments) |  
 | `preload`          | `boolean`                    | `false`  | These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments. Learn more on [webpack documentation](https://webpack.js.org/api/module-methods/#magic-comments) |
 | `global`           | `boolean`                    | `false`  | If enabled, registers component to be globally available.                                                        |
-| `island`           | `boolean`                    | `false`  | If enabled, registers component as island. You can read more about islands in [`<NuxtIsland/>`](/docs/api/components/nuxt-island#nuxtisland) component description. |
+| `island`           | `boolean`                    | `false`  | If enabled, registers component as island. You can read more about islands in [`<NuxtIsland/>`](/docs/4.x/api/components/nuxt-island) component description. |
 | `mode`             | `'client' \| 'server' \| 'all'`{lang="ts"} | `false`  | This options indicates if component should render on client, server or both. By default, it will render on both client and server. |
 | `priority`         | `number`                     | `false`  | Priority of the component, if multiple components have the same name, the one with the highest priority will be used. |
 

package/3.api/5.kit/6.context.md

@@ -37,7 +37,7 @@ const setupSomeFeature = () => {
 // @errors: 2391
 import type { Nuxt } from '@nuxt/schema'
 // ---cut---
-function useNuxt(): Nuxt
+function useNuxt (): Nuxt
 ```
 
 ### Return Value
@@ -114,7 +114,7 @@ function setupSomething () {
 // @errors: 2391
 import type { Nuxt } from '@nuxt/schema'
 // ---cut---
-function tryUseNuxt(): Nuxt | null
+function tryUseNuxt (): Nuxt | null
 ```
 
 ### Return Value
@@ -156,7 +156,7 @@ interface SiteConfig {
   title?: string
 }
 export const requireSiteConfig = (): SiteConfig => {
- return {}
+  return {}
 }
 // @filename: module.ts
 // ---cut---

package/3.api/5.kit/7.pages.md

@@ -39,7 +39,7 @@ export default defineNuxtModule({
 ### Type
 
 ```ts
-function extendPages(callback: (pages: NuxtPage[]) => void): void
+function extendPages (callback: (pages: NuxtPage[]) => void): void
 ```
 
 ### Parameters
@@ -104,7 +104,7 @@ export default defineNuxtModule({
 ### Type
 
 ```ts
-function extendRouteRules(route: string, rule: NitroRouteConfig, options?: ExtendRouteRulesOptions): void
+function extendRouteRules (route: string, rule: NitroRouteConfig, options?: ExtendRouteRulesOptions): void
 ```
 
 ### Parameters
@@ -113,7 +113,7 @@ function extendRouteRules(route: string, rule: NitroRouteConfig, options?: Exten
 **rule**: A route rule configuration to apply to the matched route.
 
 ::tip
-About route rules configurations, you can get more detail in [Hybrid Rendering > Route Rules](/docs/guide/concepts/rendering#route-rules).
+About route rules configurations, you can get more detail in [Hybrid Rendering > Route Rules](/docs/4.x/guide/concepts/rendering#route-rules).
 ::
 
 **options**: A object to pass to the route configuration. If `override` is set to `true`, it will override the existing route configuration.
@@ -126,10 +126,10 @@ About route rules configurations, you can get more detail in [Hybrid Rendering >
 
 Registers route middlewares to be available for all routes or for specific routes.
 
-Route middlewares can be also defined in plugins via [`addRouteMiddleware`](/docs/api/utils/add-route-middleware) composable.
+Route middlewares can be also defined in plugins via [`addRouteMiddleware`](/docs/4.x/api/utils/add-route-middleware) composable.
 
 ::tip
-Read more about route middlewares in the [Route middleware documentation](/docs/getting-started/routing#route-middleware).
+Read more about route middlewares in the [Route middleware documentation](/docs/4.x/getting-started/routing#route-middleware).
 ::
 
 ::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/adding-route-rules-and-route-middlewares?friend=nuxt" target="_blank"}
@@ -157,7 +157,7 @@ export default defineNuxtModule({
 ```
 
 ```ts twoslash [runtime/auth.ts]
-function isAuthenticated(): boolean { return false }
+function isAuthenticated (): boolean { return false }
 // ---cut---
 export default defineNuxtRouteMiddleware((to, from) => {
   // isAuthenticated() is an example method verifying if a user is authenticated
@@ -172,7 +172,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 ### Type
 
 ```ts
-function addRouteMiddleware(input: NuxtMiddleware | NuxtMiddleware[], options?: AddRouteMiddlewareOptions): void
+function addRouteMiddleware (input: NuxtMiddleware | NuxtMiddleware[], options?: AddRouteMiddlewareOptions): void
 ```
 
 ### Parameters

package/3.api/5.kit/8.layout.md

@@ -15,7 +15,7 @@ Layouts is used to be a wrapper around your pages. It can be used to wrap your p
 Register template as layout and add it to the layouts.
 
 ::note
-In Nuxt 2 `error` layout can also be registered using this utility. In Nuxt 3+ `error` layout [replaced](/docs/getting-started/error-handling#rendering-an-error-page) with `error.vue` page in project root.
+In Nuxt 2 `error` layout can also be registered using this utility. In Nuxt 3+ `error` layout [replaced](/docs/4.x/getting-started/error-handling#error-page) with `error.vue` page in project root.
 ::
 
 ### Usage
@@ -38,7 +38,7 @@ export default defineNuxtModule({
 ### Type
 
 ```ts
-function addLayout(layout: NuxtTemplate | string, name: string): void
+function addLayout (layout: NuxtTemplate | string, name: string): void
 ```
 
 ### Parameters