@nuxt/docs 4.2.0 → 4.2.2

package/{2.guide/3.going-further → 3.guide/5.going-further}/3.modules.md

@@ -117,7 +117,7 @@ Nuxt Modules come with a variety of powerful APIs and patterns allowing them to
 We can consider two kinds of Nuxt Modules:
 
 - published modules are distributed on npm - you can see a list of some community modules on [the Nuxt website](/modules).
-- "local" modules, they exist within a Nuxt project itself, either [inlined in Nuxt config](/docs/4.x/api/nuxt-config#modules) or as part of [the `modules` directory](/docs/4.x/guide/directory-structure/modules).
+- "local" modules, they exist within a Nuxt project itself, either [inlined in Nuxt config](/docs/4.x/api/nuxt-config#modules) or as part of [the `modules` directory](/docs/4.x/directory-structure/modules).
 
 In either case, their anatomy is similar.
 
@@ -224,7 +224,7 @@ Modules, like everything in a Nuxt configuration, aren't included in your applic
 Inside the runtime directory, you can provide any kind of assets related to the Nuxt App:
 - Vue components
 - Composables
-- [Nuxt plugins](/docs/4.x/guide/directory-structure/plugins)
+- [Nuxt plugins](/docs/4.x/directory-structure/app/plugins)
 
 To the [server engine](/docs/4.x/guide/concepts/server-engine), Nitro:
 - API routes
@@ -653,6 +653,19 @@ export default defineNuxtModule({
 })
 ```
 
+#### Updating Templates
+
+If you need to update your templates/virtual files, you can leverage the `updateTemplates` utility like this:
+
+```ts
+nuxt.hook('builder:watch', (event, path) => {
+  if (path.includes('my-module-feature.config')) {
+    // This will reload the template that you registered
+    updateTemplates({ filter: t => t.filename === 'my-module-feature.mjs' })
+  }
+})
+```
+
 #### Adding Type Declarations
 
 You might also want to add a type declaration to the user's project (for example, to augment a Nuxt interface
@@ -691,19 +704,73 @@ nuxt.hook('prepare:types', ({ references }) => {
 })
 ```
 
-##### Updating Templates
+#### Extending `tsconfig.json`
+
+There are multiple ways to extend the TypeScript configuration of the user's project from your module.
 
-If you need to update your templates/virtual files, you can leverage the `updateTemplates` utility like this :
+The simplest way is to modify the Nuxt configuration directly like this:
 
+<!-- @case-police-ignore tsConfig -->
 ```ts
-nuxt.hook('builder:watch', (event, path) => {
-  if (path.includes('my-module-feature.config')) {
-    // This will reload the template that you registered
-    updateTemplates({ filter: t => t.filename === 'my-module-feature.mjs' })
-  }
+// extend tsconfig.app.json
+nuxt.options.typescript.tsConfig.include ??= []
+nuxt.options.typescript.tsConfig.include.push(resolve('./augments.d.ts'))
+
+// extend tsconfig.shared.json
+nuxt.options.typescript.sharedTsConfig.include ??= []
+nuxt.options.typescript.sharedTsConfig.include.push(resolve('./augments.d.ts'))
+
+// extend tsconfig.node.json
+nuxt.options.typescript.nodeTsConfig.include ??= []
+nuxt.options.typescript.nodeTsConfig.include.push(resolve('./augments.d.ts'))
+
+// extend tsconfig.server.json
+nuxt.options.nitro.typescript ??= {}
+nuxt.options.nitro.typescript.tsConfig ??= {}
+nuxt.options.nitro.typescript.tsConfig.include ??= []
+nuxt.options.nitro.typescript.tsConfig.include.push(resolve('./augments.d.ts'))
+```
+
+Alternatively, you can use the `prepare:types` and `nitro:prepare:types` hooks to extend the TypeScript references for specific type contexts, or modify the TypeScript configuration similar to the example above.
+
+```ts
+nuxt.hook('prepare:types', ({ references, sharedReferences, nodeReferences }) => {
+  // extend app context
+  references.push({ path: resolve('./augments.d.ts') })
+  // extend shared context
+  sharedReferences.push({ path: resolve('./augments.d.ts') })
+  // extend node context
+  nodeReferences.push({ path: resolve('./augments.d.ts') })
+})
+
+nuxt.hook('nitro:prepare:types', ({ references }) => {
+  // extend server context
+  references.push({ path: resolve('./augments.d.ts') })
 })
 ```
 
+::note
+TypeScript references add files to the type context [without being affected by the `exclude` option in `tsconfig.json`](https://www.typescriptlang.org/tsconfig/#exclude).
+::
+
+#### Augmenting Types From Modules
+
+Nuxt automatically includes your module's directories in the appropriate type contexts. To augment types from your module, all you need to do is place the type declaration file in the appropriate directory based on the augmented type context. Alternatively, you can [extend the TypeScript configuration](/docs/4.x/guide/going-further/modules#extending-tsconfigjson) to augment from an arbitrary location.
+
+- `my-module/runtime/` - app type context (except for the `runtime/server` directory)
+- `my-module/runtime/server/` - server type context
+- `my-module/` - node type context (except for the `runtime/` and `runtime/server` directories)
+
+```bash [Directory Structure]
+-| my-module/   # node type context
+---| runtime/   # app type context
+------| augments.app.d.ts
+------| server/ # server type context
+---------| augments.server.d.ts
+---| module.ts
+---| augments.node.d.ts
+```
+
 ### Testing
 
 Testing helps ensuring your module works as expected given various setup. Find in this section how to perform various kinds of tests against your module.
@@ -774,7 +841,7 @@ An example of such a workflow is available on [the module starter](https://githu
 
 Having a playground Nuxt application to test your module when developing it is really useful. [The module starter integrates one for that purpose](/docs/4.x/guide/going-further/modules#how-to-develop).
 
-You can test your module with other Nuxt applications (applications that are not part of your module repository) locally. To do so, you can use [`npm pack`](https://docs.npmjs.com/cli/commands/npm-pack) command, or your package manager equivalent, to create a tarball from your module. Then in your test project, you can add your module to `package.json` packages as: `"my-module": "file:/path/to/tarball.tgz"`.
+You can test your module with other Nuxt applications (applications that are not part of your module repository) locally. To do so, you can use [`npm pack`](https://docs.npmjs.com/cli/commands/npm-pack/) command, or your package manager equivalent, to create a tarball from your module. Then in your test project, you can add your module to `package.json` packages as: `"my-module": "file:/path/to/tarball.tgz"`.
 
 After that, you should be able to reference `my-module` like in any regular project.
 
@@ -876,7 +943,7 @@ Watch Vue School video about Nuxt module types.
 
 ### Module Types
 
-**Official modules** are modules prefixed (scoped) with `@nuxt/` (e.g. [`@nuxt/content`](https://content.nuxtjs.org)). They are made and maintained actively by the Nuxt team. Like with the framework, contributions from the community are more than welcome to help make them better!
+**Official modules** are modules prefixed (scoped) with `@nuxt/` (e.g. [`@nuxt/content`](https://content.nuxt.com)). They are made and maintained actively by the Nuxt team. Like with the framework, contributions from the community are more than welcome to help make them better!
 
 **Community modules** are modules prefixed (scoped) with `@nuxtjs/` (e.g. [`@nuxtjs/tailwindcss`](https://tailwindcss.nuxtjs.org)). They are proven modules made and maintained by community members. Again, contributions are welcome from anyone.
 

package/{2.guide/3.going-further → 3.guide/5.going-further}/6.nuxt-app.md

@@ -9,7 +9,7 @@ links:
 
 In Nuxt, you can access runtime app context within composables, components and plugins.
 
-::read-more{to="https://v2.nuxt.com/docs/internals-glossary/context#the-context" target="_blank"}
+::read-more{to="https://v2.nuxt.com/docs/internals-glossary/context/#the-context" target="_blank"}
 In Nuxt 2, this was referred to as **Nuxt context**.
 ::
 
@@ -23,7 +23,7 @@ Jump over the `NuxtApp` interface documentation.
 
 Many composables and utilities, both built-in and user-made, may require access to the Nuxt instance. This doesn't exist everywhere on your application, because a fresh instance is created on every request.
 
-Currently, the Nuxt context is only accessible in [plugins](/docs/4.x/guide/directory-structure/plugins), [Nuxt hooks](/docs/4.x/guide/going-further/hooks), [Nuxt middleware](/docs/4.x/guide/directory-structure/app/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup.html) (in pages and components).
+Currently, the Nuxt context is only accessible in [plugins](/docs/4.x/directory-structure/app/plugins), [Nuxt hooks](/docs/4.x/guide/going-further/hooks), [Nuxt middleware](/docs/4.x/directory-structure/app/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup) (in pages and components).
 
 If a composable is called without access to the context, you may get an error stating that 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.' In that case, you can also explicitly call functions within this context by using [`nuxtApp.runWithContext`](/docs/4.x/api/composables/use-nuxt-app#runwithcontext).
 
@@ -42,7 +42,7 @@ If your composable does not always need `nuxtApp` or you simply want to check if
 
 Plugins also receive `nuxtApp` as the first argument for convenience.
 
-:read-more{to="/docs/4.x/guide/directory-structure/plugins"}
+:read-more{to="/docs/4.x/directory-structure/app/plugins"}
 
 ## Providing Helpers
 
@@ -55,10 +55,10 @@ nuxtApp.provide('hello', name => `Hello ${name}!`)
 console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
 ```
 
-::read-more{to="/docs/4.x/guide/directory-structure/plugins#providing-helpers"}
+::read-more{to="/docs/4.x/directory-structure/app/plugins#providing-helpers"}
 It is possible to inject helpers by returning an object with a `provide` key in plugins.
 ::
 
-::read-more{to="https://v2.nuxt.com/docs/directory-structure/plugins#inject-in-root--context" target="_blank"}
+::read-more{to="https://v2.nuxt.com/docs/directory-structure/plugins/#inject-in-root--context" target="_blank"}
 In Nuxt 2 plugins, this was referred to as **inject function**.
 ::

package/{2.guide/3.going-further → 3.guide/5.going-further}/7.layers.md

@@ -7,7 +7,7 @@ Nuxt layers are a powerful feature that you can use to share and reuse partial N
 
 :read-more{to="/docs/4.x/getting-started/layers"}
 
-A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file to indicate it is a layer.
+A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config) file to indicate it is a layer.
 
 ```ts [base/nuxt.config.ts]
 export default defineNuxtConfig({})
@@ -15,20 +15,20 @@ export default defineNuxtConfig({})
 
 Additionally, certain other files in the layer directory will be auto-scanned and used by Nuxt for the project extending this layer.
 
-- [`app/components/*`](/docs/4.x/guide/directory-structure/app/components)   - Extend the default components
-- [`app/composables/*`](/docs/4.x/guide/directory-structure/app/composables)  - Extend the default composables
-- [`app/layouts/*`](/docs/4.x/guide/directory-structure/app/layouts)  - Extend the default layouts
-- [`app/middleware/*`](/docs/4.x/guide/directory-structure/app/middleware)  - Extend the default middleware
-- [`app/pages/*`](/docs/4.x/guide/directory-structure/app/pages)        - Extend the default pages
-- [`app/plugins/*`](/docs/4.x/guide/directory-structure/plugins)        - Extend the default plugins
-- [`app/utils/*`](/docs/4.x/guide/directory-structure/app/utils)   - Extend the default utils
-- [`app/app.config.ts`](/docs/4.x/guide/directory-structure/app-config)  - Extend the default app config
-- [`server/*`](/docs/4.x/guide/directory-structure/server)       - Extend the default server endpoints & middleware
-- [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config)- Extend the default nuxt config
+- [`app/components/*`](/docs/4.x/directory-structure/app/components)   - Extend the default components
+- [`app/composables/*`](/docs/4.x/directory-structure/app/composables)  - Extend the default composables
+- [`app/layouts/*`](/docs/4.x/directory-structure/app/layouts)  - Extend the default layouts
+- [`app/middleware/*`](/docs/4.x/directory-structure/app/middleware)  - Extend the default middleware
+- [`app/pages/*`](/docs/4.x/directory-structure/app/pages)        - Extend the default pages
+- [`app/plugins/*`](/docs/4.x/directory-structure/app/plugins)        - Extend the default plugins
+- [`app/utils/*`](/docs/4.x/directory-structure/app/utils)   - Extend the default utils
+- [`app/app.config.ts`](/docs/4.x/directory-structure/app/app-config)  - Extend the default app config
+- [`server/*`](/docs/4.x/directory-structure/server)       - Extend the default server endpoints & middleware
+- [`nuxt.config.ts`](/docs/4.x/directory-structure/nuxt-config)- Extend the default nuxt config
 
 ## Basic Example
 
-::code-group
+::code-tree{defaultValue="nuxt.config.ts" expandAll}
 
   ```ts [nuxt.config.ts]
   export default defineNuxtConfig({
@@ -68,29 +68,46 @@ Additionally, certain other files in the layer directory will be auto-scanned an
 
 ## Layer Priority
 
-When extending from multiple layers, it's important to understand the priority order:
+When extending from multiple layers, it's important to understand the override order. Layers with **higher priority** override layers with lower priority when they define the same files or components.
 
-1. **Layers in `extends`** - earlier entries have higher priority (first overrides second)
-2. **Auto-scanned local layers** from `~~/layers` directory in alphabetical order (Z overrides A)
-3. **Your project** has the highest priority in the stack - it will always override other layers
+The priority order from highest to lowest is:
 
-For example:
+1. **Your project files** - always have the highest priority
+2. **Auto-scanned layers** from `~~/layers` directory - sorted alphabetically (Z has higher priority than A)
+3. **Layers in `extends`** config - first entry has higher priority than second
+
+### When to Use Each
+
+- **`extends`** - Use for external dependencies (npm packages, remote repositories) or layers outside your project directory
+- **`~~/layers` directory** - Use for local layers that are part of your project
+
+::tip
+If you need to control the order of auto-scanned layers, you can prefix them with numbers: `~/layers/1.z-layer`, `~/layers/2.a-layer`. This way `2.a-layer` will have higher priority than `1.z-layer`.
+::
+
+### Example
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    // Highest priority (among extends)
-    './layers/base',
-    // Medium priority
-    './layers/theme',
-    // Lower priority
-    './layers/custom',
+    // Local layer outside the project
+    '../base',
+    // NPM package
+    '@my-themes/awesome',
+    // Remote repository
+    'github:my-themes/awesome#v1',
   ],
-  // Your project has the highest priority
 })
 ```
 
-If you also have auto-scanned layers like `~~/layers/a` and `~~/layers/z`, the complete override order would be: `base` > `theme` > `custom` > `z` > `a` > your project.
+If you also have `~~/layers/custom`, the priority order is:
+- Your project files (highest)
+- `~~/layers/custom`
+- `../base`
+- `@my-themes/awesome`
+- `github:my-themes/awesome#v1` (lowest)
+
+This means your project files will override any layer, and `~~/layers/custom` will override anything in `extends`.
 
 ## Starter Template
 

package/{2.guide/3.going-further → 3.guide/5.going-further}/9.debugging.md

@@ -36,7 +36,7 @@ It is possible to debug your Nuxt app in your IDE while you are developing it.
 
 ### Example VS Code Debug Configuration
 
-You may need to update the config below with a path to your web browser. For more information, visit the [VS Code documentation about debug configuration](https://go.microsoft.com/fwlink/?linkid=830387).
+You may need to update the config below with a path to your web browser. For more information, visit the [VS Code documentation about debug configuration](https://code.visualstudio.com/docs/debugtest/debugging#_launch-configurations).
 
 ```json5
 {

package/{3.api → 4.api}/1.components/10.nuxt-picture.md

@@ -12,7 +12,7 @@ links:
 
 Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](/docs/4.x/api/components/nuxt-img) but it also allows serving modern formats like `webp` when possible.
 
-Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture).
+Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture).
 
 ## Setup
 

package/{3.api → 4.api}/1.components/11.teleports.md

@@ -4,7 +4,7 @@ description: The <Teleport> component teleports a component to a different locat
 ---
 
 ::warning
-The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.html) expects a CSS selector string or an actual DOM node. Nuxt currently has SSR support for teleports to `#teleports` only, with client-side support for other targets using a `<ClientOnly>` wrapper.
+The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport) expects a CSS selector string or an actual DOM node. Nuxt currently has SSR support for teleports to `#teleports` only, with client-side support for other targets using a `<ClientOnly>` wrapper.
 ::
 
 ## Body Teleport

package/{3.api → 4.api}/1.components/12.nuxt-route-announcer.md

@@ -1,8 +1,6 @@
 ---
 title: '<NuxtRouteAnnouncer>'
 description: 'The <NuxtRouteAnnouncer> component adds a hidden element with the page title to announce route changes to assistive technologies.'
-navigation:
-  badge: New
 links:
   - label: Source
     icon: i-simple-icons-github
@@ -16,7 +14,7 @@ This component is available in Nuxt v3.12+.
 
 ## Usage
 
-Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/4.x/guide/directory-structure/app) or [`app/layouts/`](/docs/4.x/guide/directory-structure/app/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
+Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/4.x/directory-structure/app/app) or [`app/layouts/`](/docs/4.x/directory-structure/app/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
 
 ```vue [app/app.vue]
 <template>

package/{3.api → 4.api}/1.components/13.nuxt-time.md

@@ -1,8 +1,6 @@
 ---
 title: '<NuxtTime>'
 description: 'The <NuxtTime> component displays time in a locale-friendly format with server-client consistency.'
-navigation:
-  badge: New
 links:
   - label: Source
     icon: i-simple-icons-github

package/{3.api → 4.api}/1.components/2.nuxt-page.md

@@ -8,10 +8,10 @@ links:
     size: xs
 ---
 
-`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`app/pages/`](/docs/4.x/guide/directory-structure/app/pages) directory.
+`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`app/pages/`](/docs/4.x/directory-structure/app/pages) directory.
 
 ::note
-`<NuxtPage>` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/interfaces/RouterViewProps.html#interface-routerviewprops) from Vue Router. It should be used instead of `<RouterView>` because the former takes additional care of internal states. Otherwise, `useRoute()` may return incorrect paths.
+`<NuxtPage>` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/interfaces/routerviewprops) from Vue Router. It should be used instead of `<RouterView>` because the former takes additional care of internal states. Otherwise, `useRoute()` may return incorrect paths.
 ::
 
 `<NuxtPage>` includes the following components:
@@ -151,4 +151,4 @@ console.log(attrs.foobar) // Outputs: 123
 </script>
 ```
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/pages"}
+:read-more{to="/docs/4.x/directory-structure/app/pages"}

package/{3.api → 4.api}/1.components/3.nuxt-layout.md

@@ -18,11 +18,11 @@ You can use `<NuxtLayout />` component to activate the `default` layout on `app.
 </template>
 ```
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
+:read-more{to="/docs/4.x/directory-structure/app/layouts"}
 
 ## Props
 
-- `name`: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/4.x/guide/directory-structure/app/layouts) directory.
+- `name`: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/4.x/directory-structure/app/layouts) directory.
   - **type**: `string`
   - **default**: `default`
 
@@ -51,11 +51,11 @@ Please note the layout name is normalized to kebab-case, so if your layout file
 </template>
 ```
 
-::read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
+::read-more{to="/docs/4.x/directory-structure/app/layouts"}
 Read more about dynamic layouts.
 ::
 
-- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/4.x/guide/directory-structure/app/layouts) directory.
+- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`app/layouts/`](/docs/4.x/directory-structure/app/layouts) directory.
   - **type**: `string`
   - **default**: `null`
 
@@ -158,4 +158,4 @@ defineExpose({
 
 ::
 
-:read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
+:read-more{to="/docs/4.x/directory-structure/app/layouts"}

package/{3.api → 4.api}/1.components/4.nuxt-link.md

@@ -244,21 +244,21 @@ export default defineNuxtConfig({
 
 ### RouterLink
 
-When not using `external`, `<NuxtLink>` supports all Vue Router's [`RouterLink` props](https://router.vuejs.org/api/interfaces/RouterLinkProps.html)
+When not using `external`, `<NuxtLink>` supports all Vue Router's [`RouterLink` props](https://router.vuejs.org/api/interfaces/routerlinkprops)
 
-- `to`: Any URL or a [route location object](https://router.vuejs.org/api/type-aliases/RouteLocation.html) from Vue Router
-- `custom`: Whether `<NuxtLink>` should wrap its content in an `<a>` element. It allows taking full control of how a link is rendered and how navigation works when it is clicked. Works the same as [Vue Router's `custom` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-custom)
-- `exactActiveClass`: A class to apply on exact active links. Works the same as [Vue Router's `exactActiveClass` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-exactActiveClass) on internal links. Defaults to Vue Router's default (`"router-link-exact-active"`)
-- `activeClass`: A class to apply on active links. Works the same as [Vue Router's `activeClass` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-activeClass) on internal links. Defaults to Vue Router's default (`"router-link-active"`)
-- `replace`: Works the same as [Vue Router's `replace` prop](https://router.vuejs.org/api/interfaces/RouteLocationOptions.html#Properties-replace) on internal links
-- `ariaCurrentValue`: An `aria-current` attribute value to apply on exact active links. Works the same as [Vue Router's `ariaCurrentValue` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-ariaCurrentValue) on internal links
+- `to`: Any URL or a [route location object](https://router.vuejs.org/api/type-aliases/routelocation) from Vue Router
+- `custom`: Whether `<NuxtLink>` should wrap its content in an `<a>` element. It allows taking full control of how a link is rendered and how navigation works when it is clicked. Works the same as [Vue Router's `custom` prop](https://router.vuejs.org/api/interfaces/routerlinkprops#custom-)
+- `exactActiveClass`: A class to apply on exact active links. Works the same as [Vue Router's `exactActiveClass` prop](https://router.vuejs.org/api/interfaces/routerlinkprops#exactActiveClass-) on internal links. Defaults to Vue Router's default (`"router-link-exact-active"`)
+- `activeClass`: A class to apply on active links. Works the same as [Vue Router's `activeClass` prop](https://router.vuejs.org/api/interfaces/routerlinkprops#activeClass-) on internal links. Defaults to Vue Router's default (`"router-link-active"`)
+- `replace`: Works the same as [Vue Router's `replace` prop](https://router.vuejs.org/api/interfaces/routelocationoptions#replace-) on internal links
+- `ariaCurrentValue`: An `aria-current` attribute value to apply on exact active links. Works the same as [Vue Router's `ariaCurrentValue` prop](https://router.vuejs.org/api/interfaces/routerlinkprops#ariaCurrentValue-) on internal links
 
 ### NuxtLink
 
 - `href`: An alias for `to`. If used with `to`, `href` will be ignored
 - `noRel`: If set to `true`, no `rel` attribute will be added to the external link
 - `external`: Forces the link to be rendered as an `<a>` tag instead of a Vue Router `RouterLink`.
-- `prefetch`: When enabled will prefetch middleware, layouts and payloads (when using [payloadExtraction](/docs/4.x/api/nuxt-config#crossoriginprefetch)) of links in the viewport. Used by the experimental [crossOriginPrefetch](/docs/4.x/api/nuxt-config#crossoriginprefetch) config.
+- `prefetch`: When enabled will prefetch middleware, layouts and payloads (when using [payloadExtraction](/docs/4.x/guide/going-further/experimental-features#payloadextraction)) of links in the viewport. Used by the experimental [crossOriginPrefetch](/docs/4.x/guide/going-further/experimental-features#crossoriginprefetch) config.
 - `prefetchOn`: Allows custom control of when to prefetch links. Possible options are `interaction` and `visibility` (default). You can also pass an object for full control, for example: `{ interaction: true, visibility: true }`. This prop is only used when `prefetch` is enabled (default) and `noPrefetch` is not set.
 - `noPrefetch`: Disables prefetching.
 - `prefetchedClass`: A class to apply to links that have been prefetched.
@@ -276,7 +276,7 @@ Defaults can be overwritten, see [overwriting defaults](/docs/4.x/api/components
 
 ### In Nuxt Config
 
-You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](/docs/4.x/api/nuxt-config#defaults)
+You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](/docs/4.x/guide/going-further/experimental-features#defaults)
 
 ::important
 These options will likely be moved elsewhere in the future, such as into `app.config` or into the `app/` directory.
@@ -336,8 +336,8 @@ function defineNuxtLink (options: NuxtLinkOptions): Component {}
 
 - `componentName`: A name for the component. Default is `NuxtLink`.
 - `externalRelAttribute`: A default `rel` attribute value applied on external links. Defaults to `"noopener noreferrer"`. Set it to `""` to disable
-- `activeClass`: A default class to apply on active links. Works the same as [Vue Router's `linkActiveClass` option](https://router.vuejs.org/api/interfaces/RouterOptions.html#Properties-linkActiveClass). Defaults to Vue Router's default (`"router-link-active"`)
-- `exactActiveClass`: A default class to apply on exact active links. Works the same as [Vue Router's `linkExactActiveClass` option](https://router.vuejs.org/api/interfaces/RouterOptions.html#Properties-linkExactActiveClass). Defaults to Vue Router's default (`"router-link-exact-active"`)
+- `activeClass`: A default class to apply on active links. Works the same as [Vue Router's `linkActiveClass` option](https://router.vuejs.org/api/interfaces/routeroptions#linkActiveClass-). Defaults to Vue Router's default (`"router-link-active"`)
+- `exactActiveClass`: A default class to apply on exact active links. Works the same as [Vue Router's `linkExactActiveClass` option](https://router.vuejs.org/api/interfaces/routeroptions#linkExactActiveClass-). Defaults to Vue Router's default (`"router-link-exact-active"`)
 - `trailingSlash`: 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.
 - `prefetch`: Whether or not to prefetch links by default.
 - `prefetchOn`: Granular control of which prefetch strategies to apply by default.

package/{3.api → 4.api}/1.components/5.nuxt-loading-indicator.md

@@ -10,7 +10,7 @@ links:
 
 ## Usage
 
-Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/4.x/guide/directory-structure/app) or [`app/layouts/`](/docs/4.x/guide/directory-structure/app/layouts).
+Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/4.x/directory-structure/app/app) or [`app/layouts/`](/docs/4.x/directory-structure/app/layouts).
 
 ```vue [app/app.vue]
 <template>

package/{3.api → 4.api}/1.components/6.nuxt-error-boundary.md

@@ -9,7 +9,7 @@ links:
 ---
 
 ::tip
-The `<NuxtErrorBoundary>` uses Vue's [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured) hook under the hood.
+The `<NuxtErrorBoundary>` uses Vue's [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle#onerrorcaptured) hook under the hood.
 ::
 
 ## Events

package/{3.api → 4.api}/1.components/7.nuxt-welcome.md

@@ -4,7 +4,7 @@ description: The <NuxtWelcome> component greets users in new projects made from
 links:
   - label: Source
     icon: i-simple-icons-github
-    to: https://github.com/nuxt/assets/blob/main/packages/templates/templates/welcome/index.html
+    to: https://github.com/nuxt/nuxt/blob/main/packages/ui-templates/templates/welcome/index.html
     size: xs
 ---
 
@@ -21,5 +21,5 @@ Preview the `<NuxtWelcome />` component.
 ::
 
 ::tip
-This component is part of [nuxt/assets](https://github.com/nuxt/assets).
+This component is part of [`@nuxt/ui-templates`](https://github.com/nuxt/nuxt/tree/main/packages/ui-templates) package.
 ::

package/{3.api → 4.api}/2.composables/use-app-config.md

@@ -16,4 +16,4 @@ const appConfig = useAppConfig()
 console.log(appConfig)
 ```
 
-:read-more{to="/docs/4.x/guide/directory-structure/app-config"}
+:read-more{to="/docs/4.x/directory-structure/app/app-config"}