@nuxt/docs 3.19.2 → 3.20.0

package/2.guide/5.best-practices/hydration.md

@@ -47,7 +47,7 @@ const userTheme = localStorage.getItem('theme') || 'light'
 </script>
 ```
 
-**Solution**: You can use [`useCookie`](/docs/api/composables/use-cookie):
+**Solution**: You can use [`useCookie`](/docs/3.x/api/composables/use-cookie):
 
 ```html
 <template>
@@ -144,7 +144,7 @@ const greeting = hour < 12 ? 'Good morning' : 'Good afternoon'
 </script>
 ```
 
-**Solution**: Use [`NuxtTime`](/docs/api/components/nuxt-time) component or handle it client-side:
+**Solution**: Use [`NuxtTime`](/docs/3.x/api/components/nuxt-time) component or handle it client-side:
 
 ```html
 <template>
@@ -178,8 +178,8 @@ onMounted(() => {
 
 ## In summary
 
-1. **Use SSR-friendly composables**: [`useFetch`](/docs/api/composables/use-fetch), [`useAsyncData`](/docs/api/composables/use-async-data), [`useState`](/docs/api/composables/use-state)
-2. **Wrap client-only code**: Use [`ClientOnly`](/docs/api/components/client-only) component for browser-specific content
+1. **Use SSR-friendly composables**: [`useFetch`](/docs/3.x/api/composables/use-fetch), [`useAsyncData`](/docs/3.x/api/composables/use-async-data), [`useState`](/docs/3.x/api/composables/use-state)
+2. **Wrap client-only code**: Use [`ClientOnly`](/docs/3.x/api/components/client-only) component for browser-specific content
 3. **Consistent data sources**: Ensure server and client uses the same data
 4. **Avoid side effects in setup**: Move browser-dependent code to `onMounted`
 

package/2.guide/5.best-practices/performance.md

@@ -12,7 +12,7 @@ Nuxt offers several built-in features that help you optimize performance of your
 
 ### Links
 
-[`<NuxtLink>`](/docs/api/components/nuxt-link) is a drop-in replacement for both Vue Router's `<RouterLink>` component and HTML's `<a>` tag. It intelligently determines whether the link is internal or external and renders it accordingly with available optimizations (prefetching, default attributes, etc.)
+[`<NuxtLink>`](/docs/3.x/api/components/nuxt-link) is a drop-in replacement for both Vue Router's `<RouterLink>` component and HTML's `<a>` tag. It intelligently determines whether the link is internal or external and renders it accordingly with available optimizations (prefetching, default attributes, etc.)
 
 ```html
 <template>
@@ -34,8 +34,8 @@ export default defineNuxtConfig({
       nuxtLink: {
         prefetchOn: 'interaction',
       },
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -51,18 +51,18 @@ Hybrid rendering allows different caching rules per route using Route Rules and
 export default defineNuxtConfig({
   routeRules: {
     '/': {
-      prerender: true
+      prerender: true,
     },
     '/products/**': {
-      swr: 3600
+      swr: 3600,
     },
     '/blog': {
-      isr: 3600
+      isr: 3600,
     },
     '/admin/**': {
-      ssr: false
+      ssr: false,
     },
-  }
+  },
 })
 ```
 
@@ -110,7 +110,7 @@ To optimize your app, you may want to delay the hydration of some components unt
 
 ### Fetching data
 
-To avoid fetching same data twice (once on the server and once on client) Nuxt provides [`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data). They ensure that if an API call is made on the server, the data is forwarded to the client in the payload instead of being fetched again.
+To avoid fetching same data twice (once on the server and once on client) Nuxt provides [`useFetch`](/docs/3.x/api/composables/use-fetch) and [`useAsyncData`](/docs/3.x/api/composables/use-async-data). They ensure that if an API call is made on the server, the data is forwarded to the client in the payload instead of being fetched again.
 
 :read-more{title="Data fetching" to="/docs/getting-started/data-fetching"}
 
@@ -126,7 +126,7 @@ In Nuxt we can use [Nuxt Image](https://image.nuxt.com/) module that is a plug-a
 
 :video-accordion{title="Watch the video by LearnVue about Nuxt Image" videoId="_UBff2eqGY0"}
 
-[`<NuxtImg>`](/docs/api/components/nuxt-img) is a drop-in replacement for the native `<img>` tag that comes with following enhancements:
+[`<NuxtImg>`](/docs/3.x/api/components/nuxt-img) is a drop-in replacement for the native `<img>` tag that comes with following enhancements:
 
 * Uses built-in provider to optimize local and remote images
 * Converts `src` to provider optimized URLs with modern formats such as WebP or Avif
@@ -193,7 +193,7 @@ Nuxt Scripts provides an abstraction layer on top of third-party scripts, provid
 
 ```ts
 const { onLoaded, proxy } = useScriptGoogleAnalytics(
-  { 
+  {
     id: 'G-1234567',
     scriptOptions: {
       trigger: 'manual',
@@ -216,7 +216,7 @@ To improve performance, we need to first know how to measure it, starting with m
 
 ### Nuxi Analyze
 
-[This](/docs/api/commands/analyze) command of `nuxi` allows to analyze the production bundle or your Nuxt application. It leverages `vite-bundle-visualizer` (similar to `webpack-bundle-analyzer`) to generate a visual representation of your application's bundle, making it easier to identify which components take up the most space.
+[This](/docs/3.x/api/commands/analyze) command of `nuxi` allows to analyze the production bundle or your Nuxt application. It leverages `vite-bundle-visualizer` (similar to `webpack-bundle-analyzer`) to generate a visual representation of your application's bundle, making it easier to identify which components take up the most space.
 
 When you see a large block in the visualization, it often signals an opportunity for optimization—whether by splitting it into smaller parts, implementing lazy loading, or replacing it with a more efficient alternative, especially for third-party libraries.
 

package/3.api/1.components/1.client-only.md

@@ -24,7 +24,10 @@ The content of the default slot will be tree-shaken out of the server build. (Th
   <div>
     <Sidebar />
     <!-- The <Comment> component will only be rendered on client-side -->
-    <ClientOnly fallback-tag="span" fallback="Loading comments...">
+    <ClientOnly
+      fallback-tag="span"
+      fallback="Loading comments..."
+    >
       <Comment />
     </ClientOnly>
   </div>
@@ -40,7 +43,7 @@ The content of the default slot will be tree-shaken out of the server build. (Th
   <div>
     <Sidebar />
     <!-- This renders the "span" element on the server side -->
-    <ClientOnly fallbackTag="span">
+    <ClientOnly fallback-tag="span">
       <!-- this component will only be rendered on client side -->
       <Comments />
       <template #fallback>
@@ -64,7 +67,7 @@ const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef')
 
 // The watch will be triggered when the component is available
 watch(nuxtWelcomeRef, () => {
- console.log('<NuxtWelcome /> mounted')
+  console.log('<NuxtWelcome /> mounted')
 }, { once: true })
 </script>
 

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

@@ -55,12 +55,15 @@ This component is experimental and in order to use it you must enable the `exper
   - **default**: `false`
 
 ```vue
-  <template>
-    <!-- render <span>Hello world</span> server-side if the default slot fails to render -->
-    <NuxtClientFallback fallback-tag="span" fallback="Hello world">
-      <BrokeInSsr />
-    </NuxtClientFallback>
-  </template>
+<template>
+  <!-- render <span>Hello world</span> server-side if the default slot fails to render -->
+  <NuxtClientFallback
+    fallback-tag="span"
+    fallback="Hello world"
+  >
+    <BrokeInSSR />
+  </NuxtClientFallback>
+</template>
 ```
 
 ## Slots

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

@@ -10,7 +10,7 @@ links:
 
 `<NuxtPicture>` is a drop-in replacement for the native `<picture>` tag.
 
-Usage of `<NuxtPicture>` is almost identical to [`<NuxtImg>`](/docs/api/components/nuxt-img) but it also allows serving modern formats like `webp` when possible.
+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).
 

package/3.api/1.components/11.teleports.md

@@ -15,7 +15,10 @@ The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.htm
     Open Modal
   </button>
   <Teleport to="#teleports">
-    <div v-if="open" class="modal">
+    <div
+      v-if="open"
+      class="modal"
+    >
       <p>Hello from the modal!</p>
       <button @click="open = false">
         Close

package/3.api/1.components/12.nuxt-route-announcer.md

@@ -16,7 +16,7 @@ This component is available in Nuxt v3.12+.
 
 ## Usage
 
-Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`layouts/`](/docs/guide/directory-structure/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
+Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/3.x/guide/directory-structure/app) or [`layouts/`](/docs/3.x/guide/directory-structure/layouts) to enhance accessibility by informing assistive technologies about page title changes. This ensures that navigational changes are announced to users relying on screen readers.
 
 ```vue [app.vue]
 <template>
@@ -32,13 +32,13 @@ Add `<NuxtRouteAnnouncer/>` in your [`app.vue`](/docs/guide/directory-structure/
 You can pass custom HTML or components through the route announcer's default slot.
 
 ```vue
-  <template>
-    <NuxtRouteAnnouncer>
-      <template #default="{ message }">
-        <p>{{ message }} was loaded.</p>
-      </template>
-    </NuxtRouteAnnouncer>
-  </template>
+<template>
+  <NuxtRouteAnnouncer>
+    <template #default="{ message }">
+      <p>{{ message }} was loaded.</p>
+    </template>
+  </NuxtRouteAnnouncer>
+</template>
 ```
 
 ## Props
@@ -52,5 +52,5 @@ To achieve full customization, you can implement your own one based on [its sour
 ::
 
 ::callout
-You can hook into the underlying announcer instance using [the `useRouteAnnouncer` composable](/docs/api/composables/use-route-announcer), which allows you to set a custom announcement message.
+You can hook into the underlying announcer instance using [the `useRouteAnnouncer` composable](/docs/3.x/api/composables/use-route-announcer), which allows you to set a custom announcement message.
 ::

package/3.api/1.components/13.nuxt-time.md

@@ -56,7 +56,10 @@ The [BCP 47 language tag](https://datatracker.ietf.org/doc/html/rfc5646) for for
 
 ```vue
 <template>
-  <NuxtTime :datetime="Date.now()" locale="fr-FR" />
+  <NuxtTime
+    :datetime="Date.now()"
+    locale="fr-FR"
+  />
 </template>
 ```
 
@@ -66,8 +69,8 @@ The component accepts any property from the [Intl.DateTimeFormat](https://develo
 
 ```vue
 <template>
-  <NuxtTime 
-    :datetime="Date.now()" 
+  <NuxtTime
+    :datetime="Date.now()"
     year="numeric"
     month="long"
     day="numeric"
@@ -90,7 +93,10 @@ Enables relative time formatting using the Intl.RelativeTimeFormat API:
 ```vue
 <template>
   <!-- Shows something like "5 minutes ago" -->
-  <NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative />
+  <NuxtTime
+    :datetime="Date.now() - 5 * 60 * 1000"
+    relative
+  />
 </template>
 ```
 
@@ -98,13 +104,17 @@ Enables relative time formatting using the Intl.RelativeTimeFormat API:
 
 When `relative` is set to `true`, the component also accepts properties from [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat):
 
+::warning
+Due to `style` being a reserved prop, `relativeStyle` prop is used instead.
+::
+
 ```vue
 <template>
-  <NuxtTime 
-    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000" 
-    relative 
+  <NuxtTime
+    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000"
+    relative
     numeric="auto"
-    style="long"
+    relative-style="long"
   />
 </template>
 ```
@@ -125,8 +135,8 @@ This would output something like: "3 days ago" or "last Friday" depending on the
 
 ```vue
 <template>
-  <NuxtTime 
-    :datetime="Date.now()" 
+  <NuxtTime
+    :datetime="Date.now()"
     weekday="long"
     year="numeric"
     month="short"
@@ -134,7 +144,7 @@ This would output something like: "3 days ago" or "last Friday" depending on the
     hour="numeric"
     minute="numeric"
     second="numeric"
-    timeZoneName="short"
+    time-zone-name="short"
   />
 </template>
 ```
@@ -145,15 +155,24 @@ This would output something like: "3 days ago" or "last Friday" depending on the
 <template>
   <div>
     <p>
-      <NuxtTime :datetime="Date.now() - 30 * 1000" relative />
+      <NuxtTime
+        :datetime="Date.now() - 30 * 1000"
+        relative
+      />
       <!-- 30 seconds ago -->
     </p>
-    <p>  
-      <NuxtTime :datetime="Date.now() - 45 * 60 * 1000" relative />
+    <p>
+      <NuxtTime
+        :datetime="Date.now() - 45 * 60 * 1000"
+        relative
+      />
       <!-- 45 minutes ago -->
     </p>
     <p>
-      <NuxtTime :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000" relative />
+      <NuxtTime
+        :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000"
+        relative
+      />
       <!-- in 2 days -->
     </p>
   </div>
@@ -165,9 +184,21 @@ This would output something like: "3 days ago" or "last Friday" depending on the
 ```vue
 <template>
   <div>
-    <NuxtTime :datetime="Date.now()" locale="en-US" weekday="long" />
-    <NuxtTime :datetime="Date.now()" locale="fr-FR" weekday="long" />
-    <NuxtTime :datetime="Date.now()" locale="ja-JP" weekday="long" />
+    <NuxtTime
+      :datetime="Date.now()"
+      locale="en-US"
+      weekday="long"
+    />
+    <NuxtTime
+      :datetime="Date.now()"
+      locale="fr-FR"
+      weekday="long"
+    />
+    <NuxtTime
+      :datetime="Date.now()"
+      locale="ja-JP"
+      weekday="long"
+    />
   </div>
 </template>
 ```

package/3.api/1.components/2.nuxt-page.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-`<NuxtPage>` is a built-in component that comes with Nuxt. It lets you display top-level or nested pages located in the [`pages/`](/docs/guide/directory-structure/pages) directory.
+`<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/guide/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.
@@ -18,7 +18,7 @@ links:
 
 ```vue
 <template>
-  <RouterView #default="{ Component }">
+  <RouterView v-slot="{ Component }">
     <!-- Optional, when using transitions -->
     <Transition>
       <!-- Optional, when using keep-alive -->
@@ -79,12 +79,12 @@ You can also use a dynamic key based on the current route:
 Don't use `$route` object here as it can cause problems with how `<NuxtPage>` renders pages with `<Suspense>`.
 ::
 
-Alternatively, `pageKey` can be passed as a `key` value via [`definePageMeta`](/docs/api/utils/define-page-meta) from the `<script>` section of your Vue component in the `/pages` directory.
+Alternatively, `pageKey` can be passed as a `key` value via [`definePageMeta`](/docs/3.x/api/utils/define-page-meta) from the `<script>` section of your Vue component in the `/pages` directory.
 
 ```vue [pages/my-page.vue]
 <script setup lang="ts">
 definePageMeta({
-  key: route => route.fullPath
+  key: route => route.fullPath,
 })
 </script>
 ```

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

@@ -22,7 +22,7 @@ You can use `<NuxtLayout />` component to activate the `default` layout on `app.
 
 ## 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/guide/directory-structure/layouts) directory.
+- `name`: Specify a layout name to be rendered, can be a string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the [`layouts/`](/docs/3.x/guide/directory-structure/layouts) directory.
   - **type**: `string`
   - **default**: `default`
 
@@ -55,7 +55,7 @@ Please note the layout name is normalized to kebab-case, so if your layout file
 Read more about dynamic layouts.
 ::
 
-- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`layouts/`](/docs/guide/directory-structure/layouts) directory.
+- `fallback`: If an invalid layout is passed to the `name` prop, no layout will be rendered. Specify a `fallback` layout to be rendered in this scenario. It **must** match the name of the corresponding layout file in the [`layouts/`](/docs/3.x/guide/directory-structure/layouts) directory.
   - **type**: `string`
   - **default**: `null`
 
@@ -66,8 +66,11 @@ Read more about dynamic layouts.
 ```vue [pages/some-page.vue]
 <template>
   <div>
-    <NuxtLayout name="custom" title="I am a custom layout">
-      <-- ... -->
+    <NuxtLayout
+      name="custom"
+      title="I am a custom layout"
+    >
+      <!-- ... -->
     </NuxtLayout>
   </div>
 </template>
@@ -93,7 +96,9 @@ console.log(layoutCustomProps.title) // I am a custom layout
 <template>
   <div>
     <NuxtLayout name="custom">
-      <template #header> Some header template content. </template>
+      <template #header>
+        Some header template content.
+      </template>
     </NuxtLayout>
   </div>
 </template>
@@ -139,7 +144,7 @@ function logFoo () {
 <script setup lang="ts">
 const foo = () => console.log('foo')
 defineExpose({
-  foo
+  foo,
 })
 </script>
 

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

@@ -67,7 +67,10 @@ For static files in the `/public` directory, such as PDFs or images, use the `ex
 
 ```vue [pages/index.vue]
 <template>
-  <NuxtLink to="/example-report.pdf" external>
+  <NuxtLink
+    to="/example-report.pdf"
+    external
+  >
     Download Report
   </NuxtLink>
 </template>
@@ -79,7 +82,10 @@ When pointing to a different application on the same domain, using the `external
 
 ```vue [pages/index.vue]
 <template>
-  <NuxtLink to="/another-app" external>
+  <NuxtLink
+    to="/another-app"
+    external
+  >
     Go to Another App
   </NuxtLink>
 </template>
@@ -117,12 +123,18 @@ When you need to overwrite this behavior you can use the `rel` or `noRel` props.
   </NuxtLink>
   <!-- <a href="https://twitter.com/nuxt_js" rel="noopener noreferrer">...</a> -->
 
-  <NuxtLink to="https://discord.nuxtjs.org" rel="noopener">
+  <NuxtLink
+    to="https://discord.nuxtjs.org"
+    rel="noopener"
+  >
     Nuxt Discord
   </NuxtLink>
   <!-- <a href="https://discord.nuxtjs.org" rel="noopener">...</a> -->
 
-  <NuxtLink to="/about" target="_blank">About page</NuxtLink>
+  <NuxtLink
+    to="/about"
+    target="_blank"
+  >About page</NuxtLink>
   <!-- <a href="/about" target="_blank" rel="noopener noreferrer">...</a> -->
 </template>
 ```
@@ -131,7 +143,10 @@ A `noRel` prop can be used to prevent the default `rel` attribute from being add
 
 ```vue [app.vue]
 <template>
-  <NuxtLink to="https://github.com/nuxt" no-rel>
+  <NuxtLink
+    to="https://github.com/nuxt"
+    no-rel
+  >
     Nuxt GitHub
   </NuxtLink>
   <!-- <a href="https://github.com/nuxt">...</a> -->
@@ -147,8 +162,13 @@ A `noRel` prop can be used to prevent the default `rel` attribute from being add
 Nuxt automatically includes smart prefetching. That means it detects when a link is visible (by default), either in the viewport or when scrolling and prefetches the JavaScript for those pages so that they are ready when the user clicks the link. Nuxt only loads the resources when the browser isn't busy and skips prefetching if your connection is offline or if you only have 2g connection.
 
 ```vue [pages/index.vue]
-<NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
-<NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>
+<NuxtLink to="/about" no-prefetch>
+About page not pre-fetched
+</NuxtLink>
+
+<NuxtLink to="/about" :prefetch="false">
+About page not pre-fetched
+</NuxtLink>
 ```
 
 ### Custom Prefetch Triggers
@@ -238,7 +258,7 @@ When not using `external`, `<NuxtLink>` supports all Vue Router's [`RouterLink`
 - `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/api/nuxt-config#crossoriginprefetch)) of links in the viewport. Used by the experimental [crossOriginPrefetch](/docs/api/nuxt-config#crossoriginprefetch) config.
+- `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.
 - `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.
@@ -256,7 +276,7 @@ Defaults can be overwritten, see [overwriting defaults](#overwriting-defaults) i
 
 ### In Nuxt Config
 
-You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](/docs/api/nuxt-config#defaults)
+You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](/docs/3.x/api/nuxt-config#defaults)
 
 ::important
 These options will likely be moved elsewhere in the future, such as into `app.config` or into the `app/` directory.
@@ -273,12 +293,12 @@ export default defineNuxtConfig({
         activeClass: 'router-link-active',
         exactActiveClass: 'router-link-exact-active',
         prefetchedClass: undefined, // can be any valid string class name
-        trailingSlash: undefined // can be 'append' or 'remove'
+        trailingSlash: undefined, // can be 'append' or 'remove'
         prefetch: true,
-        prefetchOn: { visibility: true } 
-      }
-    }
-  }
+        prefetchOn: { visibility: true },
+      },
+    },
+  },
 })
 ```
 
@@ -286,7 +306,7 @@ export default defineNuxtConfig({
 
 You can overwrite `<NuxtLink>` defaults by creating your own link component using `defineNuxtLink`.
 
-```js [components/MyNuxtLink.ts]
+```ts [components/MyNuxtLink.ts]
 export default defineNuxtLink({
   componentName: 'MyNuxtLink',
   /* see signature below for more */
@@ -299,10 +319,10 @@ You can then use `<MyNuxtLink />` component as usual with your new defaults.
 
 ```ts
 interface NuxtLinkOptions {
-  componentName?: string;
-  externalRelAttribute?: string;
-  activeClass?: string;
-  exactActiveClass?: string;
+  componentName?: string
+  externalRelAttribute?: string
+  activeClass?: string
+  exactActiveClass?: string
   trailingSlash?: 'append' | 'remove'
   prefetch?: boolean
   prefetchedClass?: string
@@ -311,7 +331,7 @@ interface NuxtLinkOptions {
     interaction: boolean
   }>
 }
-function defineNuxtLink(options: NuxtLinkOptions): Component {}
+function defineNuxtLink (options: NuxtLinkOptions): Component {}
 ```
 
 - `componentName`: A name for the component. Default is `NuxtLink`.

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

@@ -10,7 +10,7 @@ links:
 
 ## Usage
 
-Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`layouts/`](/docs/guide/directory-structure/layouts).
+Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/3.x/guide/directory-structure/app) or [`layouts/`](/docs/3.x/guide/directory-structure/layouts).
 
 ```vue [app.vue]
 <template>
@@ -42,7 +42,7 @@ To achieve full customization, you can implement your own one based on [its sour
 ::
 
 ::note
-You can hook into the underlying indicator instance using [the `useLoadingIndicator` composable](/docs/api/composables/use-loading-indicator), which will allow you to trigger start/finish events yourself.
+You can hook into the underlying indicator instance using [the `useLoadingIndicator` composable](/docs/3.x/api/composables/use-loading-indicator), which will allow you to trigger start/finish events yourself.
 ::
 
 ::tip

package/3.api/1.components/6.nuxt-error-boundary.md

@@ -29,16 +29,18 @@ The `<NuxtErrorBoundary>` uses Vue's [`onErrorCaptured`](https://vuejs.org/api/c
 - `#error`: Specify a fallback content to display in case of error.
 
   ```vue
-    <template>
-      <NuxtErrorBoundary>
-        <!-- ... -->
-        <template #error="{ error, clearError }">
-          <p>An error occurred: {{ error }}</p>
+  <template>
+    <NuxtErrorBoundary>
+      <!-- ... -->
+      <template #error="{ error, clearError }">
+        <p>An error occurred: {{ error }}</p>
 
-          <button @click="clearError">Clear error</button>
-        </template>
-      </NuxtErrorBoundary>
-    </template>
+        <button @click="clearError">
+          Clear error
+        </button>
+      </template>
+    </NuxtErrorBoundary>
+  </template>
   ```
 
 :read-more{to="/docs/getting-started/error-handling"}

package/3.api/2.composables/on-prehydrate.md

@@ -24,8 +24,8 @@ Call `onPrehydrate` in the setup function of a Vue component (e.g., in `<script
 ## Type
 
 ```ts [Signature]
-export function onPrehydrate(callback: (el: HTMLElement) => void): void
-export function onPrehydrate(callback: string | ((el: HTMLElement) => void), key?: string): undefined | string
+export function onPrehydrate (callback: (el: HTMLElement) => void): void
+export function onPrehydrate (callback: string | ((el: HTMLElement) => void), key?: string): undefined | string
 ```
 
 ## Parameters