@nuxt/docs-nightly 4.1.3-29313364.98ecc620 → 4.1.3-29314777.50febbbb

package/2.guide/3.going-further/7.layers.md

@@ -5,7 +5,7 @@ description: Nuxt provides a powerful system that allows you to extend the defau
 
 Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.
 
-:read-more{to="/docs/getting-started/layers"}
+:read-more{to="/docs/4.x/getting-started/layers"}
 
 A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file to indicate it is a layer.
 

package/2.guide/4.recipes/3.custom-usefetch.md

@@ -116,7 +116,7 @@ export function useAPI<T>(
 This example demonstrates how to use a custom `useFetch`, but the same structure is identical for a custom `useAsyncData`.
 ::
 
-:link-example{to="/docs/examples/advanced/use-custom-fetch-composable"}
+:link-example{to="/docs/4.x/examples/advanced/use-custom-fetch-composable"}
 
 :video-accordion{title="Watch a video about custom $fetch and Repository Pattern in Nuxt" videoId="jXH8Tr-exhI"}
 

package/2.guide/4.recipes/4.sessions-and-authentication.md

@@ -143,7 +143,7 @@ export default defineEventHandler(async (event) => {
 
 ## Protect App Routes
 
-Our data is safe with the server-side route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a [client-side middleware](https://nuxt.com/docs/guide/directory-structure/app/middleware) to protect the route on the client side and redirect users to the login page.
+Our data is safe with the server-side route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a [client-side middleware](https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware) to protect the route on the client side and redirect users to the login page.
 
 `nuxt-auth-utils` provides a convenient `useUserSession` composable which we'll use to check if the user is logged in, and redirect them if they are not.
 

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

@@ -39,7 +39,7 @@ export default defineNuxtConfig({
 })
 ```
 
-:read-more{title="NuxtLink" to="/docs/api/components/nuxt-link"}
+:read-more{title="NuxtLink" to="/docs/4.x/api/components/nuxt-link"}
 
 ### Hybrid Rendering
 
@@ -68,7 +68,7 @@ export default defineNuxtConfig({
 
 Nuxt server will automatically register corresponding middleware and wrap routes with cache handlers using Nitro caching layer.
 
-:read-more{title="Hybrid rendering" to="/docs/guide/concepts/rendering#hybrid-rendering"}
+:read-more{title="Hybrid rendering" to="/docs/4.x/guide/concepts/rendering#hybrid-rendering"}
 
 ### Lazy Loading Components
 
@@ -90,7 +90,7 @@ const show = ref(false)
 
 By using the Lazy prefix you can delay loading the component code until the right moment, which can be helpful for optimizing your JavaScript bundle size.
 
-:read-more{title="Lazy loading components" to="/docs/guide/directory-structure/app/components#dynamic-imports"}
+:read-more{title="Lazy loading components" to="/docs/4.x/guide/directory-structure/app/components#dynamic-imports"}
 
 ### Lazy Hydration
 
@@ -106,13 +106,13 @@ It is not always necessary to hydrate (or make interactive) all the components o
 
 To optimize your app, you may want to delay the hydration of some components until they're visible, or until the browser is done with more important tasks.
 
-:read-more{title="Lazy hydration" to="/docs/guide/directory-structure/app/components#delayed-or-lazy-hydration"}
+:read-more{title="Lazy hydration" to="/docs/4.x/guide/directory-structure/app/components#delayed-or-lazy-hydration"}
 
 ### Fetching data
 
 To avoid fetching same data twice (once on the server and once on client) Nuxt provides [`useFetch`](/docs/4.x/api/composables/use-fetch) and [`useAsyncData`](/docs/4.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"}
+:read-more{title="Data fetching" to="/docs/4.x/getting-started/data-fetching"}
 
 ## Core Nuxt Modules
 

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

@@ -14,7 +14,7 @@ links:
 
 Nuxt provides the `<NuxtClientFallback>` component to render its content on the client if any of its children trigger an error in SSR.
 
-::note{to="/docs/guide/going-further/experimental-features#clientfallback"}
+::note{to="/docs/4.x/guide/going-further/experimental-features#clientfallback"}
 This component is experimental and in order to use it you must enable the `experimental.clientFallback` option in your `nuxt.config`.
 ::
 

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

@@ -37,4 +37,4 @@ The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.htm
 </template>
 ```
 
-:link-example{to="/docs/examples/advanced/teleport"}
+:link-example{to="/docs/4.x/examples/advanced/teleport"}

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

@@ -89,7 +89,7 @@ definePageMeta({
 </script>
 ```
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/4.x/examples/routing/pages"}
 
 ## Page's Ref
 
@@ -151,4 +151,4 @@ console.log(attrs.foobar) // Outputs: 123
 </script>
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/pages"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/pages"}

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

@@ -18,7 +18,7 @@ You can use `<NuxtLayout />` component to activate the `default` layout on `app.
 </template>
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/layouts"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
 
 ## Props
 
@@ -51,7 +51,7 @@ Please note the layout name is normalized to kebab-case, so if your layout file
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/app/layouts"}
+::read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
 Read more about dynamic layouts.
 ::
 
@@ -111,7 +111,7 @@ console.log(layoutCustomProps.title) // I am a custom layout
 
 ::
 
-:read-more{to="/docs/getting-started/transitions"}
+:read-more{to="/docs/4.x/getting-started/transitions"}
 
 ## Layout's Ref
 
@@ -153,4 +153,4 @@ defineExpose({
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/app/layouts"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}

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

@@ -249,7 +249,7 @@ When not using `external`, `<NuxtLink>` supports all Vue Router's [`RouterLink`
 - `rel`: A `rel` attribute value to apply on the link. Defaults to `"noopener noreferrer"` for external links.
 
 ::tip
-Defaults can be overwritten, see [overwriting defaults](/docs/api/components/nuxt-link#overwriting-defaults) if you want to change them.
+Defaults can be overwritten, see [overwriting defaults](/docs/4.x/api/components/nuxt-link#overwriting-defaults) if you want to change them.
 ::
 
 ## Overwriting Defaults
@@ -323,4 +323,4 @@ function defineNuxtLink(options: NuxtLinkOptions): Component {}
 - `prefetchOn`: Granular control of which prefetch strategies to apply by default.
 - `prefetchedClass`: A default class to apply to links that have been prefetched.
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/4.x/examples/routing/pages"}

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

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

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

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

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

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

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

@@ -74,7 +74,7 @@ const { data: user } = useAsyncData(
 [`useAsyncData`](/docs/4.x/api/composables/use-async-data) is a reserved function name transformed by the compiler, so you should not name your own function [`useAsyncData`](/docs/4.x/api/composables/use-async-data).
 ::
 
-:read-more{to="/docs/getting-started/data-fetching#useasyncdata"}
+:read-more{to="/docs/4.x/getting-started/data-fetching#useasyncdata"}
 
 ## Params
 
@@ -107,7 +107,7 @@ The `handler` function should be **side-effect free** to ensure predictable beha
 Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience.
 ::
 
-::read-more{to="/docs/api/composables/use-lazy-async-data"}
+::read-more{to="/docs/4.x/api/composables/use-lazy-async-data"}
 You can use `useLazyAsyncData` to have the same behavior as `lazy: true` with `useAsyncData`.
 ::
 
@@ -213,4 +213,4 @@ interface AsyncDataExecuteOptions {
 type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 ```
 
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/4.x/getting-started/data-fetching"}

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

@@ -172,4 +172,4 @@ export default defineEventHandler(event => {
 })
 ```
 
-:link-example{to="/docs/examples/advanced/use-cookie"}
+:link-example{to="/docs/4.x/examples/advanced/use-cookie"}

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

@@ -52,4 +52,4 @@ if (error.value) {
 </script>
 ```
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/4.x/getting-started/error-handling"}

package/3.api/2.composables/use-fetch.md

@@ -96,7 +96,7 @@ If you encounter the `data` variable destructured from a `useFetch` returns a st
 
 :video-accordion{title="Watch the video from Alexander Lichter to avoid using useFetch the wrong way" videoId="njsGVmcWviY"}
 
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/4.x/getting-started/data-fetching"}
 
 ### Reactive Fetch Options
 
@@ -201,7 +201,7 @@ type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 | `watch` | `MultiWatchSources \| false` | - | Array of reactive sources to watch and auto-refresh. `false` disables watching. |
 | `deep` | `boolean` | `false` | Return data in a deep ref object. |
 | `dedupe` | `'cancel' \| 'defer'` | `'cancel'` | Avoid fetching same key more than once at a time. |
-| `$fetch` | `typeof globalThis.$fetch` | - | Custom $fetch implementation. See [Custom useFetch in Nuxt](/docs/guide/recipes/custom-usefetch) |
+| `$fetch` | `typeof globalThis.$fetch` | - | Custom $fetch implementation. See [Custom useFetch in Nuxt](/docs/4.x/guide/recipes/custom-usefetch) |
 
 ::note
 All fetch options can be given a `computed` or `ref` value. These will be watched and new requests made automatically with any new values if they are updated.
@@ -240,6 +240,6 @@ If you have not fetched data on the server (for example, with `server: false`),
 
 ### Examples
 
-:link-example{to="/docs/examples/advanced/use-custom-fetch-composable"}
+:link-example{to="/docs/4.x/examples/advanced/use-custom-fetch-composable"}
 
-:link-example{to="/docs/examples/features/data-fetching"}
+:link-example{to="/docs/4.x/examples/features/data-fetching"}

package/3.api/2.composables/use-head.md

@@ -10,7 +10,7 @@ links:
 
 The [`useHead`](/docs/4.x/api/composables/use-head) composable function allows you to manage your head tags in a programmatic and reactive way, powered by [Unhead](https://unhead.unjs.io). If the data comes from a user or other untrusted source, we recommend you check out [`useHeadSafe`](/docs/4.x/api/composables/use-head-safe).
 
-:read-more{to="/docs/getting-started/seo-meta"}
+:read-more{to="/docs/4.x/getting-started/seo-meta"}
 
 ## Type
 

package/3.api/2.composables/use-lazy-async-data.md

@@ -16,7 +16,7 @@ By default, [`useAsyncData`](/docs/4.x/api/composables/use-async-data) blocks na
 `useLazyAsyncData` has the same signature as [`useAsyncData`](/docs/4.x/api/composables/use-async-data).
 ::
 
-:read-more{to="/docs/api/composables/use-async-data"}
+:read-more{to="/docs/4.x/api/composables/use-async-data"}
 
 ## Example
 
@@ -44,4 +44,4 @@ watch(count, (newCount) => {
 `useLazyAsyncData` is a reserved function name transformed by the compiler, so you should not name your own function `useLazyAsyncData`.
 ::
 
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/4.x/getting-started/data-fetching"}

package/3.api/2.composables/use-lazy-fetch.md

@@ -20,7 +20,7 @@ By default, [`useFetch`](/docs/4.x/api/composables/use-fetch) blocks navigation
 Awaiting `useLazyFetch` in this mode only ensures the call is initialized. On client-side navigation, data may not be immediately available, and you should make sure to handle the pending state in your app.
 ::
 
-:read-more{to="/docs/api/composables/use-fetch"}
+:read-more{to="/docs/4.x/api/composables/use-fetch"}
 
 ## Example
 
@@ -52,4 +52,4 @@ watch(posts, (newPosts) => {
 `useLazyFetch` is a reserved function name transformed by the compiler, so you should not name your own function `useLazyFetch`.
 ::
 
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/4.x/getting-started/data-fetching"}

package/3.api/2.composables/use-nuxt-app.md

@@ -268,7 +268,7 @@ Using a new experimental feature, it is possible to enable native async context
 Native async context support works currently in Bun and Node.
 ::
 
-:read-more{to="/docs/guide/going-further/experimental-features#asynccontext"}
+:read-more{to="/docs/4.x/guide/going-further/experimental-features#asynccontext"}
 
 ## tryUseNuxtApp
 

package/3.api/2.composables/use-router.md

@@ -78,7 +78,7 @@ Read more about the browser's History API.
 
 However, Nuxt has a concept of **route middleware** that simplifies the implementation of navigation guards and provides a better developer experience.
 
-:read-more{to="/docs/guide/directory-structure/app/middleware"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
 
 ## Promise and Error Handling
 

package/3.api/2.composables/use-runtime-config.md

@@ -22,7 +22,7 @@ export default defineEventHandler((event) => {
 })
 ```
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
 
 ## Define Runtime Config
 
@@ -48,7 +48,7 @@ export default defineNuxtConfig({
 Variables that need to be accessible on the server are added directly inside `runtimeConfig`. Variables that need to be accessible on both the client and the server are defined in `runtimeConfig.public`.
 ::
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
 
 ## Access Runtime Config
 
@@ -76,7 +76,7 @@ In this example, since `apiBase` is defined within the `public` namespace, it is
 
 It is possible to update runtime config values using a matching environment variable name prefixed with `NUXT_`.
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
 
 ### Using the `.env` File
 
@@ -95,7 +95,7 @@ Any environment variables set within `.env` file are accessed using `process.env
 In **production runtime**, you should use platform environment variables and `.env` is not used.
 ::
 
-:read-more{to="/docs/guide/directory-structure/env"}
+:read-more{to="/docs/4.x/guide/directory-structure/env"}
 
 ## `app` namespace
 
@@ -139,4 +139,4 @@ export default defineEventHandler((event) => {
 })
 ```
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}

package/3.api/2.composables/use-seo-meta.md

@@ -14,7 +14,7 @@ This helps you avoid common mistakes, such as using `name` instead of `property`
 This is the recommended way to add meta tags to your site as it is XSS safe and has full TypeScript support.
 ::
 
-:read-more{to="/docs/getting-started/seo-meta"}
+:read-more{to="/docs/4.x/getting-started/seo-meta"}
 
 ## Usage
 
@@ -48,7 +48,7 @@ useSeoMeta({
 
 There are over 100 parameters. See the [full list of parameters in the source code](https://github.com/harlan-zw/zhead/blob/main/packages/zhead/src/metaFlat.ts#L1035).
 
-:read-more{to="/docs/getting-started/seo-meta"}
+:read-more{to="/docs/4.x/getting-started/seo-meta"}
 
 ## Performance
 

package/3.api/2.composables/use-server-seo-meta.md

@@ -10,7 +10,7 @@ links:
 
 Just like [`useSeoMeta`](/docs/4.x/api/composables/use-seo-meta), `useServerSeoMeta` composable lets you define your site's SEO meta tags as a flat object with full TypeScript support.
 
-:read-more{to="/docs/api/composables/use-seo-meta"}
+:read-more{to="/docs/4.x/api/composables/use-seo-meta"}
 
 In most instances, the meta doesn't need to be reactive as robots will only scan the initial load. So we recommend using [`useServerSeoMeta`](/docs/4.x/api/composables/use-server-seo-meta) as a performance-focused utility that will not do anything (or return a `head` object) on the client.
 
@@ -24,4 +24,4 @@ useServerSeoMeta({
 
 Parameters are exactly the same as with [`useSeoMeta`](/docs/4.x/api/composables/use-seo-meta)
 
-:read-more{to="/docs/getting-started/seo-meta"}
+:read-more{to="/docs/4.x/getting-started/seo-meta"}

package/3.api/2.composables/use-state.md

@@ -15,7 +15,7 @@ links:
 const count = useState('counter', () => Math.round(Math.random() * 100))
 ```
 
-:read-more{to="/docs/getting-started/state-management"}
+:read-more{to="/docs/4.x/getting-started/state-management"}
 
 ::important
 Because the data inside `useState` will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.

package/3.api/3.utils/$fetch.md

@@ -35,7 +35,7 @@ const { data } = await useFetch('/api/item')
 </script>
 ```
 
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/4.x/getting-started/data-fetching"}
 
 You can use `$fetch` in any methods that are executed only on client-side.
 

package/3.api/3.utils/call-once.md

@@ -54,11 +54,11 @@ await callOnce(async () => {
 `navigation` mode is available since [Nuxt v3.15](/blog/v3-15).
 ::
 
-::tip{to="/docs/getting-started/state-management#usage-with-pinia"}
+::tip{to="/docs/4.x/getting-started/state-management#usage-with-pinia"}
 `callOnce` is useful in combination with the [Pinia module](/modules/pinia) to call store actions.
 ::
 
-:read-more{to="/docs/getting-started/state-management"}
+:read-more{to="/docs/4.x/getting-started/state-management"}
 
 ::warning
 Note that `callOnce` doesn't return anything. You should use [`useAsyncData`](/docs/4.x/api/composables/use-async-data) or [`useFetch`](/docs/4.x/api/composables/use-fetch) if you want to do data fetching during SSR.

package/3.api/3.utils/clear-error.md

@@ -26,4 +26,4 @@ clearError({ redirect: '/homepage' })
 
 Errors are set in state using [`useError()`](/docs/4.x/api/composables/use-error). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/4.x/getting-started/error-handling"}

package/3.api/3.utils/create-error.md

@@ -52,4 +52,4 @@ export default eventHandler(() => {
 
 In API routes, using `createError` by passing an object with a short `statusMessage` is recommended because it can be accessed on the client side. Otherwise, a `message` passed to `createError` on an API route will not propagate to the client. Alternatively, you can use the `data` property to pass data back to the client. In any case, always consider avoiding to put dynamic user input to the message to avoid potential security issues.
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/4.x/getting-started/error-handling"}

package/3.api/3.utils/define-nuxt-plugin.md

@@ -16,7 +16,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/plugins#creating-plugins"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/plugins#creating-plugins"}
 
 ## Type
 

package/3.api/3.utils/define-page-meta.md

@@ -18,7 +18,7 @@ definePageMeta({
 </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"}
 
 ## Type
 
@@ -62,7 +62,7 @@ interface PageMeta {
 
   - **Type**: `string`
 
-    You may define a [custom regular expression](/docs/api/composables/use-nuxt-app#using-a-custom-regular-expression) if you have a more complex pattern than can be expressed with the file name.
+    You may define a [custom regular expression](/docs/4.x/api/composables/use-nuxt-app#using-a-custom-regular-expression) if you have a more complex pattern than can be expressed with the file name.
 
   **`props`**
   

package/3.api/3.utils/define-route-rules.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-::read-more{to="/docs/guide/going-further/experimental-features#inlinerouterules" icon="i-lucide-star"}
+::read-more{to="/docs/4.x/guide/going-further/experimental-features#inlinerouterules" icon="i-lucide-star"}
 This feature is experimental and in order to use it you must enable the `experimental.inlineRouteRules` option in your `nuxt.config`.
 ::
 
@@ -47,6 +47,6 @@ When running [`nuxt build`](/docs/4.x/api/commands/build), the home page will be
 
 For more control, such as if you are using a custom `path` or `alias` set in the page's [`definePageMeta`](/docs/4.x/api/utils/define-page-meta), you should set `routeRules` directly within your `nuxt.config`.
 
-::read-more{to="/docs/guide/concepts/rendering#hybrid-rendering" icon="i-lucide-medal"}
+::read-more{to="/docs/4.x/guide/concepts/rendering#hybrid-rendering" icon="i-lucide-medal"}
 Read more about the `routeRules`.
 ::

package/3.api/3.utils/navigate-to.md

@@ -68,7 +68,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 
 In this case, `navigateTo` will be executed but not returned, which may lead to unexpected behavior.
 
-:read-more{to="/docs/guide/directory-structure/app/middleware"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
 
 ### Navigating to an External URL
 

package/3.api/3.utils/preload-route-components.md

@@ -14,7 +14,7 @@ Preloading routes loads the components of a given route that the user might navi
 Nuxt already automatically preloads the necessary routes if you're using the `NuxtLink` component.
 ::
 
-:read-more{to="/docs/api/components/nuxt-link"}
+:read-more{to="/docs/4.x/api/components/nuxt-link"}
 
 ## Example
 
@@ -34,7 +34,7 @@ const submit = async () => {
 }
 ```
 
-:read-more{to="/docs/api/utils/navigate-to"}
+:read-more{to="/docs/4.x/api/utils/navigate-to"}
 
 ::note
 On server, `preloadRouteComponents` will have no effect.

package/3.api/3.utils/refresh-cookie.md

@@ -35,7 +35,7 @@ const loggedIn = computed(() => !!tokenCookie.value)
 </script>
 ```
 
-::note{to="/docs/guide/going-further/experimental-features#cookiestore"}
+::note{to="/docs/4.x/guide/going-further/experimental-features#cookiestore"}
 You can enable experimental `cookieStore` option to automatically refresh `useCookie` value when cookie changes in the browser.
 ::
 

package/3.api/3.utils/refresh-nuxt-data.md

@@ -88,4 +88,4 @@ async function refresh () {
 If you have access to the `asyncData` instance, it is recommended to use its `refresh` or `execute` method as the preferred way to refetch the data.
 ::
 
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/4.x/getting-started/data-fetching"}

package/3.api/3.utils/reload-nuxt-app.md

@@ -14,7 +14,7 @@ links:
 
 By default, it will also save the current `state` of your app (that is, any state you could access with `useState`).
 
-::read-more{to="/docs/guide/going-further/experimental-features#restorestate" icon="i-lucide-star"}
+::read-more{to="/docs/4.x/guide/going-further/experimental-features#restorestate" icon="i-lucide-star"}
 You can enable experimental restoration of this state by enabling the `experimental.restoreState` option in your `nuxt.config` file.
 ::
 

package/3.api/3.utils/set-response-status.md

@@ -33,4 +33,4 @@ if (event) {
 In the browser, `setResponseStatus` will have no effect.
 ::
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/4.x/getting-started/error-handling"}

package/3.api/3.utils/show-error.md

@@ -28,4 +28,4 @@ The error is set in the state using [`useError()`](/docs/4.x/api/composables/use
 `showError` calls the `app:error` hook.
 ::
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/4.x/getting-started/error-handling"}

package/3.api/3.utils/update-app-config.md

@@ -24,4 +24,4 @@ updateAppConfig(newAppConfig)
 console.log(appConfig) // { foo: 'baz' }
 ```
 
-:read-more{to="/docs/guide/directory-structure/app-config"}
+:read-more{to="/docs/4.x/guide/directory-structure/app-config"}

package/3.api/4.commands/generate.md

@@ -36,6 +36,6 @@ Option | Default | Description
 `--envName` |  | The environment to use when resolving configuration overrides (default is `production` when building, and `development` when running the dev server)
 <!--/generate-opts-->
 
-::read-more{to="/docs/getting-started/deployment#static-hosting"}
+::read-more{to="/docs/4.x/getting-started/deployment#static-hosting"}
 Read more about pre-rendering and static hosting.
 ::

package/3.api/4.commands/typecheck.md

@@ -37,6 +37,6 @@ Option | Default | Description
 This command sets `process.env.NODE_ENV` to `production`. To override, define `NODE_ENV` in a [`.env`](/docs/4.x/guide/directory-structure/env) file or as a command-line argument.
 ::
 
-::read-more{to="/docs/guide/concepts/typescript#type-checking"}
+::read-more{to="/docs/4.x/guide/concepts/typescript#type-checking"}
 Read more on how to enable type-checking at build or development time.
 ::

package/3.api/6.advanced/1.hooks.md

@@ -3,7 +3,7 @@ title: 'Lifecycle Hooks'
 description: Nuxt provides a powerful hooking system to expand almost every aspect using hooks.
 ---
 
-:read-more{to="/docs/guide/going-further/hooks"}
+:read-more{to="/docs/4.x/guide/going-further/hooks"}
 
 ## App Hooks (runtime)