@nuxt/docs 3.19.2 → 3.19.3

package/2.guide/{2.directory-structure → 1.directory-structure}/1.content.md

@@ -2,10 +2,10 @@
 title: 'content'
 head.title: 'content/'
 description: Use the content/ directory to create a file-based CMS for your application.
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-log
 ---
 
-[Nuxt Content](https://content.nuxt.com) reads the [`content/` directory](/docs/guide/directory-structure/content) in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.
+[Nuxt Content](https://content.nuxt.com) reads the [`content/` directory](/docs/3.x/guide/directory-structure/content) in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.
 
 - Render your content with built-in components.
 - Query your content with a MongoDB-like API.
@@ -36,7 +36,7 @@ The module automatically loads and parses them.
 
 ## Render Content
 
-To render content pages, add a [catch-all route](/docs/guide/directory-structure/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
+To render content pages, add a [catch-all route](/docs/3.x/guide/directory-structure/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
 
 ```vue [pages/[...slug\\].vue]
 <script lang="ts" setup>
@@ -50,7 +50,10 @@ const { data: page } = await useAsyncData(route.path, () => {
   <div>
     <header><!-- ... --></header>
 
-    <ContentRenderer v-if="page" :value="page" />
+    <ContentRenderer
+      v-if="page"
+      :value="page"
+    />
 
     <footer><!-- ... --></footer>
   </div>

package/2.guide/{2.directory-structure → 1.directory-structure}/1.layouts.md

@@ -2,7 +2,7 @@
 title: "layouts"
 head.title: "layouts/"
 description: "Nuxt provides a layouts framework to extract common UI patterns into reusable layouts."
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-view
 ---
 
 ::tip{icon="i-lucide-rocket" }
@@ -11,7 +11,7 @@ For best performance, components placed in this directory will be automatically
 
 ## Enable Layouts
 
-Layouts are enabled by adding [`<NuxtLayout>`](/docs/api/components/nuxt-layout) to your [`app.vue`](/docs/guide/directory-structure/app):
+Layouts are enabled by adding [`<NuxtLayout>`](/docs/3.x/api/components/nuxt-layout) to your [`app.vue`](/docs/3.x/guide/directory-structure/app):
 
 ```vue [app.vue]
 <template>
@@ -22,7 +22,7 @@ Layouts are enabled by adding [`<NuxtLayout>`](/docs/api/components/nuxt-layout)
 ```
 
 To use a layout:
-- Set a `layout` property in your page with [definePageMeta](/docs/api/utils/define-page-meta).
+- Set a `layout` property in your page with [definePageMeta](/docs/3.x/api/utils/define-page-meta).
 - Set the `name` prop of `<NuxtLayout>`.
 
 ::note
@@ -34,7 +34,7 @@ If no layout is specified, `layouts/default.vue` will be used.
 ::
 
 ::important
-If you only have a single layout in your application, we recommend using [`app.vue`](/docs/guide/directory-structure/app) instead.
+If you only have a single layout in your application, we recommend using [`app.vue`](/docs/3.x/guide/directory-structure/app) instead.
 ::
 
 ::important
@@ -69,7 +69,7 @@ Then you can use the `custom` layout in your page:
 ```vue twoslash [pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
-  layout: 'custom'
+  layout: 'custom',
 })
 </script>
 ```
@@ -78,12 +78,12 @@ definePageMeta({
 Learn more about `definePageMeta`.
 ::
 
-You can directly override the default layout for all pages using the `name` property of [`<NuxtLayout>`](/docs/api/components/nuxt-layout):
+You can directly override the default layout for all pages using the `name` property of [`<NuxtLayout>`](/docs/3.x/api/components/nuxt-layout):
 
 ```vue [app.vue]
 <script setup lang="ts">
 // You might choose this based on an API call or logged-in status
-const layout = "custom";
+const layout = 'custom'
 </script>
 
 <template>
@@ -113,7 +113,7 @@ File | Layout Name
 
 ## Changing the Layout Dynamically
 
-You can also use the [`setPageLayout`](/docs/api/utils/set-page-layout) helper to change the layout dynamically:
+You can also use the [`setPageLayout`](/docs/3.x/api/utils/set-page-layout) helper to change the layout dynamically:
 
 ```vue twoslash
 <script setup lang="ts">
@@ -122,12 +122,14 @@ function enableCustomLayout () {
 }
 definePageMeta({
   layout: false,
-});
+})
 </script>
 
 <template>
   <div>
-    <button @click="enableCustomLayout">Update layout</button>
+    <button @click="enableCustomLayout">
+      Update layout
+    </button>
   </div>
 </template>
 ```
@@ -150,7 +152,9 @@ definePageMeta({
 <template>
   <div>
     <NuxtLayout name="custom">
-      <template #header> Some header template content. </template>
+      <template #header>
+        Some header template content.
+      </template>
 
       The rest of the page
     </NuxtLayout>
@@ -176,5 +180,5 @@ definePageMeta({
 ::
 
 ::important
-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)).
+If you use `<NuxtLayout>` within your pages, make sure it is not the root element (or [disable layout/page transitions](/docs/3.x/getting-started/transitions#disable-transitions)).
 ::

package/2.guide/{2.directory-structure → 1.directory-structure}/1.middleware.md

@@ -2,7 +2,7 @@
 title: "middleware"
 description: "Nuxt provides middleware to run code before navigating to a particular route."
 head.title: "middleware/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-middleware
 ---
 
 Nuxt provides a customizable **route middleware** framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route.
@@ -13,14 +13,14 @@ There are three kinds of route middleware:
 2. Named route middleware, placed in the `middleware/` and automatically loaded via asynchronous import when used on a page.
 3. Global route middleware, placed in the `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/api/utils/define-page-meta).
+The first two kinds of route middleware can be defined in [`definePageMeta`](/docs/3.x/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/guide/directory-structure/server#server-middleware), which are run in the Nitro server part of your app.
+Route middleware run within the Vue part of your Nuxt app. Despite the similar name, they are completely different from [server middleware](/docs/3.x/guide/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 +45,8 @@ export default defineNuxtRouteMiddleware((to, from) => {
 
 Nuxt provides two globally available helpers that can be returned directly from the middleware.
 
-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.
+1. [`navigateTo`](/docs/3.x/api/utils/navigate-to) - Redirects to the given route
+2. [`abortNavigation`](/docs/3.x/api/utils/abort-navigation) - Aborts the navigation, with an optional error message.
 
 Unlike [navigation guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#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**.
 
@@ -90,7 +90,7 @@ definePageMeta({
     },
     'auth',
   ],
-});
+})
 </script>
 ```
 
@@ -125,26 +125,32 @@ If your site is server-rendered or generated, middleware for the initial page wi
 However, if you want to avoid this behaviour you can do so:
 
 ```ts twoslash [middleware/example.ts]
-export default defineNuxtRouteMiddleware(to => {
+export default defineNuxtRouteMiddleware((to) => {
   // skip middleware on server
-  if (import.meta.server) return
+  if (import.meta.server) {
+    return
+  }
   // skip middleware on client side entirely
-  if (import.meta.client) return
+  if (import.meta.client) {
+    return
+  }
   // or only skip middleware on initial client load
   const nuxtApp = useNuxtApp()
-  if (import.meta.client && nuxtApp.isHydrating && nuxtApp.payload.serverRendered) return
+  if (import.meta.client && nuxtApp.isHydrating && nuxtApp.payload.serverRendered) {
+    return
+  }
 })
 ```
 
 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/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/3.x/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/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/3.x/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
@@ -155,10 +161,10 @@ This leads to the **same issue as above**, so you should structure your function
 ::code-group
 ```ts twoslash [middleware/access-route.ts]
 // @errors: 2304
-export default defineNuxtRouteMiddleware(to => {
+export default defineNuxtRouteMiddleware((to) => {
   // passing the route to the function to avoid calling `useRoute()` in middleware
   doSomethingWithRoute(to)
-    
+
   // ❌ this will output a warning and is NOT recommended
   callsRouteInternally()
 })
@@ -166,14 +172,14 @@ export default defineNuxtRouteMiddleware(to => {
 
 ```ts twoslash [utils/handle-route.ts]
 // providing the route as an argument so that it can be used in middleware correctly
-export function doSomethingWithRoute(route = useRoute()) {
+export function doSomethingWithRoute (route = useRoute()) {
   // ...
 }
 ```
 ```ts twoslash [utils/dont-do-this.ts]
 // ❌ this function is not suitable for use in middleware
-export function callsRouteInternally() {
-    const route = useRoute()
+export function callsRouteInternally () {
+  const route = useRoute()
   // ...
 }
 ```
@@ -182,7 +188,7 @@ export function callsRouteInternally() {
 
 ## Adding Middleware Dynamically
 
-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.
+It is possible to add global or named route middleware manually using the [`addRouteMiddleware()`](/docs/3.x/api/utils/add-route-middleware) helper function, such as from within a plugin.
 
 ```ts twoslash
 export default defineNuxtPlugin(() => {
@@ -208,7 +214,7 @@ In your page file, you can reference this route middleware:
 ```vue twoslash
 <script setup lang="ts">
 definePageMeta({
-  middleware: ["auth"]
+  middleware: ['auth'],
   // or middleware: 'auth'
 })
 </script>
@@ -230,7 +236,7 @@ export default defineNuxtConfig({
     'pages:extend' (pages) {
       function setMiddleware (pages: NuxtPage[]) {
         for (const page of pages) {
-          if (/* some condition */ true) {
+          if (/* some condition */ Math.random() > 0.5) {
             page.meta ||= {}
             // Note that this will override any middleware set in `definePageMeta` in the page
             page.meta.middleware = ['named']
@@ -241,7 +247,7 @@ export default defineNuxtConfig({
         }
       }
       setMiddleware(pages)
-    }
-  }
+    },
+  },
 })
 ```

package/2.guide/{2.directory-structure → 1.directory-structure}/1.modules.md

@@ -11,18 +11,18 @@ The auto-registered files patterns are:
 - `modules/*/index.ts`
 - `modules/*.ts`
 
-You don't need to add those local modules to your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) separately.
+You don't need to add those local modules to your [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) separately.
 
 ::code-group
 
 ```ts twoslash [modules/hello/index.ts]
 // `nuxt/kit` is a helper subpath import you can use when defining local modules
 // that means you do not need to add `@nuxt/kit` to your project's dependencies
-import { createResolver, defineNuxtModule, addServerHandler } from 'nuxt/kit'
+import { addServerHandler, createResolver, defineNuxtModule } from 'nuxt/kit'
 
 export default defineNuxtModule({
   meta: {
-    name: 'hello'
+    name: 'hello',
   },
   setup () {
     const resolver = createResolver(import.meta.url)
@@ -30,9 +30,9 @@ export default defineNuxtModule({
     // Add an API route
     addServerHandler({
       route: '/api/hello',
-      handler: resolver.resolve('./runtime/api-route')
+      handler: resolver.resolve('./runtime/api-route'),
     })
-  }
+  },
 })
 ```
 
@@ -47,7 +47,7 @@ export default defineEventHandler(() => {
 When starting Nuxt, the `hello` module will be registered and the `/api/hello` route will be available.
 
 Modules are executed in the following sequence:
-- First, the modules defined in [`nuxt.config.ts`](/docs/api/nuxt-config#modules-1) are loaded.
+- First, the modules defined in [`nuxt.config.ts`](/docs/3.x/api/nuxt-config#modules-1) are loaded.
 - Then, modules found in the `modules/` directory are executed, and they load in alphabetical order.
 
 You can change the order of local module by adding a number to the front of each directory name:

package/2.guide/{2.directory-structure → 1.directory-structure}/1.node_modules.md

@@ -2,11 +2,11 @@
 title: "node_modules"
 description: "The package manager stores the dependencies of your project in the node_modules/ directory."
 head.title: "node_modules/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-node
 ---
 
 The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.sh/package-manager)) creates this directory to store the dependencies of your project.
 
 ::important
-This directory should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
+This directory should be added to your [`.gitignore`](/docs/3.x/guide/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
 ::

package/2.guide/{2.directory-structure → 1.directory-structure}/1.pages.md

@@ -2,16 +2,16 @@
 title: "pages"
 description: "Nuxt provides file-based routing to create routes within your web application."
 head.title: "pages/"
-navigation.icon: i-lucide-folder
+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/guide/directory-structure/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`app/router.options.ts`](/docs/guide/recipes/custom-routing#using-approuteroptions).
+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/3.x/guide/directory-structure/app). To force the pages system, set `pages: true` in `nuxt.config` or have a [`app/router.options.ts`](/docs/3.x/guide/recipes/custom-routing#using-approuteroptions).
 ::
 
 ## Usage
 
-Pages are Vue components and can have any [valid extension](/docs/api/configuration/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/3.x/api/configuration/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.
 
@@ -28,7 +28,7 @@ Nuxt will automatically create a route for every page in your `~/pages/` directo
 export default defineComponent({
   render () {
     return h('h1', 'Index page')
-  }
+  },
 })
 ```
 
@@ -38,7 +38,7 @@ export default defineComponent({
 export default defineComponent({
   render () {
     return <h1>Index page</h1>
-  }
+  },
 })
 ```
 
@@ -46,7 +46,7 @@ export default defineComponent({
 
 The `pages/index.vue` file will be mapped to the `/` route of your application.
 
-If you are using [`app.vue`](/docs/guide/directory-structure/app), make sure to use the [`<NuxtPage/>`](/docs/api/components/nuxt-page) component to display the current page:
+If you are using [`app.vue`](/docs/3.x/guide/directory-structure/app), make sure to use the [`<NuxtPage/>`](/docs/3.x/api/components/nuxt-page) component to display the current page:
 
 ```vue [app.vue]
 <template>
@@ -57,7 +57,7 @@ If you are using [`app.vue`](/docs/guide/directory-structure/app), make sure to
 </template>
 ```
 
-Pages **must have a single root element** to allow [route transitions](/docs/getting-started/transitions) between pages. HTML comments are considered elements as well.
+Pages **must have a single root element** to allow [route transitions](/docs/3.x/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.
 
@@ -118,7 +118,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/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/3.x/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">
@@ -177,10 +177,10 @@ This file tree will generate these routes:
       {
         path: 'child',
         component: '~/pages/parent/child.vue',
-        name: 'parent-child'
-      }
-    ]
-  }
+        name: 'parent-child',
+      },
+    ],
+  },
 ]
 ```
 
@@ -197,7 +197,9 @@ To display the `child.vue` component, you have to insert the `<NuxtPage>` compon
 
 ```vue {}[pages/parent/child.vue]
 <script setup lang="ts">
-const props = defineProps(['foobar'])
+const props = defineProps({
+  foobar: String,
+})
 
 console.log(props.foobar)
 </script>
@@ -221,7 +223,7 @@ Or alternatively:
 ```vue twoslash {}[pages/parent/child.vue]
 <script setup lang="ts">
 definePageMeta({
-  key: route => route.fullPath
+  key: route => route.fullPath,
 })
 </script>
 ```
@@ -251,7 +253,7 @@ You might want to define metadata for each route in your app. You can do this us
 ```vue twoslash
 <script setup lang="ts">
 definePageMeta({
-  title: 'My home page'
+  title: 'My home page',
 })
 </script>
 ```
@@ -279,8 +281,8 @@ Make sure not to reference any reactive data or functions that cause side effect
 <script setup lang="ts">
 import { someData } from '~/utils/example'
 
-function validateIdParam(route) {
-  return route.params.id && !isNaN(Number(route.params.id))
+function validateIdParam (route) {
+  return route.params.id && !Number.isNaN(Number(route.params.id))
 }
 
 const title = ref('')
@@ -288,7 +290,7 @@ const title = ref('')
 definePageMeta({
   validate: validateIdParam,
   someData,
-  title,    // do not do this, the ref will be hoisted out of the component
+  title, // do not do this, the ref will be hoisted out of the component
 })
 </script>
 ```
@@ -307,7 +309,7 @@ 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.html#keepalive)).
 
-You can set a default value for this property [in your `nuxt.config`](/docs/api/nuxt-config#keepalive).
+You can set a default value for this property [in your `nuxt.config`](/docs/3.x/api/nuxt-config#keepalive).
 
 #### `key`
 
@@ -315,17 +317,17 @@ You can set a default value for this property [in your `nuxt.config`](/docs/api/
 
 #### `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/guide/directory-structure/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/3.x/guide/directory-structure/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.html#transition) or read [more about how transitions work](https://vuejs.org/guide/built-ins/transition.html#transition).
 
-You can set default values for these properties [in your `nuxt.config`](/docs/api/nuxt-config#layouttransition).
+You can set default values for these properties [in your `nuxt.config`](/docs/3.x/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.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/guide/directory-structure/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.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/3.x/guide/directory-structure/middleware).
 
 #### `name`
 
@@ -356,7 +358,7 @@ export {}
 
 ## Navigation
 
-To navigate between pages of your app, you should use the [`<NuxtLink>`](/docs/api/components/nuxt-link) component.
+To navigate between pages of your app, you should use the [`<NuxtLink>`](/docs/3.x/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.
 
@@ -382,16 +384,16 @@ Make sure to always `await` on `navigateTo` or chain its result by returning fro
 
 ```vue twoslash
 <script setup lang="ts">
-const name = ref('');
-const type = ref(1);
+const name = ref('')
+const type = ref(1)
 
-function navigate(){
+function navigate () {
   return navigateTo({
     path: '/search',
     query: {
       name: name.value,
-      type: type.value
-    }
+      type: type.value,
+    },
   })
 }
 </script>
@@ -399,11 +401,11 @@ function navigate(){
 
 ## Client-Only Pages
 
-You can define a page as [client only](/docs/guide/directory-structure/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/3.x/guide/directory-structure/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/guide/directory-structure/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/3.x/guide/directory-structure/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.)
@@ -419,7 +421,7 @@ As your app gets bigger and more complex, your routing might require more flexib
 
 By default, all your pages should be in one `pages` directory at the root of your project.
 
-However, you can use [Nuxt Layers](/docs/getting-started/layers) to create groupings of your app's pages:
+However, you can use [Nuxt Layers](/docs/3.x/getting-started/layers) to create groupings of your app's pages:
 
 ```bash [Directory Structure]
 -| some-app/