@nuxt/docs-nightly 4.5.1-29752449.30d24817 → 4.5.2-2610052030-052d82e

package/2.directory-structure/1.app/1.components.md

@@ -44,6 +44,21 @@ If you have a component in nested directories such as:
 For clarity, we recommend that the component's filename matches its name. So, in the example above, you could rename `Button.vue` to be `BaseFooButton.vue`.
 ::
 
+If you want to group components in a directory without affecting their name, you can use the parenthesis `(` `)` to name the grouping directory.
+
+```bash [Grouping Directory]
+-| components/
+---| base/
+-----| (foo)/
+-------| Button.vue
+```
+
+... then the component's name will skip the grouping directory, resulting in:
+
+```html
+<BaseButton />
+```
+
 If you want to auto-import components based only on its name, not path, then you need to set `pathPrefix` option to `false` using extended form of the configuration object:
 
 ```ts twoslash [nuxt.config.ts]
@@ -377,7 +392,7 @@ If `pattern` is specified, the `extensions` option has no effect, so make sure y
 
 ## npm Packages
 
-If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/4.x/api/kit/components#addcomponent) in a [local module](/docs/4.x/directory-structure/modules) to register them.
+If you want to auto-import components from an npm package, you can use [`addComponent`](/docs/api/kit/components#addcomponent) in a [local module](/docs/directory-structure/modules) to register them.
 
 ::code-group
 
@@ -409,7 +424,7 @@ export default defineNuxtModule({
 
 ## Component Extensions
 
-By default, any file with an extension specified in the [extensions key of `nuxt.config.ts`](/docs/4.x/api/nuxt-config#extensions) is treated as a component.
+By default, any file with an extension specified in the [extensions key of `nuxt.config.ts`](/docs/api/nuxt-config#extensions) is treated as a component.
 If you need to restrict the file extensions that should be registered as components, you can use the extended form of the components directory declaration and its `extensions` key:
 
 ```ts twoslash [nuxt.config.ts]
@@ -449,7 +464,7 @@ This feature only works with Nuxt auto-imports and `#components` imports. Explic
 `.client` components are rendered only after being mounted. To access the rendered template using `onMounted()`, add `await nextTick()` in the callback of the `onMounted()` hook.
 ::
 
-::read-more{to="/docs/4.x/api/components/client-only"}
+::read-more{to="/docs/api/components/client-only"}
 You can also achieve a similar result with the `<ClientOnly>` component.
 ::
 
@@ -457,7 +472,7 @@ You can also achieve a similar result with the `<ClientOnly>` component.
 
 Server components allow server-rendering individual components within your client-side apps. It's possible to use server components within Nuxt, even if you are generating a static site. That makes it possible to build complex sites that mix dynamic components, server-rendered HTML and even static chunks of markup.
 
-Server components can either be used on their own or paired with a [client component](/docs/4.x/directory-structure/app/components#paired-with-a-client-component).
+Server components can either be used on their own or paired with a [client component](/docs/directory-structure/app/components#paired-with-a-client-component).
 
 :video-accordion{title="Watch Learn Vue video about Nuxt Server Components" videoId="u1yyXe86xJM"}
 
@@ -471,17 +486,7 @@ Standalone server components will always be rendered on the server, also known a
 
 When their props update, this will result in a network request that will update the rendered HTML in-place.
 
-Server components are currently experimental and in order to use them, you need to enable the 'component islands' feature in your nuxt.config:
-
-```ts twoslash [nuxt.config.ts]
-export default defineNuxtConfig({
-  experimental: {
-    componentIslands: true,
-  },
-})
-```
-
-Now you can register server-only components with the `.server` suffix and use them anywhere in your application automatically.
+Register server-only components with the `.server` suffix and use them anywhere in your application automatically.
 
 ```bash [Directory Structure]
 -| components/
@@ -500,102 +505,14 @@ Now you can register server-only components with the `.server` suffix and use th
 </template>
 ```
 
-Server-only components use [`<NuxtIsland>`](/docs/4.x/api/components/nuxt-island) under the hood, meaning that `lazy` prop and `#fallback` slot are both passed down to it.
+Server-only components use [`<NuxtIsland>`](/docs/api/components/nuxt-island) under the hood, meaning that `lazy` prop and `#fallback` slot are both passed down to it.
 
 ::warning
 Server components (and islands) must have a single root element. (HTML comments are considered elements as well.)
 ::
 
-::warning
-Props are passed to server components via URL query parameters, and are therefore limited by the possible length of a URL, so be careful not to pass enormous amounts of data to server components via props.
-::
-
-::note
-Server component props come from the request (URL query or body), so treat them as untrusted input. Nuxt rejects the props most likely to leak through unintentionally: a top-level `as` that the island does not declare (an undeclared prop falls through as an attribute onto the island's root), and, with `vue.runtimeCompiler` enabled, a `template` anywhere in the props. Beyond that, avoid feeding props you have not validated into dynamic component resolution (`<component :is>`{lang=vue}, `h()`, `resolveDynamicComponent()`, or a polymorphic `as` / `asChild` prop), since a string can resolve to any registered component or HTML element.
-
-Props a component does not declare fall through as attributes onto its single root element, so an island whose root is a polymorphic component (e.g. from `reka-ui` / `@nuxt/ui`) can receive attributes you did not bind. Set `defineOptions({ inheritAttrs: false })`{lang=ts} on such islands, or declare the props you accept.
-
-To switch components based on caller input, map a discriminator through an allowlist of imported components rather than passing the raw prop:
-
-```vue
-<script setup lang="ts">
-import type { Component } from 'vue'
-import CardA from './CardA.vue'
-import CardB from './CardB.vue'
-
-const props = defineProps<{ variant: string }>()
-const allowed: Record<string, Component> = { a: CardA, b: CardB }
-const component = allowed[props.variant] ?? CardA
-</script>
-
-<template>
-  <component :is="component" />
-</template>
-```
-::
-
-::warning
-Be careful when nesting islands within other islands as each island adds some extra overhead.
-::
-
-::warning
-Most features for server-only components and island components, such as slots and client components, are only available for single file components.
-::
-
-#### Client components within server components
-
-::note
-This feature needs `experimental.componentIslands.selectiveClient` within your configuration to be true.
-::
-
-You can partially hydrate a component by setting a `nuxt-client` attribute on the component you wish to be loaded client-side.
-
-```vue [app/components/ServerWithClient.vue]
-<template>
-  <div>
-    <HighlightedMarkdown markdown="# Headline" />
-    <!-- Counter will be loaded and hydrated client-side -->
-    <Counter
-      nuxt-client
-      :count="5"
-    />
-  </div>
-</template>
-```
-
-::note
-This only works within a server component. Slots for client components are working only with `experimental.componentIsland.selectiveClient` set to `'deep'` and since they are rendered server-side, they are not interactive once client-side.
-::
-
-::warning
-Use `nuxt-client` only on local `.vue` SFCs. Built-ins like [`<NuxtLink>`](/docs/4.x/api/components/nuxt-link) skip the islands transform. After client navigation you may see `Failed to locate Teleport target`, or the link disappears with no error. Wrap the built-in in your own `.vue` file and put `nuxt-client` on that wrapper, or drop `nuxt-client` from the built-in. See [#29251](https://github.com/nuxt/nuxt/issues/29251) and [#26002](https://github.com/nuxt/nuxt/issues/26002).
-::
-
-#### Server Component Context
-
-When rendering a server-only or island component, `<NuxtIsland>` makes a fetch request which comes back with a `NuxtIslandResponse`. (This is an internal request if rendered on the server, or a request that you can see in the network tab if it's rendering on client-side navigation.)
-
-This means:
-
-* A new Vue app will be created server-side to create the `NuxtIslandResponse`.
-* A new 'island context' will be created while rendering the component.
-* You can't access the 'island context' from the rest of your app and you can't access the context of the rest of your app from the island component. In other words, the server component or island is _isolated_ from the rest of your app.
-* Your plugins will run again when rendering the island, unless they have `env: { islands: false }` set (which you can do in an object-syntax plugin).
-
-::important
-Route middleware does not run when rendering island components. Middleware is a routing concept that applies to pages, not components, and is not designed to control component rendering.
-::
-
-::important
-`useRoute()` and other `vue-router` composables do not track the current page route inside a server (island) component. The island is rendered in its own isolated Vue app keyed only on its props (and any explicit context), which is what keeps islands cacheable independently of the page they are rendered on. Inside an island, `useRoute()` will reflect the island's own request, not the page the user is on.
-
-If an island needs information about the current route, pass it in explicitly &mdash; either as props from the parent component, or via the `context` prop on `<NuxtIsland>` (read inside the island from `nuxtApp.ssrContext.islandContext`).
-::
-
-Within an island component, you can access its island context through `nuxtApp.ssrContext.islandContext`. Note that while island components are still marked as experimental, the format of this context may change.
-
-::note
-Slots can be interactive and are wrapped within a `<div>` with `display: contents;`
+::read-more{to="/docs/guide/concepts/server-components"}
+Read more about how islands are rendered, the isolated island context, selective hydration with `nuxt-client`, slots, caching and current limitations in the dedicated server components guide.
 ::
 
 ### Paired with a Client component
@@ -621,14 +538,14 @@ In this case, the `.server` + `.client` components are two 'halves' of a compone
 
 There are a number of components that Nuxt provides, including `<ClientOnly>` and `<DevOnly>`. You can read more about them in the API documentation.
 
-::read-more{to="/docs/4.x/api"}
+::read-more{to="/docs/api"}
 ::
 
 ## Library Authors
 
 Making Vue component libraries with automatic tree-shaking and component registration is super easy. ✨
 
-You can use the [`addComponentsDir`](/docs/4.x/api/kit/components#addcomponentsdir) method provided from the `@nuxt/kit` to register your components directory in your Nuxt module.
+You can use the [`addComponentsDir`](/docs/api/kit/components#addcomponentsdir) method provided from the `@nuxt/kit` to register your components directory in your Nuxt module.
 
 Imagine a directory structure like this:
 
@@ -683,4 +600,4 @@ export default defineNuxtConfig({
 
 It will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.
 
-:link-example{to="/docs/4.x/examples/features/auto-imports"}
+:link-example{to="/docs/examples/features/auto-imports"}

package/2.directory-structure/1.app/1.composables.md

@@ -42,15 +42,15 @@ const foo = useFoo()
 The `app/composables/` directory in Nuxt does not provide any additional reactivity capabilities to your code. Instead, any reactivity within composables is achieved using Vue's Composition API mechanisms, such as ref and reactive. Note that reactive code is also not limited to the boundaries of the `app/composables/` directory. You are free to employ reactivity features wherever they're needed in your application.
 ::
 
-:read-more{to="/docs/4.x/guide/concepts/auto-imports"}
+:read-more{to="/docs/guide/concepts/auto-imports"}
 
-:link-example{to="/docs/4.x/examples/features/auto-imports"}
+:link-example{to="/docs/examples/features/auto-imports"}
 
 ## Types
 
 Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the types.
 
-Be aware that you have to run [`nuxt prepare`](/docs/4.x/api/commands/prepare), [`nuxt dev`](/docs/4.x/api/commands/dev) or [`nuxt build`](/docs/4.x/api/commands/build) in order to let Nuxt generate the types.
+Be aware that you have to run [`nuxt prepare`](/docs/api/commands/prepare), [`nuxt dev`](/docs/api/commands/dev) or [`nuxt build`](/docs/api/commands/build) in order to let Nuxt generate the types.
 
 ::note
 If you create a composable without having the dev server running, TypeScript will throw an error, such as `Cannot find name 'useBar'.`
@@ -71,7 +71,7 @@ export const useFoo = () => {
 
 ### Access Plugin Injections
 
-You can access [plugin injections](/docs/4.x/directory-structure/app/plugins#providing-helpers) from composables:
+You can access [plugin injections](/docs/directory-structure/app/plugins#providing-helpers) from composables:
 
 ```ts [app/composables/test.ts]
 export const useHello = () => {
@@ -82,7 +82,7 @@ export const useHello = () => {
 
 ## How Files Are Scanned
 
-Nuxt only scans files at the top level of the [`app/composables/` directory](/docs/4.x/directory-structure/app/composables), e.g.:
+Nuxt only scans files at the top level of the [`app/composables/` directory](/docs/directory-structure/app/composables), e.g.:
 
 ```bash [Directory Structure]
 -| composables/

package/2.directory-structure/1.app/1.layouts.md

@@ -11,7 +11,7 @@ For best performance, components placed in this directory will be automatically
 
 ## Enable Layouts
 
-Layouts are enabled by adding [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout) to your [`app.vue`](/docs/4.x/directory-structure/app/app):
+Layouts are enabled by adding [`<NuxtLayout>`](/docs/api/components/nuxt-layout) to your [`app.vue`](/docs/directory-structure/app/app):
 
 ```vue [app/app.vue]
 <template>
@@ -22,7 +22,7 @@ Layouts are enabled by adding [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-lay
 ```
 
 To use a layout:
-- Set a `layout` property in your page with [definePageMeta](/docs/4.x/api/utils/define-page-meta).
+- Set a `layout` property in your page with [definePageMeta](/docs/api/utils/define-page-meta).
 - Set the `name` prop of `<NuxtLayout>`.
 - Set the `appLayout` property in route rules.
 
@@ -35,7 +35,7 @@ If no layout is specified, `app/layouts/default.vue` will be used.
 ::
 
 ::important
-If you only have a single layout in your application, we recommend using [`app.vue`](/docs/4.x/directory-structure/app/app) instead.
+If you only have a single layout in your application, we recommend using [`app.vue`](/docs/directory-structure/app/app) instead.
 ::
 
 ::important
@@ -81,11 +81,11 @@ definePageMeta({
 </script>
 ```
 
-::read-more{to="/docs/4.x/directory-structure/app/pages#page-metadata"}
+::read-more{to="/docs/directory-structure/app/pages#page-metadata"}
 Learn more about `definePageMeta`.
 ::
 
-You can directly override the default layout for all pages using the `name` property of [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout):
+You can directly override the default layout for all pages using the `name` property of [`<NuxtLayout>`](/docs/api/components/nuxt-layout):
 
 ```vue [app/app.vue]
 <script setup lang="ts">
@@ -116,11 +116,11 @@ File | Layout Name
 `~/layouts/desktop-base/DesktopBase.vue` | `desktop-base`
 `~/layouts/desktop/Desktop.vue` | `desktop`
 
-:link-example{to="/docs/4.x/examples/features/layouts"}
+:link-example{to="/docs/examples/features/layouts"}
 
 ## Changing the Layout Dynamically
 
-You can also use the [`setPageLayout`](/docs/4.x/api/utils/set-page-layout) helper to change the layout dynamically:
+You can also use the [`setPageLayout`](/docs/api/utils/set-page-layout) helper to change the layout dynamically:
 
 ```vue twoslash [app/pages/index.vue]
 <script setup lang="ts">
@@ -166,7 +166,7 @@ export default defineNuxtConfig({
 This is useful when you want to manage layouts centrally in your configuration rather than in each page file, or when you need to apply layouts to routes that don't have corresponding page components (such as catchall pages which might match many paths).
 ::
 
-:link-example{to="/docs/4.x/examples/features/layouts"}
+:link-example{to="/docs/examples/features/layouts"}
 
 ## Passing Props to Layouts :badge[+4.4]{color="primary" class="align-middle"}
 
@@ -221,7 +221,7 @@ Props are fully typed based on your layout's `defineProps`. You'll get autocompl
 
 ### Via `setPageLayout`
 
-You can also pass props when changing the layout dynamically with [`setPageLayout`](/docs/4.x/api/utils/set-page-layout):
+You can also pass props when changing the layout dynamically with [`setPageLayout`](/docs/api/utils/set-page-layout):
 
 ```ts
 setPageLayout('panel', { sidebar: true, title: 'Dashboard' })
@@ -271,5 +271,5 @@ definePageMeta({
 ::
 
 ::important
-If you use `<NuxtLayout>` within your pages, make sure it is not the root element (or [disable layout/page transitions](/docs/4.x/getting-started/transitions#disable-transitions)).
+If you use `<NuxtLayout>` within your pages, make sure it is not the root element (or [disable layout/page transitions](/docs/getting-started/transitions#disable-transitions)).
 ::

package/2.directory-structure/1.app/1.middleware.md

@@ -13,14 +13,18 @@ There are three kinds of route middleware:
 2. Named route middleware, placed in the `app/middleware/` and automatically loaded via asynchronous import when used on a page.
 3. Global route middleware, placed in the `app/middleware/` with a `.global` suffix and is run on every route change.
 
-The first two kinds of route middleware can be defined in [`definePageMeta`](/docs/4.x/api/utils/define-page-meta).
+The first two kinds of route middleware can be defined in [`definePageMeta`](/docs/api/utils/define-page-meta).
 
 ::note
 Name of middleware are normalized to kebab-case: `myMiddleware` becomes `my-middleware`.
 ::
 
 ::note
-Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from [server middleware](/docs/4.x/directory-structure/server#server-middleware), which are run in the Nitro server part of your app.
+Only files at the top level of the directory (or index files within any subdirectories) are registered. An index file takes its name from the folder that contains it: `middleware/auth/index.ts` is registered as `auth`.
+::
+
+::note
+Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from [server middleware](/docs/directory-structure/server#server-middleware), which are run in the Nitro server part of your app.
 ::
 
 :video-accordion{title="Watch a video from Vue School on all 3 kinds of middleware" videoId="761471577" platform="vimeo"}
@@ -45,8 +49,8 @@ export default defineNuxtRouteMiddleware((to, from) => {
 
 Nuxt provides two globally available helpers that can be returned directly from the middleware.
 
-1. [`navigateTo`](/docs/4.x/api/utils/navigate-to) - Redirects to the given route
-2. [`abortNavigation`](/docs/4.x/api/utils/abort-navigation) - Aborts the navigation, with an optional error message.
+1. [`navigateTo`](/docs/api/utils/navigate-to) - Redirects to the given route
+2. [`abortNavigation`](/docs/api/utils/abort-navigation) - Aborts the navigation, with an optional error message.
 
 Unlike [navigation guards](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards) from `vue-router`, a third `next()` argument is not passed, and **redirect or route cancellation is handled by returning a value from the middleware**.
 
@@ -58,8 +62,8 @@ Possible return values are:
 * `return abortNavigation()` - stops the current navigation
 * `return abortNavigation(error)` - rejects the current navigation with an error
 
-:read-more{to="/docs/4.x/api/utils/navigate-to"}
-:read-more{to="/docs/4.x/api/utils/abort-navigation"}
+:read-more{to="/docs/api/utils/navigate-to"}
+:read-more{to="/docs/api/utils/abort-navigation"}
 
 ::important
 We recommend using the helper functions above for performing redirects or stopping navigation. Other possible return values described in [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards) may work but there may be breaking changes in future.
@@ -145,12 +149,12 @@ export default defineNuxtRouteMiddleware((to) => {
 This is true even if you throw an error in your middleware on the server, and an error page is rendered. The middleware will still run again in the browser.
 
 ::note
-Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](/docs/4.x/getting-started/error-handling#useerror) in middleware to check if an error is being handled.
+Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](/docs/getting-started/error-handling#useerror) in middleware to check if an error is being handled.
 ::
 
 ## Accessing Route in Middleware
 
-Always use the `to` and `from` parameters in your middleware to access the next and previous routes. Avoid using the [`useRoute()`](/docs/4.x/api/composables/use-route) composable in this context altogether.
+Always use the `to` and `from` parameters in your middleware to access the next and previous routes. Avoid using the [`useRoute()`](/docs/api/composables/use-route) composable in this context altogether.
 There is **no concept of a "current route" in middleware**, as middleware can abort a navigation or redirect to a different route. The `useRoute()` composable will always be inaccurate in this context.  
 
 ::warning
@@ -188,7 +192,7 @@ export function callsRouteInternally () {
 
 ## Adding Middleware Dynamically
 
-It is possible to add global or named route middleware manually using the [`addRouteMiddleware()`](/docs/4.x/api/utils/add-route-middleware) helper function, such as from within a plugin.
+It is possible to add global or named route middleware manually using the [`addRouteMiddleware()`](/docs/api/utils/add-route-middleware) helper function, such as from within a plugin.
 
 ```ts twoslash
 export default defineNuxtPlugin(() => {
@@ -222,7 +226,7 @@ definePageMeta({
 
 Now, before navigation to that page can complete, the `auth` route middleware will be run.
 
-:link-example{to="/docs/4.x/examples/routing/middleware"}
+:link-example{to="/docs/examples/routing/middleware"}
 
 ## Setting Middleware at Build Time
 

package/2.directory-structure/1.app/1.pages.md

@@ -6,17 +6,17 @@ navigation.icon: i-vscode-icons-folder-type-view
 ---
 
 ::note
-To reduce your application's bundle size, this directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [`app.vue`](/docs/4.x/directory-structure/app/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`router.options.ts`](/docs/4.x/guide/recipes/custom-routing#using-routeroptions).
+To reduce your application's bundle size, this directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [`app.vue`](/docs/directory-structure/app/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`router.options.ts`](/docs/guide/recipes/custom-routing#using-routeroptions).
 ::
 
 ## Usage
 
-Pages are Vue components and can have any [valid extension](/docs/4.x/api/nuxt-config#extensions) that Nuxt supports (by default `.vue`, `.js`, `.jsx`, `.mjs`, `.ts` or `.tsx`).
+Pages are Vue components and can have any [valid extension](/docs/api/nuxt-config#extensions) that Nuxt supports (by default `.vue`, `.js`, `.jsx`, `.mjs`, `.ts` or `.tsx`).
 
 Nuxt will automatically create a route for every page in your `~/pages/` directory.
 
 ::tip
-Pages are only automatically registered for prerendering if you have not disabled `nitro.prerender.crawlLinks` and you have at least one page in your `nitro.prerender.routes` list. See the [prerendering guide](/docs/4.x/getting-started/prerendering).
+Pages are only automatically registered for prerendering if you have not disabled `prerender.crawlLinks` and you have at least one page in your `prerender.routes` list. See the [prerendering guide](/docs/getting-started/prerendering).
 ::
 
 ::code-group
@@ -37,7 +37,7 @@ export default defineComponent({
 ```
 
 ```tsx twoslash [pages/index.tsx]
-// https://nuxt.com/docs/4.x/examples/advanced/jsx
+// /docs/examples/advanced/jsx
 // https://vuejs.org/guide/extras/render-function.html#jsx-tsx
 export default defineComponent({
   render () {
@@ -50,7 +50,7 @@ export default defineComponent({
 
 The `app/pages/index.vue` file will be mapped to the `/` route of your application.
 
-If you are using [`app.vue`](/docs/4.x/directory-structure/app/app), make sure to use the [`<NuxtPage/>`](/docs/4.x/api/components/nuxt-page) component to display the current page:
+If you are using [`app.vue`](/docs/directory-structure/app/app), make sure to use the [`<NuxtPage/>`](/docs/api/components/nuxt-page) component to display the current page:
 
 ```vue [app/app.vue]
 <template>
@@ -61,7 +61,7 @@ If you are using [`app.vue`](/docs/4.x/directory-structure/app/app), make sure t
 </template>
 ```
 
-Pages **must have a single root element** to allow [route transitions](/docs/4.x/getting-started/transitions) between pages. HTML comments are considered elements as well.
+Pages **must have a single root element** to allow [route transitions](/docs/getting-started/transitions) between pages. HTML comments are considered elements as well.
 
 This means that when the route is server-rendered, or statically generated, you will be able to see its contents correctly, but when you navigate towards that route during client-side navigation the transition between routes will fail and you'll see that the route will not be rendered.
 
@@ -122,7 +122,7 @@ Navigating to `/users-admins/123` would render:
 <p>admins - 123</p>
 ```
 
-If you want to access the route using Composition API, there is a global [`useRoute`](/docs/4.x/api/composables/use-route) function that will allow you to access the route just like `this.$route` in the Options API.
+If you want to access the route using Composition API, there is a global [`useRoute`](/docs/api/composables/use-route) function that will allow you to access the route just like `this.$route` in the Options API.
 
 ```vue twoslash
 <script setup lang="ts">
@@ -232,7 +232,7 @@ definePageMeta({
 </script>
 ```
 
-:link-example{to="/docs/4.x/examples/routing/pages"}
+:link-example{to="/docs/examples/routing/pages"}
 
 ## Named Views :badge[v4.5]{color="info" size="xs" class="align-middle"}
 
@@ -369,25 +369,25 @@ Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](http
 
 When your goal is to preserve state for parent routes use this syntax: `<NuxtPage keepalive />`. You can also set props to be passed to `<KeepAlive>` (see [a full list](https://vuejs.org/api/built-in-components#keepalive)).
 
-You can set a default value for this property [in your `nuxt.config`](/docs/4.x/api/nuxt-config#keepalive).
+You can set a default value for this property [in your `nuxt.config`](/docs/api/nuxt-config#keepalive).
 
 #### `key`
 
-[See above](/docs/4.x/directory-structure/app/pages#child-route-keys).
+[See above](/docs/directory-structure/app/pages#child-route-keys).
 
 #### `layout`
 
-You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/4.x/directory-structure/app/layouts).
+You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/directory-structure/app/layouts).
 
 #### `layoutTransition` and `pageTransition`
 
 You can define transition properties for the `<transition>` component that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. You can see [a list of options that can be passed](https://vuejs.org/api/built-in-components#transition) or read [more about how transitions work](https://vuejs.org/guide/built-ins/transition#transition).
 
-You can set default values for these properties [in your `nuxt.config`](/docs/4.x/api/nuxt-config#layouttransition).
+You can set default values for these properties [in your `nuxt.config`](/docs/api/nuxt-config#layouttransition).
 
 #### `middleware`
 
-You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards)), or an array of strings/functions. [More about named middleware](/docs/4.x/directory-structure/app/middleware).
+You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards#Global-Before-Guards)), or an array of strings/functions. [More about named middleware](/docs/directory-structure/app/middleware).
 
 #### `name`
 
@@ -418,7 +418,7 @@ export {}
 
 ## Navigation
 
-To navigate between pages of your app, you should use the [`<NuxtLink>`](/docs/4.x/api/components/nuxt-link) component.
+To navigate between pages of your app, you should use the [`<NuxtLink>`](/docs/api/components/nuxt-link) component.
 
 This component is included with Nuxt and therefore you don't have to import it as you do with other components.
 
@@ -430,7 +430,7 @@ A simple link to the `index.vue` page in your `app/pages` folder:
 </template>
 ```
 
-::read-more{to="/docs/4.x/api/components/nuxt-link"}
+::read-more{to="/docs/api/components/nuxt-link"}
 Learn more about `<NuxtLink>` usage.
 ::
 
@@ -461,27 +461,32 @@ function navigate () {
 
 ## Client-Only Pages
 
-You can define a page as [client only](/docs/4.x/directory-structure/app/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
+You can define a page as [client only](/docs/directory-structure/app/components#client-components) by giving it a `.client.vue` suffix. None of the content of this page will be rendered on the server.
 
 ## Server-Only Pages
 
-You can define a page as [server only](/docs/4.x/directory-structure/app/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
+You can define a page as [server only](/docs/directory-structure/app/components#server-components) by giving it a `.server.vue` suffix. While you will be able to navigate to the page using client-side navigation, controlled by `vue-router`, it will be rendered with a server component automatically, meaning the code required to render the page will not be in your client-side bundle.
 
 ::warning
 Server-only pages must have a single root element. (HTML comments are considered elements as well.)
 ::
 
+Navigating to a server-only page needs a request to render it, so when a `<NuxtLink>` to one is prefetched, Nuxt prefetches that response as well.
+
+::read-more{to="/docs/guide/concepts/server-components#the-client-navigation-round-trip"}
+::
+
 ## Custom Routing
 
 As your app gets bigger and more complex, your routing might require more flexibility. For this reason, Nuxt directly exposes the router, routes and router options for customization in different ways.
 
-:read-more{to="/docs/4.x/guide/recipes/custom-routing"}
+:read-more{to="/docs/guide/recipes/custom-routing"}
 
 ## Multiple Pages Directories
 
 By default, all your pages should be in one `app/pages` directory at the root of your project.
 
-However, you can use [Nuxt Layers](/docs/4.x/getting-started/layers) to create groupings of your app's pages:
+However, you can use [Nuxt Layers](/docs/getting-started/layers) to create groupings of your app's pages:
 
 ```bash [Directory Structure]
 -| some-app/
@@ -503,4 +508,4 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{to="/docs/4.x/guide/going-further/layers"}
+:read-more{to="/docs/guide/going-further/layers"}

package/2.directory-structure/1.app/1.plugins.md

@@ -30,7 +30,7 @@ Only files at the top level of the directory (or index files within any subdirec
 
 Only `foo.ts` and `bar/index.ts` would be registered.
 
-To add plugins in subdirectories, you can use the [`app/plugins`](/docs/4.x/api/nuxt-config#plugins-1) option in `nuxt.config.ts`:
+To add plugins in subdirectories, you can use the [`app/plugins`](/docs/api/nuxt-config#plugins-1) option in `nuxt.config.ts`:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -43,7 +43,7 @@ export default defineNuxtConfig({
 
 ## Creating Plugins
 
-The only argument passed to a plugin is [`nuxtApp`](/docs/4.x/api/composables/use-nuxt-app).
+The only argument passed to a plugin is [`nuxtApp`](/docs/api/composables/use-nuxt-app).
 
 ```ts twoslash [plugins/hello.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -134,7 +134,7 @@ export default defineNuxtPlugin({
 
 ## Using Composables
 
-You can use [composables](/docs/4.x/directory-structure/app/composables) as well as [utils](/docs/4.x/directory-structure/app/utils) within Nuxt plugins:
+You can use [composables](/docs/directory-structure/app/composables) as well as [utils](/docs/directory-structure/app/utils) within Nuxt plugins:
 
 ```ts [app/plugins/hello.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -153,12 +153,12 @@ Plugins are called in order sequentially and before everything else. You might u
 ::important
 **If a composable depends on the Vue.js lifecycle, it won't work.** :br
 
-Normally, Vue.js composables are bound to the current component instance while plugins are only bound to [`nuxtApp`](/docs/4.x/api/composables/use-nuxt-app) instance.
+Normally, Vue.js composables are bound to the current component instance while plugins are only bound to [`nuxtApp`](/docs/api/composables/use-nuxt-app) instance.
 ::
 
 ## Providing Helpers
 
-If you would like to provide a helper on the [`NuxtApp`](/docs/4.x/api/composables/use-nuxt-app) instance, return it from the plugin under a `provide` key.
+If you would like to provide a helper on the [`NuxtApp`](/docs/api/composables/use-nuxt-app) instance, return it from the plugin under a `provide` key.
 
 ::code-group
 ```ts twoslash [plugins/hello.ts]
@@ -200,7 +200,7 @@ const { $hello } = useNuxtApp()
 ```
 
 ::important
-Note that we highly recommend using [`composables`](/docs/4.x/directory-structure/app/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
+Note that we highly recommend using [`composables`](/docs/directory-structure/app/composables) instead of providing helpers to avoid polluting the global namespace and keep your main bundle entry small.
 ::
 
 ::warning
@@ -213,7 +213,7 @@ This is due to how Vue works with refs that aren't top-level to the template. Yo
 If you return your helpers from the plugin, they will be typed automatically; you'll find them typed for the return of `useNuxtApp()` and within your templates.
 
 ::note
-If you need to use a provided helper _within_ another plugin, you can call [`useNuxtApp()`](/docs/4.x/api/composables/use-nuxt-app) to get the typed version. But in general, this should be avoided unless you are certain of the plugins' order.
+If you need to use a provided helper _within_ another plugin, you can call [`useNuxtApp()`](/docs/api/composables/use-nuxt-app) to get the typed version. But in general, this should be avoided unless you are certain of the plugins' order.
 ::
 
 For advanced use-cases, you can declare the type of injected properties like this: