@nuxt/docs 4.1.1 → 4.1.3

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

@@ -2,7 +2,7 @@
 title: "components"
 head.title: "components/"
 description: "The components/ directory is where you put all your Vue components."
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-component
 ---
 
 Nuxt automatically imports any components in this directory (along with components that are registered by any modules you may be using).
@@ -54,7 +54,7 @@ export default defineNuxtConfig({
       pathPrefix: false, // [!code ++]
     },
   ],
-});
+})
 ```
 
 This registers the components using the same strategy as used in Nuxt 2. For example, `~/components/Some/MyComponent.vue` will be usable as `<MyComponent>` and not `<SomeMyComponent>`.
@@ -116,7 +116,12 @@ const show = ref(false)
   <div>
     <h1>Mountains</h1>
     <LazyMountainsList v-if="show" />
-    <button v-if="!show" @click="show = true">Show List</button>
+    <button
+      v-if="!show"
+      @click="show = true"
+    >
+      Show List
+    </button>
   </div>
 </template>
 ```
@@ -133,6 +138,10 @@ Nuxt supports this using lazy (or delayed) hydration, allowing you to control wh
 
 Nuxt provides a range of built-in hydration strategies. Only one strategy can be used per lazy component.
 
+::note
+Any prop change on a lazily hydrated component will trigger hydration immediately. (e.g., changing a prop on a component with `hydrate-never` will cause it to hydrate)
+::
+
 ::warning
 Currently Nuxt's built-in lazy hydration only works in single-file components (SFCs), and requires you to define the prop in the template (rather than spreading an object of props via `v-bind`). It also does not work with direct imports from `#components`.
 ::
@@ -231,9 +240,10 @@ Hydrates the component based on a boolean condition.
     <LazyMyComponent :hydrate-when="isReady" />
   </div>
 </template>
+
 <script setup lang="ts">
 const isReady = ref(false)
-function myFunction() {
+function myFunction () {
   // trigger custom hydration strategy...
   isReady.value = true
 }
@@ -259,13 +269,16 @@ All delayed hydration components emit a `@hydrated` event when they are hydrated
 ```vue [app/pages/index.vue]
 <template>
   <div>
-    <LazyMyComponent hydrate-on-visible @hydrated="onHydrate" />
+    <LazyMyComponent
+      hydrate-on-visible
+      @hydrated="onHydrate"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-function onHydrate() {
-  console.log("Component has been hydrated!")
+function onHydrate () {
+  console.log('Component has been hydrated!')
 }
 </script>
 ```
@@ -293,7 +306,7 @@ You can also explicitly import components from `#components` if you want or need
 
 ```vue [app/pages/index.vue]
 <script setup lang="ts">
-import { NuxtLink, LazyMountainsList } from '#components'
+import { LazyMountainsList, NuxtLink } from '#components'
 
 const show = ref(false)
 </script>
@@ -302,7 +315,12 @@ const show = ref(false)
   <div>
     <h1>Mountains</h1>
     <LazyMountainsList v-if="show" />
-    <button v-if="!show" @click="show = true">Show List</button>
+    <button
+      v-if="!show"
+      @click="show = true"
+    >
+      Show List
+    </button>
     <NuxtLink to="/">Home</NuxtLink>
   </div>
 </template>
@@ -329,8 +347,8 @@ export default defineNuxtConfig({
     //
     // ~/components/Btn.vue => <Btn />
     // ~/components/base/Btn.vue => <BaseBtn />
-    '~/components'
-  ]
+    '~/components',
+  ],
 })
 ```
 
@@ -340,7 +358,7 @@ Any nested directories need to be added first as they are scanned in order.
 
 ## npm Packages
 
-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/guide/directory-structure/modules) to register them.
+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/guide/directory-structure/modules) to register them.
 
 ::code-group
 
@@ -348,7 +366,7 @@ If you want to auto-import components from an npm package, you can use [`addComp
 import { addComponent, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
     addComponent({
       name: 'MyAutoImportedComponent',
@@ -372,7 +390,7 @@ export default defineNuxtModule({
 
 ## Component Extensions
 
-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.
+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.
 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]
@@ -381,8 +399,8 @@ export default defineNuxtConfig({
     {
       path: '~/components',
       extensions: ['.vue'], // [!code ++]
-    }
-  ]
+    },
+  ],
 })
 ```
 
@@ -412,7 +430,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/api/components/client-only"}
+::read-more{to="/docs/4.x/api/components/client-only"}
 You can also achieve a similar result with the `<ClientOnly>` component.
 ::
 
@@ -420,7 +438,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](#paired-with-a-client-component).
+Server components can either be used on their own or paired with a [client component](/docs/4.x/guide/directory-structure/app/components#paired-with-a-client-component).
 
 :video-accordion{title="Watch Learn Vue video about Nuxt Server Components" videoId="u1yyXe86xJM"}
 
@@ -439,8 +457,8 @@ Server components are currently experimental and in order to use them, you need
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    componentIslands: true
-  }
+    componentIslands: true,
+  },
 })
 ```
 
@@ -463,7 +481,7 @@ Now you can register server-only components with the `.server` suffix and use th
 </template>
 ```
 
-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.
+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.
 
 ::warning
 Server components (and islands) must have a single root element. (HTML comments are considered elements as well.)
@@ -494,7 +512,10 @@ You can partially hydrate a component by setting a `nuxt-client` attribute on th
   <div>
     <HighlightedMarkdown markdown="# Headline" />
     <!-- Counter will be loaded and hydrated client-side -->
-    <Counter nuxt-client :count="5" />
+    <Counter
+      nuxt-client
+      :count="5"
+    />
   </div>
 </template>
 ```
@@ -543,14 +564,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/api"}
+::read-more{to="/docs/4.x/api"}
 ::
 
 ## Library Authors
 
 Making Vue component libraries with automatic tree-shaking and component registration is super easy. ✨
 
-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.
+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.
 
 Imagine a directory structure like this:
 
@@ -569,10 +590,10 @@ Imagine a directory structure like this:
 Then in `awesome-ui/nuxt.ts` you can use the `addComponentsDir` hook:
 
 ```ts twoslash
-import { createResolver, defineNuxtModule, addComponentsDir } from '@nuxt/kit'
+import { addComponentsDir, createResolver, defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
-  setup() {
+  setup () {
     const resolver = createResolver(import.meta.url)
 
     // Add ./components dir to the list
@@ -588,7 +609,7 @@ That's it! Now in your project, you can import your UI library as a Nuxt module
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
-  modules: ['awesome-ui/nuxt']
+  modules: ['awesome-ui/nuxt'],
 })
 ```
 
@@ -605,4 +626,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/examples/features/auto-imports"}
+:link-example{to="/docs/4.x/examples/features/auto-imports"}

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

@@ -2,14 +2,14 @@
 title: 'composables'
 head.title: 'composables/'
 description: Use the composables/ directory to auto-import your Vue composables into your application.
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-src
 ---
 
 ## Usage
 
 **Method 1:** Using named export
 
-```js [app/composables/useFoo.ts]
+```ts [app/composables/useFoo.ts]
 export const useFoo = () => {
   return useState('foo', () => 'bar')
 }
@@ -17,7 +17,7 @@ export const useFoo = () => {
 
 **Method 2:** Using default export
 
-```js [app/composables/use-foo.ts or composables/useFoo.ts]
+```ts [app/composables/use-foo.ts or composables/useFoo.ts]
 // It will be available as useFoo() (camelCase of file name without extension)
 export default function () {
   return useState('foo', () => 'bar')
@@ -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/guide/concepts/auto-imports"}
+:read-more{to="/docs/4.x/guide/concepts/auto-imports"}
 
-:link-example{to="/docs/examples/features/auto-imports"}
+:link-example{to="/docs/4.x/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/api/commands/prepare), [`nuxt dev`](/docs/api/commands/dev) or [`nuxt build`](/docs/api/commands/build) in order to let Nuxt generate 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.
 
 ::note
 If you create a composable without having the dev server running, TypeScript will throw an error, such as `Cannot find name 'useBar'.`
@@ -62,7 +62,7 @@ If you create a composable without having the dev server running, TypeScript wil
 
 You can use a composable within another composable using auto imports:
 
-```js [app/composables/test.ts]
+```ts [app/composables/test.ts]
 export const useFoo = () => {
   const nuxtApp = useNuxtApp()
   const bar = useBar()
@@ -71,9 +71,9 @@ export const useFoo = () => {
 
 ### Access plugin injections
 
-You can access [plugin injections](/docs/guide/directory-structure/plugins#providing-helpers) from composables:
+You can access [plugin injections](/docs/4.x/guide/directory-structure/plugins#providing-helpers) from composables:
 
-```js [app/composables/test.ts]
+```ts [app/composables/test.ts]
 export const useHello = () => {
   const nuxtApp = useNuxtApp()
   return nuxtApp.$hello
@@ -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/guide/directory-structure/app/composables), e.g.:
+Nuxt only scans files at the top level of the [`app/composables/` directory](/docs/4.x/guide/directory-structure/app/composables), e.g.:
 
 ```bash [Directory Structure]
 -| composables/
@@ -114,8 +114,8 @@ export default defineNuxtConfig({
       // ... or scan composables nested one level deep with a specific name and file extension
       '~/composables/*/index.{ts,js,mjs,mts}',
       // ... or scan all composables within given directory
-      '~/composables/**'
-    ]
-  }
+      '~/composables/**',
+    ],
+  },
 })
 ```

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/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/4.x/api/components/nuxt-layout) to your [`app.vue`](/docs/4.x/guide/directory-structure/app):
 
 ```vue [app/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/4.x/api/utils/define-page-meta).
 - Set the `name` prop of `<NuxtLayout>`.
 
 ::note
@@ -34,7 +34,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/guide/directory-structure/app) instead.
+If you only have a single layout in your application, we recommend using [`app.vue`](/docs/4.x/guide/directory-structure/app) instead.
 ::
 
 ::important
@@ -69,21 +69,21 @@ 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>
 ```
 
-::read-more{to="/docs/guide/directory-structure/app/pages#page-metadata"}
+::read-more{to="/docs/4.x/guide/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/api/components/nuxt-layout):
+You can directly override the default layout for all pages using the `name` property of [`<NuxtLayout>`](/docs/4.x/api/components/nuxt-layout):
 
 ```vue [app/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>
@@ -109,11 +109,11 @@ File | Layout Name
 `~/layouts/desktop-base/DesktopBase.vue` | `desktop-base`
 `~/layouts/desktop/Desktop.vue` | `desktop`
 
-:link-example{to="/docs/examples/features/layouts"}
+:link-example{to="/docs/4.x/examples/features/layouts"}
 
 ## 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/4.x/api/utils/set-page-layout) helper to change the layout dynamically:
 
 ```vue twoslash
 <script setup lang="ts">
@@ -122,17 +122,19 @@ function enableCustomLayout () {
 }
 definePageMeta({
   layout: false,
-});
+})
 </script>
 
 <template>
   <div>
-    <button @click="enableCustomLayout">Update layout</button>
+    <button @click="enableCustomLayout">
+      Update layout
+    </button>
   </div>
 </template>
 ```
 
-:link-example{to="/docs/examples/features/layouts"}
+:link-example{to="/docs/4.x/examples/features/layouts"}
 
 ## Overriding a Layout on a Per-page Basis
 
@@ -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/4.x/getting-started/transitions#disable-transitions)).
 ::

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/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 `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/api/utils/define-page-meta).
+The first two kinds of route middleware can be defined in [`definePageMeta`](/docs/4.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/4.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/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.
 
 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**.
 
@@ -58,8 +58,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/api/utils/navigate-to"}
-:read-more{to="/docs/api/utils/abort-navigation"}
+:read-more{to="/docs/4.x/api/utils/navigate-to"}
+:read-more{to="/docs/4.x/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.html#global-before-guards) may work but there may be breaking changes in future.
@@ -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/4.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/4.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/4.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>
@@ -216,7 +222,7 @@ definePageMeta({
 
 Now, before navigation to that page can complete, the `auth` route middleware will be run.
 
-:link-example{to="/docs/examples/routing/middleware"}
+:link-example{to="/docs/4.x/examples/routing/middleware"}
 
 ## Setting Middleware at Build Time
 
@@ -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)
-    }
-  }
+    },
+  },
 })
 ```