@nuxt/docs 3.20.2 → 3.21.0

package/3.guide/{4.going-further → 6.going-further}/2.hooks.md

@@ -9,7 +9,7 @@ The hooking system is powered by [unjs/hookable](https://github.com/unjs/hookabl
 
 ## Nuxt Hooks (Build Time)
 
-These hooks are available for [Nuxt Modules](/docs/3.x/guide/going-further/modules) and build context.
+These hooks are available for [Nuxt modules](/docs/3.x/guide/modules) and build context.
 
 ### Within `nuxt.config.ts`
 
@@ -33,7 +33,7 @@ export default defineNuxtModule({
 })
 ```
 
-::read-more{to="/docs/api/advanced/hooks#nuxt-hooks-build-time"}
+::read-more{to="/docs/3.x/api/advanced/hooks#nuxt-hooks-build-time"}
 Explore all available Nuxt hooks.
 ::
 
@@ -49,7 +49,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
-::read-more{to="/docs/api/advanced/hooks#app-hooks-runtime"}
+::read-more{to="/docs/3.x/api/advanced/hooks#app-hooks-runtime"}
 Explore all available App hooks.
 ::
 
@@ -70,7 +70,7 @@ export default defineNitroPlugin((nitroApp) => {
 })
 ```
 
-::read-more{to="/docs/api/advanced/hooks#nitro-app-hooks-runtime-server-side"}
+::read-more{to="/docs/3.x/api/advanced/hooks#nitro-app-hooks-runtime-server-side"}
 Learn more about available Nitro lifecycle hooks.
 ::
 
@@ -90,7 +90,7 @@ declare module '#app' {
   }
 }
 
-declare module 'nitropack' {
+declare module 'nitropack/types' {
   interface NitroRuntimeHooks {
     'your-nitro-hook': () => void
   }

package/3.guide/{4.going-further → 6.going-further}/4.kit.md

@@ -3,9 +3,9 @@ title: "Nuxt Kit"
 description: "@nuxt/kit provides features for module authors."
 ---
 
-Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/docs/3.x/api/advanced/hooks), the [Nuxt Interface](/docs/3.x/guide/going-further/internals#the-nuxt-interface) and developing [Nuxt Modules](/docs/3.x/guide/going-further/modules) super easy.
+Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/docs/3.x/api/advanced/hooks), the [Nuxt Interface](/docs/3.x/guide/going-further/internals#the-nuxt-interface) and developing [Nuxt modules](/docs/3.x/guide/modules) super easy.
 
-::read-more{to="/docs/api/kit"}
+::read-more{to="/docs/3.x/api/kit"}
 Discover all Nuxt Kit utilities.
 ::
 
@@ -33,7 +33,7 @@ You can install the latest Nuxt Kit by adding it to the `dependencies` section o
 import { useNuxt } from '@nuxt/kit'
 ```
 
-:read-more{to="/docs/api/kit"}
+:read-more{to="/docs/3.x/api/kit"}
 
 ::note
 Nuxt Kit utilities are only available for modules and not meant to be imported in runtime (components, Vue composables, pages, plugins, or server routes).

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

@@ -9,13 +9,13 @@ 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**.
 ::
 
 ## Nuxt App Interface
 
-::read-more{to="/docs/guide/going-further/internals#the-nuxtapp-interface"}
+::read-more{to="/docs/3.x/guide/going-further/internals#the-nuxtapp-interface"}
 Jump over the `NuxtApp` interface documentation.
 ::
 
@@ -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/3.x/directory-structure/plugins), [Nuxt hooks](/docs/3.x/guide/going-further/hooks), [Nuxt middleware](/docs/3.x/directory-structure/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/3.x/directory-structure/plugins), [Nuxt hooks](/docs/3.x/guide/going-further/hooks), [Nuxt middleware](/docs/3.x/directory-structure/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/3.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/guide/directory-structure/plugins"}
+:read-more{to="/docs/3.x/directory-structure/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/guide/directory-structure/plugins#providing-helpers"}
+::read-more{to="/docs/3.x/directory-structure/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/3.guide/{4.going-further → 6.going-further}/7.layers.md

@@ -5,7 +5,7 @@ description: Nuxt provides a powerful system that allows you to extend the defau
 
 Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.
 
-:read-more{to="/docs/getting-started/layers"}
+:read-more{to="/docs/3.x/getting-started/layers"}
 
 A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) file to indicate it is a layer.
 
@@ -21,14 +21,14 @@ Additionally, certain other files in the layer directory will be auto-scanned an
 - [`middleware/*`](/docs/3.x/directory-structure/middleware)  - Extend the default middleware
 - [`pages/*`](/docs/3.x/directory-structure/pages)        - Extend the default pages
 - [`plugins/*`](/docs/3.x/directory-structure/plugins)        - Extend the default plugins
-- [`server/*`](/docs/3.x/directory-structure/server)       - Extend the default server endpoints & middleware
 - [`utils/*`](/docs/3.x/directory-structure/utils)   - Extend the default utils
-- [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config)- Extend the default nuxt config
 - [`app.config.ts`](/docs/3.x/directory-structure/app-config)  - Extend the default app config
+- [`server/*`](/docs/3.x/directory-structure/server)       - Extend the default server endpoints & middleware
+- [`nuxt.config.ts`](/docs/3.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({
@@ -249,9 +249,35 @@ export default defineNuxtConfig({
 })
 ```
 
+## Disabling Modules from Layers
+
+When extending a layer, you might want to disable certain modules that it includes. You can do this by setting the module's config key to `false` in your Nuxt config.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  extends: ['./base-layer'],
+  // Disable modules from the layer by setting their config key to false
+  image: false, // Disables @nuxt/image
+  pinia: false, // Disables @pinia/nuxt
+})
+```
+
+::note
+The config key is defined by each module. Common examples include `image` for `@nuxt/image`, `pinia` for `@pinia/nuxt`, and `content` for `@nuxt/content`. Check the module's documentation for its specific config key.
+::
+
+This is useful when:
+- A layer includes modules you don't need in your project
+- You want to use a different implementation than what the layer provides
+- You need to disable analytics or other modules in specific environments
+
+::tip
+You can also use this approach to disable modules in your own project - not just those from layers. Setting a module's config key to `false` will prevent its setup function from running while still generating types for the module.
+::
+
 ## Multi-Layer Support for Nuxt Modules
 
-You can use the [`getLayerDirectories`](/docs/api/kit/layers#getlayerdirectories) utility from Nuxt Kit to support custom multi-layer handling for your modules.
+You can use the [`getLayerDirectories`](/docs/3.x/api/kit/layers#getlayerdirectories) utility from Nuxt Kit to support custom multi-layer handling for your modules.
 
 ```ts [modules/my-module.ts]
 import { defineNuxtModule, getLayerDirectories } from 'nuxt/kit'

package/3.guide/{4.going-further → 6.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
 {
@@ -49,7 +49,8 @@ You may need to update the config below with a path to your web browser. For mor
       "request": "launch",
       "name": "client: chrome",
       "url": "http://localhost:3000",
-      "webRoot": "${workspaceFolder}"
+      // this should point to your Nuxt `srcDir`, which is `app` by default
+      "webRoot": "${workspaceFolder}/app"
     },
     {
       "type": "node",

package/4.api/1.components/1.nuxt-client-fallback.md

@@ -14,7 +14,7 @@ links:
 
 Nuxt provides the `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR.
 
-::note{to="/docs/guide/going-further/experimental-features#clientfallback"}
+::note{to="/docs/3.x/guide/going-further/experimental-features#clientfallback"}
 This component is experimental and in order to use it you must enable the `experimental.clientFallback` option in your `nuxt.config`.
 ::
 
@@ -54,6 +54,10 @@ This component is experimental and in order to use it you must enable the `exper
   - **type**: `boolean`
   - **default**: `false`
 
+::warning{icon="i-ph-warning-duotone"}
+The `placeholder` and `fallback` props render content as raw HTML. Do not pass untrusted user input to these props as it may lead to XSS vulnerabilities. Use the `#fallback` or `#placeholder` slots instead for dynamic content that needs proper escaping.
+::
+
 ```vue
 <template>
   <!-- render <span>Hello world</span> server-side if the default slot fails to render -->

package/4.api/1.components/10.nuxt-picture.md

@@ -12,7 +12,7 @@ links:
 
 Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](/docs/3.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/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
@@ -40,4 +40,4 @@ The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.htm
 </template>
 ```
 
-:link-example{to="/docs/examples/advanced/teleport"}
+:link-example{to="/docs/3.x/examples/advanced/teleport"}

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

package/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/4.api/1.components/2.nuxt-page.md

@@ -11,7 +11,7 @@ links:
 `<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`pages/`](/docs/3.x/directory-structure/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:
@@ -89,7 +89,7 @@ definePageMeta({
 </script>
 ```
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/3.x/examples/routing/pages"}
 
 ## Page's Ref
 
@@ -151,4 +151,4 @@ console.log(attrs.foobar) // Outputs: 123
 </script>
 ```
 
-:read-more{to="/docs/guide/directory-structure/pages"}
+:read-more{to="/docs/3.x/directory-structure/pages"}

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

@@ -18,12 +18,12 @@ You can use `<NuxtLayout />` component to activate the `default` layout on `app.
 </template>
 ```
 
-:read-more{to="/docs/guide/directory-structure/layouts"}
+:read-more{to="/docs/3.x/directory-structure/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 [`layouts/`](/docs/3.x/directory-structure/layouts) directory.
-  - **type**: `string`
+- `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 [`layouts/`](/docs/3.x/directory-structure/layouts) directory, or `false` to disable the layout.
+  - **type**: `string | false`
   - **default**: `default`
 
 ```vue [pages/index.vue]
@@ -51,7 +51,7 @@ Please note the layout name is normalized to kebab-case, so if your layout file
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/layouts"}
+::read-more{to="/docs/3.x/directory-structure/layouts"}
 Read more about dynamic layouts.
 ::
 
@@ -116,7 +116,7 @@ console.log(layoutCustomProps.title) // I am a custom layout
 
 ::
 
-:read-more{to="/docs/getting-started/transitions"}
+:read-more{to="/docs/3.x/getting-started/transitions"}
 
 ## Layout's Ref
 
@@ -158,4 +158,4 @@ defineExpose({
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/layouts"}
+:read-more{to="/docs/3.x/directory-structure/layouts"}

package/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/3.x/api/nuxt-config#crossoriginprefetch)) of links in the viewport. Used by the experimental [crossOriginPrefetch](/docs/3.x/api/nuxt-config#crossoriginprefetch) config.
+- `prefetch`: When enabled will prefetch middleware, layouts and payloads (when using [payloadExtraction](/docs/3.x/guide/going-further/experimental-features#payloadextraction)) of links in the viewport. Used by the experimental [crossOriginPrefetch](/docs/3.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.
@@ -269,14 +269,14 @@ When not using `external`, `<NuxtLink>` supports all Vue Router's [`RouterLink`
 - `rel`: A `rel` attribute value to apply on the link. Defaults to `"noopener noreferrer"` for external links.
 
 ::tip
-Defaults can be overwritten, see [overwriting defaults](#overwriting-defaults) if you want to change them.
+Defaults can be overwritten, see [overwriting defaults](/docs/3.x/api/components/nuxt-link#overwriting-defaults) if you want to change them.
 ::
 
 ## Overwriting Defaults
 
 ### In Nuxt Config
 
-You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](/docs/3.x/api/nuxt-config#defaults)
+You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](/docs/3.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,11 +336,11 @@ 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.
 - `prefetchedClass`: A default class to apply to links that have been prefetched.
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/3.x/examples/routing/pages"}

package/4.api/1.components/5.nuxt-loading-indicator.md

@@ -21,7 +21,7 @@ Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/3.x/directory-structure/
 </template>
 ```
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/3.x/examples/routing/pages"}
 
 ## Slots
 

package/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
@@ -43,7 +43,7 @@ The `<NuxtErrorBoundary>` uses Vue's [`onErrorCaptured`](https://vuejs.org/api/c
   </template>
   ```
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/3.x/getting-started/error-handling"}
 
 ## Examples
 

package/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/4.api/1.components/8.nuxt-island.md

@@ -32,13 +32,20 @@ Server only components use `<NuxtIsland>` under the hood
   - **type**: `Record<string, any>`
 - `source`: Remote source to call the island to render.
   - **type**: `string`
-- **dangerouslyLoadClientComponents**: Required to load components from a remote source.
+- **dangerouslyLoadClientComponents**: Required to load client components from a remote source.
   - **type**: `boolean`
   - **default**: `false`
 
 ::note
 Remote islands need `experimental.componentIslands` to be `'local+remote'` in your `nuxt.config`.
-It is strongly discouraged to enable `dangerouslyLoadClientComponents` as you can't trust a remote server's javascript.
+::
+
+::warning{icon="i-ph-warning-duotone"}
+Using the `source` prop to render content from a remote server is inherently dangerous. When you specify a remote `source`, you are fully trusting that server to provide safe HTML content that will be rendered directly in your application.
+
+This is similar to using `v-html` with external content - the remote server can inject any HTML, including potentially malicious content. **Only use `source` with servers you fully trust and control.**
+
+The `dangerouslyLoadClientComponents` prop controls an additional layer of risk: whether to also download and execute client components from the remote source. Even with `dangerouslyLoadClientComponents` disabled (the default), you are still trusting the remote server's HTML output.
 ::
 
 ::note

package/4.api/2.composables/use-app-config.md

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

package/4.api/2.composables/use-async-data.md

@@ -25,8 +25,8 @@ const { data, status, pending, error, refresh, clear } = await useAsyncData(
 </script>
 ```
 
-::warning
-If you're using a custom useAsyncData wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/3.x/guide/recipes/custom-usefetch#custom-usefetch) for more information on how to make a custom async data fetcher.
+::warning{to="/docs/3.x/guide/recipes/custom-usefetch#custom-usefetchuseasyncdata"}
+If you're using a custom `useAsyncData` wrapper, do not await it in the composable as that can cause unexpected behavior. See recipe for custom async data fetcher.
 ::
 
 ::note
@@ -133,7 +133,7 @@ The handler signal will be aborted when:
 [`useAsyncData`](/docs/3.x/api/composables/use-async-data) is a reserved function name transformed by the compiler, so you should not name your own function [`useAsyncData`](/docs/3.x/api/composables/use-async-data).
 ::
 
-:read-more{to="/docs/getting-started/data-fetching#useasyncdata"}
+:read-more{to="/docs/3.x/getting-started/data-fetching#useasyncdata"}
 
 ## Params
 
@@ -167,7 +167,7 @@ The `handler` function should be **side-effect free** to ensure predictable beha
 Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience.
 ::
 
-::read-more{to="/docs/api/composables/use-lazy-async-data"}
+::read-more{to="/docs/3.x/api/composables/use-lazy-async-data"}
 You can use `useLazyAsyncData` to have the same behavior as `lazy: true` with `useAsyncData`.
 ::
 
@@ -280,4 +280,4 @@ interface AsyncDataExecuteOptions {
 type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 ```
 
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/3.x/getting-started/data-fetching"}

package/4.api/2.composables/use-cookie.md

@@ -54,21 +54,21 @@ export function useCookie<T = string | null | undefined> (
 
 Most of the options will be directly passed to the [cookie](https://github.com/jshttp/cookie) package.
 
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `decode` | `(value: string) => T` | `decodeURIComponent` + [destr](https://github.com/unjs/destr). | Custom function to decode the cookie value.  Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to decode a previously encoded cookie value into a JavaScript string or other object. <br/> **Note:** If an error is thrown from this function, the original, non-decoded cookie value will be returned as the cookie's value. |
-| `encode` | `(value: T) => string` | `JSON.stringify` + `encodeURIComponent` | Custom function to encode the cookie value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to encode a value into a string suited for a cookie's value. |
-| `default` | `() => T \| Ref<T>` | `undefined` | Function returning the default value if the cookie does not exist.  The function can also return a `Ref`. |
-| `watch` | `boolean \| 'shallow'` | `true`  | Whether to watch for changes and update the cookie. `true` for deep watch, `'shallow'` for shallow watch, i.e. data changes for only top level properties, `false` to disable. <br/> **Note:** Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/3.x/api/utils/refresh-cookie). |
-| `readonly` | `boolean` | `false` | If `true`, disables writing to the cookie. |
-| `maxAge` | `number` | `undefined` | Max age in seconds for the cookie, i.e. the value for the [`Max-Age` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.2). The given number will be converted to an integer by rounding down. By default, no maximum age is set. |
-| `expires` | `Date` | `undefined` | Expiration date for the cookie. By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and will delete it on a condition like exiting a web browser application. <br/> **Note:** The [cookie storage model specification](https://tools.ietf.org/html/rfc6265#section-5.3) states that if both `expires` and `maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this, so if both are set, they should point to the same date and time! <br/>If neither of `expires` and `maxAge` is set, the cookie will be session-only and removed when the user closes their browser. |
-| `httpOnly` | `boolean` | `false` | Sets the HttpOnly attribute. <br/> **Note:** Be careful when setting this to `true`, as compliant clients will not allow client-side JavaScript to see the cookie in `document.cookie`. |
-| `secure` | `boolean` | `false` | Sets the [`Secure` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.5). <br/>**Note:** Be careful when setting this to `true`, as compliant clients will not send the cookie back to the server in the future if the browser does not have an HTTPS connection. This can lead to hydration errors. |
-| `partitioned` | `boolean` | `false` | Sets the [`Partitioned` `Set-Cookie` attribute](https://datatracker.ietf.org/doc/html/draft-cutler-httpbis-partitioned-cookies#section-2.1). <br/>**Note:** This is an attribute that has not yet been fully standardized, and may change in the future. <br/>This also means many clients may ignore this attribute until they understand it.<br/>More information can be found in the [proposal](https://github.com/privacycg/CHIPS). |
-| `domain` | `string` | `undefined` | Sets the [`Domain` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.3). By default, no domain is set, and most clients will consider applying the cookie only to the current domain. |
-| `path` | `string` | `'/'` | Sets the [`Path` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.4). By default, the path is considered the ["default path"](https://tools.ietf.org/html/rfc6265#section-5.1.4). |
-| `sameSite` | `boolean \| string` | `undefined` | Sets the [`SameSite` `Set-Cookie` attribute](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1.2.7). <br/>- `true` will set the `SameSite` attribute to `Strict` for strict same-site enforcement.<br/>- `false` will not set the `SameSite` attribute.<br/>- `'lax'` will set the `SameSite` attribute to `Lax` for lax same-site enforcement.<br/>- `'none'` will set the `SameSite` attribute to `None` for an explicit cross-site cookie.<br/>- `'strict'` will set the `SameSite` attribute to `Strict` for strict same-site enforcement. |
+| Property      | Type                   | Default                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+|---------------|------------------------|----------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `decode`      | `(value: string) => T` | `decodeURIComponent` + [destr](https://github.com/unjs/destr). | Custom function to decode the cookie value.  Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to decode a previously encoded cookie value into a JavaScript string or other object. <br/> **Note:** If an error is thrown from this function, the original, non-decoded cookie value will be returned as the cookie's value.                                                                                                                                                                                                                                                       |
+| `encode`      | `(value: T) => string` | `JSON.stringify` + `encodeURIComponent`                        | Custom function to encode the cookie value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to encode a value into a string suited for a cookie's value.                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `default`     | `() => T \| Ref<T>`    | `undefined`                                                    | Function returning the default value if the cookie does not exist.  The function can also return a `Ref`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `watch`       | `boolean \| 'shallow'` | `true`                                                         | Whether to watch for changes and update the cookie. `true` for deep watch, `'shallow'` for shallow watch, i.e. data changes for only top level properties, `false` to disable. <br/> **Note:** Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/3.x/api/utils/refresh-cookie).                                                                                                                                                                                                                                                                                                                           |
+| `readonly`    | `boolean`              | `false`                                                        | If `true`, disables writing to the cookie.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `maxAge`      | `number`               | `undefined`                                                    | Max age in seconds for the cookie, i.e. the value for the [`Max-Age` `Set-Cookie` attribute](https://datatracker.ietf.org/doc/html/rfc6265#section-5.2.2). The given number will be converted to an integer by rounding down. By default, no maximum age is set.                                                                                                                                                                                                                                                                                                                                                                                   |
+| `expires`     | `Date`                 | `undefined`                                                    | Expiration date for the cookie. By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and will delete it on a condition like exiting a web browser application. <br/> **Note:** The [cookie storage model specification](https://datatracker.ietf.org/doc/html/rfc6265#section-5.3) states that if both `expires` and `maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this, so if both are set, they should point to the same date and time! <br/>If neither of `expires` and `maxAge` is set, the cookie will be session-only and removed when the user closes their browser. |
+| `httpOnly`    | `boolean`              | `false`                                                        | Sets the HttpOnly attribute. <br/> **Note:** Be careful when setting this to `true`, as compliant clients will not allow client-side JavaScript to see the cookie in `document.cookie`.                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `secure`      | `boolean`              | `false`                                                        | Sets the [`Secure` `Set-Cookie` attribute](https://datatracker.ietf.org/doc/html/rfc6265#section-5.2.5). <br/>**Note:** Be careful when setting this to `true`, as compliant clients will not send the cookie back to the server in the future if the browser does not have an HTTPS connection. This can lead to hydration errors.                                                                                                                                                                                                                                                                                                                |
+| `partitioned` | `boolean`              | `false`                                                        | Sets the [`Partitioned` `Set-Cookie` attribute](https://datatracker.ietf.org/doc/html/draft-cutler-httpbis-partitioned-cookies#section-2.1). <br/>**Note:** This is an attribute that has not yet been fully standardized, and may change in the future. <br/>This also means many clients may ignore this attribute until they understand it.<br/>More information can be found in the [proposal](https://github.com/privacycg/CHIPS).                                                                                                                                                                                                            |
+| `domain`      | `string`               | `undefined`                                                    | Sets the [`Domain` `Set-Cookie` attribute](https://datatracker.ietf.org/doc/html/rfc6265#section-5.2.3). By default, no domain is set, and most clients will consider applying the cookie only to the current domain.                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `path`        | `string`               | `'/'`                                                          | Sets the [`Path` `Set-Cookie` attribute](https://datatracker.ietf.org/doc/html/rfc6265#section-5.2.4). By default, the path is considered the ["default path"](https://datatracker.ietf.org/doc/html/rfc6265#section-5.1.4).                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `sameSite`    | `boolean \| string`    | `undefined`                                                    | Sets the [`SameSite` `Set-Cookie` attribute](https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1.2.7). <br/>- `true` will set the `SameSite` attribute to `Strict` for strict same-site enforcement.<br/>- `false` will not set the `SameSite` attribute.<br/>- `'lax'` will set the `SameSite` attribute to `Lax` for lax same-site enforcement.<br/>- `'none'` will set the `SameSite` attribute to `None` for an explicit cross-site cookie.<br/>- `'strict'` will set the `SameSite` attribute to `Strict` for strict same-site enforcement.                                                                    |
 
 ## Return Values
 
@@ -180,4 +180,4 @@ export default defineEventHandler((event) => {
 })
 ```
 
-:link-example{to="/docs/examples/advanced/use-cookie"}
+:link-example{to="/docs/3.x/examples/advanced/use-cookie"}

package/4.api/2.composables/use-error.md

@@ -22,8 +22,8 @@ You can use this composable in your components, pages, or plugins to access or r
 
 ```ts
 interface NuxtError<DataT = unknown> {
-  statusCode: number
-  statusMessage: string
+  status: number
+  statusText: string
   message: string
   data?: DataT
   error?: true
@@ -52,4 +52,4 @@ if (error.value) {
 </script>
 ```
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/3.x/getting-started/error-handling"}