@nuxt/docs-nightly 4.1.3-29300098.2f71703a → 4.1.3-29303775.dc69e26c

package/1.getting-started/10.data-fetching.md

@@ -4,23 +4,23 @@ description: Nuxt provides composables to handle data fetching within your appli
 navigation.icon: i-lucide-cable
 ---
 
-Nuxt comes with two composables and a built-in library to perform data-fetching in browser or server environments: `useFetch`, [`useAsyncData`](/docs/api/composables/use-async-data) and `$fetch`.
+Nuxt comes with two composables and a built-in library to perform data-fetching in browser or server environments: `useFetch`, [`useAsyncData`](/docs/4.x/api/composables/use-async-data) and `$fetch`.
 
 In a nutshell:
 
-- [`$fetch`](/docs/api/utils/dollarfetch) is the simplest way to make a network request.
-- [`useFetch`](/docs/api/composables/use-fetch) is a wrapper around `$fetch` that fetches data only once in [universal rendering](/docs/guide/concepts/rendering#universal-rendering).
-- [`useAsyncData`](/docs/api/composables/use-async-data) is similar to `useFetch` but offers more fine-grained control.
+- [`$fetch`](/docs/4.x/api/utils/dollarfetch) is the simplest way to make a network request.
+- [`useFetch`](/docs/4.x/api/composables/use-fetch) is a wrapper around `$fetch` that fetches data only once in [universal rendering](/docs/4.x/guide/concepts/rendering#universal-rendering).
+- [`useAsyncData`](/docs/4.x/api/composables/use-async-data) is similar to `useFetch` but offers more fine-grained control.
 
 Both `useFetch` and `useAsyncData` share a common set of options and patterns that we will detail in the last sections.
 
 ## The need for `useFetch` and `useAsyncData`
 
-Nuxt is a framework which can run isomorphic (or universal) code in both server and client environments. If the [`$fetch` function](/docs/api/utils/dollarfetch) is used to perform data fetching in the setup function of a Vue component, this may cause data to be fetched twice, once on the server (to render the HTML) and once again on the client (when the HTML is hydrated). This can cause hydration issues, increase the time to interactivity and cause unpredictable behavior.
+Nuxt is a framework which can run isomorphic (or universal) code in both server and client environments. If the [`$fetch` function](/docs/4.x/api/utils/dollarfetch) is used to perform data fetching in the setup function of a Vue component, this may cause data to be fetched twice, once on the server (to render the HTML) and once again on the client (when the HTML is hydrated). This can cause hydration issues, increase the time to interactivity and cause unpredictable behavior.
 
-The [`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data) composables solve this problem by ensuring that if an API call is made on the server, the data is forwarded to the client in the payload.
+The [`useFetch`](/docs/4.x/api/composables/use-fetch) and [`useAsyncData`](/docs/4.x/api/composables/use-async-data) composables solve this problem by ensuring that if an API call is made on the server, the data is forwarded to the client in the payload.
 
-The payload is a JavaScript object accessible through [`useNuxtApp().payload`](/docs/api/composables/use-nuxt-app#payload). It is used on the client to avoid refetching the same data when the code is executed in the browser [during hydration](/docs/guide/concepts/rendering#universal-rendering).
+The payload is a JavaScript object accessible through [`useNuxtApp().payload`](/docs/4.x/api/composables/use-nuxt-app#payload). It is used on the client to avoid refetching the same data when the code is executed in the browser [during hydration](/docs/4.x/guide/concepts/rendering#universal-rendering).
 
 ::tip
 Use the [Nuxt DevTools](https://devtools.nuxt.com) to inspect this data in the **Payload tab**.
@@ -59,7 +59,7 @@ In the example above, `useFetch` would make sure that the request would occur in
 Nuxt uses Vue's [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense) component under the hood to prevent navigation before every async data is available to the view. The data fetching composables can help you leverage this feature and use what suits best on a per-call basis.
 
 ::note
-You can add the [`<NuxtLoadingIndicator>`](/docs/api/components/nuxt-loading-indicator) to add a progress bar between page navigations.
+You can add the [`<NuxtLoadingIndicator>`](/docs/4.x/api/components/nuxt-loading-indicator) to add a progress bar between page navigations.
 ::
 
 ## `$fetch`
@@ -80,8 +80,8 @@ async function addTodo() {
 ```
 
 ::warning
-Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](#the-need-for-usefetch-and-useasyncdata). :br
-It is recommended to use `$fetch` for client-side interactions (event-based) or combined with [`useAsyncData`](#useasyncdata) when fetching the initial component data.
+Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](/docs/getting-started/data-fetching#the-need-for-usefetch-and-useasyncdata). :br
+It is recommended to use `$fetch` for client-side interactions (event-based) or combined with [`useAsyncData`](/docs/getting-started/data-fetching#useasyncdata) when fetching the initial component data.
 ::
 
 ::read-more{to="/docs/api/utils/dollarfetch"}
@@ -90,7 +90,7 @@ Read more about `$fetch`.
 
 ### Pass Client Headers to the API
 
-When calling `useFetch` on the server, Nuxt will use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy client headers and cookies (with the exception of headers not meant to be forwarded, like `host`).
+When calling `useFetch` on the server, Nuxt will use [`useRequestFetch`](/docs/4.x/api/composables/use-request-fetch) to proxy client headers and cookies (with the exception of headers not meant to be forwarded, like `host`).
 
 ```vue
 <script setup lang="ts">
@@ -103,7 +103,7 @@ const { data } = await useFetch('/api/echo');
 export default defineEventHandler(event => parseCookies(event))
 ```
 
-Alternatively, the example below shows how to use [`useRequestHeaders`](/docs/api/composables/use-request-headers) to access and send cookies to the API from a server-side request (originating on the client). Using an isomorphic `$fetch` call, we ensure that the API endpoint has access to the same `cookie` header originally sent by the user's browser. This is only necessary if you aren't using `useFetch`.
+Alternatively, the example below shows how to use [`useRequestHeaders`](/docs/4.x/api/composables/use-request-headers) to access and send cookies to the API from a server-side request (originating on the client). Using an isomorphic `$fetch` call, we ensure that the API endpoint has access to the same `cookie` header originally sent by the user's browser. This is only necessary if you aren't using `useFetch`.
 
 ```vue
 <script setup lang="ts">
@@ -116,7 +116,7 @@ async function getCurrentUser() {
 ```
 
 ::tip
-You can also use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy headers to the call automatically.
+You can also use [`useRequestFetch`](/docs/4.x/api/composables/use-request-fetch) to proxy headers to the call automatically.
 ::
 
 ::caution
@@ -130,7 +130,7 @@ Be very careful before proxying headers to an external API and just include head
 
 ## `useFetch`
 
-The [`useFetch`](/docs/api/composables/use-fetch) composable uses `$fetch` under-the-hood to make SSR-safe network calls in the setup function.
+The [`useFetch`](/docs/4.x/api/composables/use-fetch) composable uses `$fetch` under-the-hood to make SSR-safe network calls in the setup function.
 
 ```vue twoslash [app/app.vue]
 <script setup lang="ts">
@@ -142,7 +142,7 @@ const { data: count } = await useFetch('/api/count')
 </template>
 ```
 
-This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility.
+This composable is a wrapper around the [`useAsyncData`](/docs/4.x/api/composables/use-async-data) composable and `$fetch` utility.
 
 :video-accordion{title="Watch a video from Alexander Lichter to avoid using useFetch the wrong way" videoId="njsGVmcWviY"}
 
@@ -156,12 +156,12 @@ The `useAsyncData` composable is responsible for wrapping async logic and return
 
 ::tip
 `useFetch(url)` is nearly equivalent to `useAsyncData(url, () => event.$fetch(url))`. :br
-It's developer experience sugar for the most common use case. (You can find out more about `event.fetch` at [`useRequestFetch`](/docs/api/composables/use-request-fetch).)
+It's developer experience sugar for the most common use case. (You can find out more about `event.fetch` at [`useRequestFetch`](/docs/4.x/api/composables/use-request-fetch).)
 ::
 
 :video-accordion{title="Watch a video from Alexander Lichter to dig deeper into the difference between useFetch and useAsyncData" videoId="0X-aOpSGabA"}
 
-There are some cases when using the [`useFetch`](/docs/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use [`useAsyncData`](/docs/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable.
+There are some cases when using the [`useFetch`](/docs/4.x/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use [`useAsyncData`](/docs/4.x/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable.
 
 ```vue [app/pages/users.vue]
 <script setup lang="ts">
@@ -173,11 +173,11 @@ const { data, error } = await useAsyncData(() => myGetFunction('users'))
 ```
 
 ::note
-The first argument of [`useAsyncData`](/docs/api/composables/use-async-data) is a unique key used to cache the response of the second argument, the querying function. This key can be ignored by directly passing the querying function, the key will be auto-generated.
+The first argument of [`useAsyncData`](/docs/4.x/api/composables/use-async-data) is a unique key used to cache the response of the second argument, the querying function. This key can be ignored by directly passing the querying function, the key will be auto-generated.
 :br :br
 Since the autogenerated key only takes into account the file and line where `useAsyncData` is invoked, it is recommended to always create your own key to avoid unwanted behavior, like when you are creating your own custom composable wrapping `useAsyncData`.
 :br :br
-Setting a key can be useful to share the same data between components using [`useNuxtData`](/docs/api/composables/use-nuxt-data) or to [refresh specific data](/docs/api/utils/refresh-nuxt-data#refresh-specific-data).
+Setting a key can be useful to share the same data between components using [`useNuxtData`](/docs/4.x/api/composables/use-nuxt-data) or to [refresh specific data](/docs/4.x/api/utils/refresh-nuxt-data#refresh-specific-data).
 ::
 
 ```vue [app/pages/users/[id\\].vue]
@@ -208,7 +208,7 @@ const { data: discounts, status } = await useAsyncData('cart-discount', async ()
 ```
 
 ::note
-`useAsyncData` is for fetching and caching data, not triggering side effects like calling Pinia actions, as this can cause unintended behavior such as repeated executions with nullish values. If you need to trigger side effects, use the [`callOnce`](/docs/api/utils/call-once) utility to do so.
+`useAsyncData` is for fetching and caching data, not triggering side effects like calling Pinia actions, as this can cause unintended behavior such as repeated executions with nullish values. If you need to trigger side effects, use the [`callOnce`](/docs/4.x/api/utils/call-once) utility to do so.
 
 ```vue
 <script setup lang="ts">
@@ -246,7 +246,7 @@ If you have not fetched data on the server (for example, with `server: false`),
 
 ## Options
 
-[`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) return the same object type and accept a common set of options as their last argument. They can help you control the composables behavior, such as navigation blocking, caching or execution.
+[`useAsyncData`](/docs/4.x/api/composables/use-async-data) and [`useFetch`](/docs/4.x/api/composables/use-fetch) return the same object type and accept a common set of options as their last argument. They can help you control the composables behavior, such as navigation blocking, caching or execution.
 
 ### Lazy
 
@@ -272,7 +272,7 @@ const { status, data: posts } = useFetch('/api/posts', {
 </template>
 ```
 
-You can alternatively use [`useLazyFetch`](/docs/api/composables/use-lazy-fetch) and `useLazyAsyncData` as convenient methods to perform the same.
+You can alternatively use [`useLazyFetch`](/docs/4.x/api/composables/use-lazy-fetch) and `useLazyAsyncData` as convenient methods to perform the same.
 
 ```vue twoslash
 <script setup lang="ts">
@@ -307,7 +307,7 @@ const { status, data: comments } = useFetch('/api/comments', {
 })
 ```
 
-The `useFetch` composable is meant to be invoked in setup method or called directly at the top level of a function in lifecycle hooks, otherwise you should use [`$fetch` method](#fetch).
+The `useFetch` composable is meant to be invoked in setup method or called directly at the top level of a function in lifecycle hooks, otherwise you should use [`$fetch` method](/docs/getting-started/data-fetching#fetch).
 
 ### Minimize payload size
 
@@ -347,13 +347,13 @@ Both `pick` and `transform` don't prevent the unwanted data from being fetched i
 
 #### Keys
 
-[`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data) use keys to prevent refetching the same data.
+[`useFetch`](/docs/4.x/api/composables/use-fetch) and [`useAsyncData`](/docs/4.x/api/composables/use-async-data) use keys to prevent refetching the same data.
 
-- [`useFetch`](/docs/api/composables/use-fetch) uses the provided URL as a key. Alternatively, a `key` value can be provided in the `options` object passed as a last argument.
-- [`useAsyncData`](/docs/api/composables/use-async-data) uses its first argument as a key if it is a string. If the first argument is the handler function that performs the query, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you.
+- [`useFetch`](/docs/4.x/api/composables/use-fetch) uses the provided URL as a key. Alternatively, a `key` value can be provided in the `options` object passed as a last argument.
+- [`useAsyncData`](/docs/4.x/api/composables/use-async-data) uses its first argument as a key if it is a string. If the first argument is the handler function that performs the query, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you.
 
 ::tip
-To get the cached data by key, you can use [`useNuxtData`](/docs/api/composables/use-nuxt-data)
+To get the cached data by key, you can use [`useNuxtData`](/docs/4.x/api/composables/use-nuxt-data)
 ::
 
 :video-accordion{title="Watch a video from Vue School on caching data with the key option" videoId="1026410044" platform="vimeo"}
@@ -431,10 +431,10 @@ const { data, error, execute, refresh } = await useFetch('/api/users')
 </template>
 ```
 
-The `execute` function is an alias for `refresh` that works in exactly the same way but is more semantic for cases when the fetch is [not immediate](#not-immediate).
+The `execute` function is an alias for `refresh` that works in exactly the same way but is more semantic for cases when the fetch is [not immediate](/docs/getting-started/data-fetching#not-immediate).
 
 ::tip
-To globally refetch or invalidate cached data, see [`clearNuxtData`](/docs/api/utils/clear-nuxt-data) and [`refreshNuxtData`](/docs/api/utils/refresh-nuxt-data).
+To globally refetch or invalidate cached data, see [`clearNuxtData`](/docs/4.x/api/utils/clear-nuxt-data) and [`refreshNuxtData`](/docs/4.x/api/utils/refresh-nuxt-data).
 ::
 
 #### Clear
@@ -479,7 +479,7 @@ const { data, error, refresh } = await useFetch(`/api/users/${id.value}`, {
 </script>
 ```
 
-If you need to change the URL based on a reactive value, you may want to use a [computed URL](#computed-url) instead.
+If you need to change the URL based on a reactive value, you may want to use a [computed URL](/docs/getting-started/data-fetching#computed-url) instead.
 
 #### Computed URL
 
@@ -499,7 +499,7 @@ const { data, status } = useLazyFetch('/api/user', {
 
 In the case of more complex URL construction, you may use a callback as a [computed getter](https://vuejs.org/guide/essentials/computed.html) that returns the URL string.
 
-Every time a dependency changes, the data will be fetched using the newly constructed URL. Combine this with [not-immediate](#not-immediate), and you can wait until the reactive element changes before fetching.
+Every time a dependency changes, the data will be fetched using the newly constructed URL. Combine this with [not-immediate](/docs/getting-started/data-fetching#not-immediate), and you can wait until the reactive element changes before fetching.
 
 ```vue
 <script setup lang="ts">
@@ -532,7 +532,7 @@ const pending = computed(() => status.value === 'pending');
 </template>
 ```
 
-If you need to force a refresh when other reactive values change, you can also [watch other values](#watch).
+If you need to force a refresh when other reactive values change, you can also [watch other values](/docs/getting-started/data-fetching#watch).
 
 ### Not immediate
 
@@ -575,7 +575,7 @@ When we call `$fetch` in the browser, user headers like `cookie` will be directl
 
 Normally, during server-side-rendering, due to security considerations, the `$fetch` wouldn't include the user's browser cookies, nor pass on cookies from the fetch response.
 
-However, when calling `useFetch` with a relative URL on the server, Nuxt will use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy headers and cookies (with the exception of headers not meant to be forwarded, like `host`).
+However, when calling `useFetch` with a relative URL on the server, Nuxt will use [`useRequestFetch`](/docs/4.x/api/composables/use-request-fetch) to proxy headers and cookies (with the exception of headers not meant to be forwarded, like `host`).
 
 ### Pass Cookies From Server-side API Calls on SSR Response
 
@@ -636,9 +636,9 @@ Using `<script setup>` or `<script setup lang="ts">` are the recommended way of
 
 ## Serializing Data From Server to Client
 
-When using `useAsyncData` and `useLazyAsyncData` to transfer data fetched on server to the client (as well as anything else that utilizes [the Nuxt payload](/docs/api/composables/use-nuxt-app#payload)), the payload is serialized with [`devalue`](https://github.com/Rich-Harris/devalue). This allows us to transfer not just basic JSON but also to serialize and revive/deserialize more advanced kinds of data, such as regular expressions, Dates, Map and Set, `ref`, `reactive`, `shallowRef`, `shallowReactive` and `NuxtError` - and more.
+When using `useAsyncData` and `useLazyAsyncData` to transfer data fetched on server to the client (as well as anything else that utilizes [the Nuxt payload](/docs/4.x/api/composables/use-nuxt-app#payload)), the payload is serialized with [`devalue`](https://github.com/Rich-Harris/devalue). This allows us to transfer not just basic JSON but also to serialize and revive/deserialize more advanced kinds of data, such as regular expressions, Dates, Map and Set, `ref`, `reactive`, `shallowRef`, `shallowReactive` and `NuxtError` - and more.
 
-It is also possible to define your own serializer/deserializer for types that are not supported by Nuxt. You can read more in the [`useNuxtApp`](/docs/api/composables/use-nuxt-app#payload) docs.
+It is also possible to define your own serializer/deserializer for types that are not supported by Nuxt. You can read more in the [`useNuxtApp`](/docs/4.x/api/composables/use-nuxt-app#payload) docs.
 
 ::note
 Note that this _does not apply_ to data passed from your server routes when fetched with `$fetch` or `useFetch` - see the next section for more information.
@@ -646,7 +646,7 @@ Note that this _does not apply_ to data passed from your server routes when fetc
 
 ## Serializing Data From API Routes
 
-When fetching data from the `server` directory, the response is serialized using `JSON.stringify`. However, since serialization is limited to only JavaScript primitive types, Nuxt does its best to convert the return type of `$fetch` and [`useFetch`](/docs/api/composables/use-fetch) to match the actual value.
+When fetching data from the `server` directory, the response is serialized using `JSON.stringify`. However, since serialization is limited to only JavaScript primitive types, Nuxt does its best to convert the return type of `$fetch` and [`useFetch`](/docs/4.x/api/composables/use-fetch) to match the actual value.
 
 ::read-more{icon="i-simple-icons-mdnwebdocs" to="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description" target="_blank"}
 Learn more about `JSON.stringify` limitations.

package/1.getting-started/11.state-management.md

@@ -4,14 +4,14 @@ description: Nuxt provides powerful state management libraries and the useState
 navigation.icon: i-lucide-database
 ---
 
-Nuxt provides the [`useState`](/docs/api/composables/use-state) composable to create a reactive and SSR-friendly shared state across components.
+Nuxt provides the [`useState`](/docs/4.x/api/composables/use-state) composable to create a reactive and SSR-friendly shared state across components.
 
-[`useState`](/docs/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
+[`useState`](/docs/4.x/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
 
 :video-accordion{title="Watch a video from Alexander Lichter about why and when to use useState" videoId="mv0WcBABcIk"}
 
 ::important
-Because the data inside [`useState`](/docs/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
+Because the data inside [`useState`](/docs/4.x/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
 ::
 
 ::read-more{to="/docs/api/composables/use-state"}
@@ -56,12 +56,12 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 :link-example{to="/docs/examples/features/state-management"}
 
 ::note
-To globally invalidate cached state, see [`clearNuxtState`](/docs/api/utils/clear-nuxt-state) util.
+To globally invalidate cached state, see [`clearNuxtState`](/docs/4.x/api/utils/clear-nuxt-state) util.
 ::
 
 ### Initializing State
 
-Most of the time, you will want to initialize your state with data that resolves asynchronously. You can use the [`app.vue`](/docs/guide/directory-structure/app) component with the [`callOnce`](/docs/api/utils/call-once) util to do so.
+Most of the time, you will want to initialize your state with data that resolves asynchronously. You can use the [`app.vue`](/docs/4.x/guide/directory-structure/app) component with the [`callOnce`](/docs/4.x/api/utils/call-once) util to do so.
 
 ```vue twoslash [app/app.vue]
 <script setup lang="ts">
@@ -191,7 +191,7 @@ const date = useLocaleDate(new Date('2016-10-26'))
 
 ## Shared State
 
-By using [auto-imported composables](/docs/guide/directory-structure/app/composables) we can define global type-safe states and import them across the app.
+By using [auto-imported composables](/docs/4.x/guide/directory-structure/app/composables) we can define global type-safe states and import them across the app.
 
 ```ts twoslash [composables/states.ts]
 export const useColor = () => useState<string>('color', () => 'pink')
@@ -214,7 +214,7 @@ const color = useColor() // Same as useState('color')
 
 ## Using third-party libraries
 
-Nuxt **used to rely** on the Vuex library to provide global state management. If you are migrating from Nuxt 2, please head to [the migration guide](/docs/migration/configuration#vuex).
+Nuxt **used to rely** on the Vuex library to provide global state management. If you are migrating from Nuxt 2, please head to [the migration guide](/docs/4.x/migration/configuration#vuex).
 
 Nuxt is not opinionated about state management, so feel free to choose the right solution for your needs. There are multiple integrations with the most popular state management libraries, including:
 

package/1.getting-started/12.error-handling.md

@@ -8,7 +8,7 @@ Nuxt is a full-stack framework, which means there are several sources of unpreve
 
 - Errors during the Vue rendering lifecycle (SSR & CSR)
 - Server and client startup errors (SSR + CSR)
-- Errors during Nitro server lifecycle ([`server/`](/docs/guide/directory-structure/server) directory)
+- Errors during Nitro server lifecycle ([`server/`](/docs/4.x/guide/directory-structure/server) directory)
 - Errors downloading JS chunks
 
 ::tip
@@ -19,7 +19,7 @@ Nuxt is a full-stack framework, which means there are several sources of unpreve
 
 You can hook into Vue errors using [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured).
 
-In addition, Nuxt provides a [`vue:error`](/docs/api/advanced/hooks#app-hooks-runtime) hook that will be called if any errors propagate up to the top level.
+In addition, Nuxt provides a [`vue:error`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) hook that will be called if any errors propagate up to the top level.
 
 If you are using an error reporting framework, you can provide a global handler through [`vueApp.config.errorHandler`](https://vuejs.org/api/application.html#app-config-errorhandler). It will receive all Vue errors, even if they are handled.
 
@@ -45,7 +45,7 @@ Note that the `vue:error` hook is based on [`onErrorCaptured`](https://vuejs.org
 Nuxt will call the `app:error` hook if there are any errors in starting your Nuxt application.
 
 This includes:
-- running [Nuxt plugins](/docs/guide/directory-structure/plugins)
+- running [Nuxt plugins](/docs/4.x/guide/directory-structure/plugins)
 - processing `app:created` and `app:beforeMount` hooks
 - rendering your Vue app to HTML (during SSR)
 - mounting the app (on client-side), though you should handle this case with `onErrorCaptured` or with `vue:error`
@@ -53,7 +53,7 @@ This includes:
 
 ## Nitro Server Errors
 
-You cannot currently define a server-side handler for these errors, but can render an error page, see the [Render an Error Page](#error-page) section.
+You cannot currently define a server-side handler for these errors, but can render an error page, see the [Render an Error Page](/docs/getting-started/error-handling#error-page) section.
 
 ## Errors with JS Chunks
 
@@ -119,14 +119,14 @@ export default defineNuxtPlugin(nuxtApp => {
 })
 ```
 
-When you are ready to remove the error page, you can call the [`clearError`](/docs/api/utils/clear-error) helper function, which takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
+When you are ready to remove the error page, you can call the [`clearError`](/docs/4.x/api/utils/clear-error) helper function, which takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
 
 ::important
 Make sure to check before using anything dependent on Nuxt plugins, such as `$route` or `useRouter`, as if a plugin threw an error, then it won't be re-run until you clear the error.
 ::
 
 ::note
-Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](#useerror) in middleware to check if an error is being handled.
+Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](/docs/getting-started/error-handling#useerror) in middleware to check if an error is being handled.
 ::
 
 ::note
@@ -156,7 +156,7 @@ function createError (err: string | { cause, data, message, name, stack, statusC
 Create an error object with additional metadata. You can pass a string to be set as the error `message` or an object containing error properties. It is usable in both the Vue and Server portions of your app, and is meant to be thrown.
 
 If you throw an error created with `createError`:
-- on server-side, it will trigger a full-screen error page which you can clear with [`clearError`](#clearerror).
+- on server-side, it will trigger a full-screen error page which you can clear with [`clearError`](/docs/getting-started/error-handling#clearerror).
 - on client-side, it will throw a non-fatal error for you to handle. If you need to trigger a full-screen error page, then you can do this by setting `fatal: true`.
 
 ```vue twoslash [pages/movies/[slug\\].vue]
@@ -183,7 +183,7 @@ Read more about `createError` util.
 function showError (err: string | Error | { statusCode, statusMessage }): Error
 ```
 
-You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page which you can clear with [`clearError`](#clearerror).
+You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page which you can clear with [`clearError`](/docs/getting-started/error-handling#clearerror).
 
 It is recommended instead to use `throw createError()`.
 
@@ -205,7 +205,7 @@ Read more about `clearError` util.
 
 ## Render Error in Component
 
-Nuxt also provides a [`<NuxtErrorBoundary>`](/docs/api/components/nuxt-error-boundary) component that allows you to handle client-side errors within your app, without replacing your entire site with an error page.
+Nuxt also provides a [`<NuxtErrorBoundary>`](/docs/4.x/api/components/nuxt-error-boundary) component that allows you to handle client-side errors within your app, without replacing your entire site with an error page.
 
 This component is responsible for handling errors that occur within its default slot. On client-side, it will prevent the error from bubbling up to the top level, and will render the `#error` slot instead.
 

package/1.getting-started/14.layers.md

@@ -9,8 +9,8 @@ One of the core features of Nuxt is the layers and extending support. You can ex
 ## Use Cases
 
 - Share reusable configuration presets across projects using `nuxt.config` and `app.config`
-- Create a component library using [`app/components/`](/docs/guide/directory-structure/app/components) directory
-- Create utility and composable library using [`app/composables/`](/docs/guide/directory-structure/app/composables) and [`app/utils/`](/docs/guide/directory-structure/app/utils) directories
+- Create a component library using [`app/components/`](/docs/4.x/guide/directory-structure/app/components) directory
+- Create utility and composable library using [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/guide/directory-structure/app/utils) directories
 - Create Nuxt module presets
 - Share standard setup across projects
 - Create Nuxt themes
@@ -30,7 +30,7 @@ In addition, named layer aliases to the `srcDir` of each of these layers will au
 Named layer aliases were introduced in Nuxt v3.16.0.
 ::
 
-In addition, you can extend from a layer by adding the [extends](/docs/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/guide/directory-structure/nuxt-config) file.
+In addition, you can extend from a layer by adding the [extends](/docs/4.x/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/4.x/guide/directory-structure/nuxt-config) file.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({

package/1.getting-started/15.prerendering.md

@@ -10,7 +10,7 @@ Nuxt allows for select pages from your application to be rendered at build time.
 
 ## Crawl-based Pre-rendering
 
-Use the [`nuxt generate` command](/docs/api/commands/generate) to build and pre-render your application using the [Nitro](/docs/guide/concepts/server-engine) crawler. This command is similar to `nuxt build` with the `nitro.static` option set to `true`, or running `nuxt build --prerender`.
+Use the [`nuxt generate` command](/docs/4.x/api/commands/generate) to build and pre-render your application using the [Nitro](/docs/4.x/guide/concepts/server-engine) crawler. This command is similar to `nuxt build` with the `nitro.static` option set to `true`, or running `nuxt build --prerender`.
 
 This will build your site, stand up a nuxt instance, and, by default, prerender the root page `/` along with any of your site's pages it links to, any of your site's pages they link to, and so on.
 
@@ -51,7 +51,7 @@ Read more about the `nuxt generate` command.
 
 ### Selective Pre-rendering
 
-You can manually specify routes that [Nitro](/docs/guide/concepts/server-engine) will fetch and pre-render during the build or ignore routes that you don't want to pre-render like `/dynamic` in the `nuxt.config` file:
+You can manually specify routes that [Nitro](/docs/4.x/guide/concepts/server-engine) will fetch and pre-render during the build or ignore routes that you don't want to pre-render like `/dynamic` in the `nuxt.config` file:
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -103,7 +103,7 @@ export default defineNuxtConfig({
 Read more about Nitro's `routeRules` configuration.
 ::
 
-As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/api/utils/define-route-rules).
+As a shorthand, you can also configure this in a page file using [`defineRouteRules`](/docs/4.x/api/utils/define-route-rules).
 
 ::read-more{to="/docs/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`.
@@ -139,7 +139,7 @@ export default defineNuxtConfig({
 
 ### `prerenderRoutes`
 
-You can use this at runtime within a [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context) to add more routes for Nitro to prerender.
+You can use this at runtime within a [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context) to add more routes for Nitro to prerender.
 
 ```vue [app/pages/index.vue]
 <script setup>

package/1.getting-started/16.deployment.md

@@ -71,7 +71,7 @@ By default, the workload gets distributed to the workers with the round robin st
 There are two ways to deploy a Nuxt application to any static hosting services:
 
 - Static site generation (SSG) with `ssr: true` pre-renders routes of your application at build time. (This is the default behavior when running `nuxt generate`.) It will also generate `/200.html` and `/404.html` single-page app fallback pages, which can render dynamic routes or 404 errors on the client (though you may need to configure this on your static host).
-- Alternatively, you can prerender your site with `ssr: false` (static single-page app). This will produce HTML pages with an empty `<div id="__nuxt"></div>` where your Vue app would normally be rendered. You will lose many SEO benefits of prerendering your site, so it is suggested instead to use [`<ClientOnly>`](/docs/api/components/client-only) to wrap the portions of your site that cannot be server rendered (if any).
+- Alternatively, you can prerender your site with `ssr: false` (static single-page app). This will produce HTML pages with an empty `<div id="__nuxt"></div>` where your Vue app would normally be rendered. You will lose many SEO benefits of prerendering your site, so it is suggested instead to use [`<ClientOnly>`](/docs/4.x/api/components/client-only) to wrap the portions of your site that cannot be server rendered (if any).
 
 :read-more{title="Nuxt prerendering" to="/docs/getting-started/prerendering"}
 
@@ -95,7 +95,7 @@ Nuxt can be deployed to several cloud providers with a minimal amount of configu
 
 In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and minimal amount of configuration.
 
-You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:
+You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file:
 
 ```js twoslash [nuxt.config.ts]
 export default defineNuxtConfig({

package/1.getting-started/17.testing.md

@@ -5,7 +5,7 @@ navigation.icon: i-lucide-circle-check
 ---
 
 ::tip
-If you are a module author, you can find more specific information in the [Module Author's guide](/docs/guide/going-further/modules#testing).
+If you are a module author, you can find more specific information in the [Module Author's guide](/docs/4.x/guide/going-further/modules#testing).
 ::
 
 Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via `@nuxt/test-utils`, a library of test utilities and configuration that currently powers the [tests we use on Nuxt itself](https://github.com/nuxt/nuxt/tree/main/test) and tests throughout the module ecosystem.
@@ -437,7 +437,7 @@ registerEndpoint('/test/', {
 })
 ```
 
-> **Note**: If your requests in a component go to an external API, you can use `baseURL` and then make it empty using [Nuxt Environment Override Config](/docs/getting-started/configuration#environment-overrides) (`$test`) so all your requests will go to Nitro server.
+> **Note**: If your requests in a component go to an external API, you can use `baseURL` and then make it empty using [Nuxt Environment Override Config](/docs/4.x/getting-started/configuration#environment-overrides) (`$test`) so all your requests will go to Nitro server.
 
 #### Conflict with End-To-End Testing
 
@@ -624,7 +624,7 @@ Please use the options below for the `setup` method.
   - Type: `number | undefined`
   - Default: `undefined`
 
-- `host`: If provided, a URL to use as the test target instead of building and running a new server. Useful for running "real" end-to-end tests against a deployed version of your application, or against an already running local server (which may provide a significant reduction in test execution timings). See the [target host end-to-end example below](#target-host-end-to-end-example).
+- `host`: If provided, a URL to use as the test target instead of building and running a new server. Useful for running "real" end-to-end tests against a deployed version of your application, or against an already running local server (which may provide a significant reduction in test execution timings). See the [target host end-to-end example below](/docs/getting-started/testing#target-host-end-to-end-example).
   - Type: `string`
   - Default: `undefined`
 

package/1.getting-started/18.upgrade.md

@@ -32,7 +32,7 @@ bun x nuxt upgrade
 
 ### Nightly Release Channel
 
-To use the latest Nuxt build and test features before their release, read about the [nightly release channel](/docs/guide/going-further/nightly-release-channel) guide.
+To use the latest Nuxt build and test features before their release, read about the [nightly release channel](/docs/4.x/guide/going-further/nightly-release-channel) guide.
 
 ## Migrating to Nuxt 4
 
@@ -271,7 +271,7 @@ export default defineNuxtConfig({
 
 #### What Changed
 
-The order in which modules are loaded when using [Nuxt layers](/docs/guide/going-further/layers) has been corrected. Previously, modules from the project root were loaded before modules from extended layers, which was the reverse of the expected behavior.
+The order in which modules are loaded when using [Nuxt layers](/docs/4.x/guide/going-further/layers) has been corrected. Previously, modules from the project root were loaded before modules from extended layers, which was the reverse of the expected behavior.
 
 Now modules are loaded in the correct order:
 
@@ -319,7 +319,7 @@ export default defineNuxtConfig({
 // 4. project-module-2 (can override layer modules)
 ```
 
-If you encounter issues with module order dependencies due to needing to register a hook, consider using the [`modules:done` hook](/docs/guide/going-further/modules#custom-hooks) for modules that need to call a hook. This is run after all other modules have been loaded, which means it is safe to use.
+If you encounter issues with module order dependencies due to needing to register a hook, consider using the [`modules:done` hook](/docs/4.x/guide/going-further/modules#custom-hooks) for modules that need to call a hook. This is run after all other modules have been loaded, which means it is safe to use.
 
 👉 See [PR #31507](https://github.com/nuxt/nuxt/pull/31507) and [issue #25719](https://github.com/nuxt/nuxt/issues/25719) for more details.
 

package/2.guide/1.concepts/1.auto-imports.md

@@ -11,25 +11,25 @@ const count = ref(1) // ref is auto-imported
 </script>
 ```
 
-Thanks to its opinionated directory structure, Nuxt can auto-import your [`app/components/`](/docs/guide/directory-structure/app/components), [`app/composables/`](/docs/guide/directory-structure/app/composables) and [`app/utils/`](/docs/guide/directory-structure/app/utils).
+Thanks to its opinionated directory structure, Nuxt can auto-import your [`app/components/`](/docs/4.x/guide/directory-structure/app/components), [`app/composables/`](/docs/4.x/guide/directory-structure/app/composables) and [`app/utils/`](/docs/4.x/guide/directory-structure/app/utils).
 
 Contrary to a classic global declaration, Nuxt preserves typings, IDEs completions and hints, and **only includes what is used in your production code**.
 
 ::note
-In the docs, every function that is not explicitly imported is auto-imported by Nuxt and can be used as-is in your code. You can find a reference for auto-imported components, composables and utilities in the [API section](/docs/api).
+In the docs, every function that is not explicitly imported is auto-imported by Nuxt and can be used as-is in your code. You can find a reference for auto-imported components, composables and utilities in the [API section](/docs/4.x/api).
 ::
 
 ::note
-In the [`server`](/docs/guide/directory-structure/server) directory, Nuxt auto-imports exported functions and variables from `server/utils/`.
+In the [`server`](/docs/4.x/guide/directory-structure/server) directory, Nuxt auto-imports exported functions and variables from `server/utils/`.
 ::
 
 ::note
-You can also auto-import functions exported from custom folders or third-party packages by configuring the [`imports`](/docs/api/nuxt-config#imports) section of your `nuxt.config` file.
+You can also auto-import functions exported from custom folders or third-party packages by configuring the [`imports`](/docs/4.x/api/nuxt-config#imports) section of your `nuxt.config` file.
 ::
 
 ## Built-in Auto-imports
 
-Nuxt auto-imports functions and composables to perform [data fetching](/docs/getting-started/data-fetching), get access to the [app context](/docs/api/composables/use-nuxt-app) and [runtime config](/docs/guide/going-further/runtime-config), manage [state](/docs/getting-started/state-management) or define components and plugins.
+Nuxt auto-imports functions and composables to perform [data fetching](/docs/4.x/getting-started/data-fetching), get access to the [app context](/docs/4.x/api/composables/use-nuxt-app) and [runtime config](/docs/4.x/guide/going-further/runtime-config), manage [state](/docs/4.x/getting-started/state-management) or define components and plugins.
 
 ```vue twoslash
 <script setup lang="ts">
@@ -101,8 +101,8 @@ export const useMyComposable = () => {
 
 Nuxt directly auto-imports files created in defined directories:
 
-- `app/components/` for [Vue components](/docs/guide/directory-structure/app/components).
-- `app/composables/` for [Vue composables](/docs/guide/directory-structure/app/composables).
+- `app/components/` for [Vue components](/docs/4.x/guide/directory-structure/app/components).
+- `app/composables/` for [Vue composables](/docs/4.x/guide/directory-structure/app/composables).
 - `app/utils/` for helper functions and other utilities.
 
 :link-example{to="/docs/examples/features/auto-imports"}
@@ -139,7 +139,7 @@ export default defineNuxtConfig({
 })
 ```
 
-This will disable auto-imports completely but it's still possible to use [explicit imports](#explicit-imports) from `#imports`.
+This will disable auto-imports completely but it's still possible to use [explicit imports](/docs/guide/concepts/auto-imports#explicit-imports) from `#imports`.
 
 ### Partially Disabling Auto-imports