@nuxt/docs-nightly 4.5.1-29752449.30d24817 → 4.5.2-2610052030-052d82e

package/1.getting-started/09.transitions.md

@@ -14,7 +14,7 @@ Because Nuxt uses Vue's `<Transition>` component, a page or layout you want to a
 
 ## Page Transitions
 
-You can enable page transitions to apply an automatic transition for all your [pages](/docs/4.x/directory-structure/app/pages).
+You can enable page transitions to apply an automatic transition for all your [pages](/docs/directory-structure/app/pages).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -25,10 +25,10 @@ export default defineNuxtConfig({
 ```
 
 ::note
-If you are changing layouts as well as page, the page transition you set here will not run. Instead, you should set a [layout transition](/docs/4.x/getting-started/transitions#layout-transitions).
+If you are changing layouts as well as pages, the page transition you set here will not run. Instead, you should set a [layout transition](/docs/getting-started/transitions#layout-transitions).
 ::
 
-To start adding transition between your pages, add the following CSS to your [`app.vue`](/docs/4.x/directory-structure/app/app):
+To start adding transition between your pages, add the following CSS to your [`app.vue`](/docs/directory-structure/app/app):
 
 ::code-group
 
@@ -76,7 +76,7 @@ This produces the following result when navigating between pages:
   <source src="https://res.cloudinary.com/nuxt/video/upload/v1665061349/nuxt3/nuxt3-page-transitions_umwvmh.mp4" type="video/mp4">
 </video>
 
-To set a different transition for a page, set the `pageTransition` key in [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) of the page:
+To set a different transition for a page, set the `pageTransition` key in [`definePageMeta`](/docs/api/utils/define-page-meta) of the page:
 
 ::code-group
 
@@ -119,7 +119,7 @@ Moving to the about page will add the 3d rotation effect:
 
 ## Layout Transitions
 
-You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/4.x/directory-structure/app/layouts).
+You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/directory-structure/app/layouts).
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -129,7 +129,7 @@ export default defineNuxtConfig({
 })
 ```
 
-To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/docs/4.x/directory-structure/app/app):
+To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/docs/directory-structure/app/app):
 
 ::code-group
 
@@ -319,7 +319,7 @@ Learn more about additional [JavaScript hooks](https://vuejs.org/guide/built-ins
 
 ## Dynamic Transitions
 
-To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/docs/4.x/directory-structure/app/middleware) to assign a different transition name to `to.meta.pageTransition`.
+To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/docs/directory-structure/app/middleware) to assign a different transition name to `to.meta.pageTransition`.
 
 ::code-group
 
@@ -389,7 +389,7 @@ const next = computed(() => '/' + (id.value + 1))
 
 ::
 
-The page now applies the `slide-left` transition when going to the next id and `slide-right` for the previous:
+The page now applies the `slide-left` transition when going to the next id and `slide-right` for the previous one:
 
 <video controls class="rounded" poster="https://res.cloudinary.com/nuxt/video/upload/v1665069410/nuxt3/nuxt-dynamic-page-transitions.jpg">
   <source src="https://res.cloudinary.com/nuxt/video/upload/v1665069410/nuxt3/nuxt-dynamic-page-transitions.mp4" type="video/mp4">
@@ -438,7 +438,7 @@ The possible values are: `false`, `true`, or `'always'`.
 
 If set to true, Nuxt will not apply transitions if the user's browser matches `prefers-reduced-motion: reduce` (recommended). If set to `always`, Nuxt will always apply the transition and it is up to you to respect the user's preference.
 
-By default, view transitions are enabled for all [pages](/docs/4.x/directory-structure/app/pages), but you can set a different global default.
+By default, view transitions are enabled for all [pages](/docs/directory-structure/app/pages), but you can set a different global default.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -449,7 +449,7 @@ export default defineNuxtConfig({
 })
 ```
 
-It is possible to override the default `viewTransition` value for a page by setting the `viewTransition` key in [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) of the page:
+It is possible to override the default `viewTransition` value for a page by setting the `viewTransition` key in [`definePageMeta`](/docs/api/utils/define-page-meta) of the page:
 
 ```vue twoslash [pages/about.vue]
 <script setup lang="ts">

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/4.x/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/api/composables/use-async-data) and `$fetch`.
 
 In a nutshell:
 
-- [`$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.
+- [`$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.
 
 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/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.
+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.
 
-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 [`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 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).
+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).
 
 ::tip
 Use the [Nuxt DevTools](https://devtools.nuxt.com) to inspect this data in the **Payload tab**.
@@ -52,14 +52,14 @@ async function handleFormSubmit () {
 </template>
 ```
 
-In the example above, `useFetch` would make sure that the request would occur in the server and is properly forwarded to the browser. `$fetch` has no such mechanism and is a better option to use when the request is solely made from the browser.
+In the example above, `useFetch` would make sure that the request would occur on the server and is properly forwarded to the browser. `$fetch` has no such mechanism and is a better option to use when the request is solely made from the browser.
 
 ### Suspense
 
 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/4.x/api/components/nuxt-loading-indicator) to add a progress bar between page navigations.
+You can add the [`<NuxtLoadingIndicator>`](/docs/api/components/nuxt-loading-indicator) to add a progress bar between page navigations.
 ::
 
 ### A note on `await`
@@ -70,12 +70,12 @@ The `await` does **not** change the server-rendered HTML. During server renderin
 
 What the `await` *does* change is what happens next in your own `<script setup>`, and how client-side navigation behaves:
 
-- **With `await`**, execution pauses until the data is ready, so any code after the call can rely on `data` already being populated. On client-side navigation, this blocks navigation until the data resolves: the user stays on the current page (optionally with a [`<NuxtLoadingIndicator>`](/docs/4.x/api/components/nuxt-loading-indicator)) and then lands on a fully populated page. This is the default behaviour.
+- **With `await`**, execution pauses until the data is ready, so any code after the call can rely on `data` already being populated. On client-side navigation, this blocks navigation until the data resolves: the user stays on the current page (optionally with a [`<NuxtLoadingIndicator>`](/docs/api/components/nuxt-loading-indicator)) and then lands on a fully populated page. This is the default behaviour.
 - **Without `await`**, execution continues immediately while the request runs in the background, so `data` starts as its default value and fills in once the request resolves. On client-side navigation, this means navigation happens immediately and you are responsible for handling the loading and error states, typically via the returned `status` and `error` refs.
 
 Neither approach is universally better; the right choice depends on the experience you want for that route.
 
-Not awaiting has a similar user-visible effect to the [`lazy`](#lazy) option (navigation is not blocked and you handle loading state yourself), but the two are not identical: `lazy` is an explicit flag that defers the request until the component mounts, whereas simply not awaiting starts the request during setup. Prefer `lazy` (or [`useLazyFetch`](/docs/4.x/api/composables/use-lazy-fetch) / [`useLazyAsyncData`](/docs/4.x/api/composables/use-lazy-async-data)) when you want non-blocking behaviour, since it makes the intent explicit.
+Not awaiting has a similar user-visible effect to the [`lazy`](#lazy) option (navigation is not blocked and you handle loading state yourself), but the two are not identical: `lazy` is an explicit flag that defers the request until the component mounts, whereas simply not awaiting starts the request during setup. Prefer `lazy` (or [`useLazyFetch`](/docs/api/composables/use-lazy-fetch) / [`useLazyAsyncData`](/docs/api/composables/use-lazy-async-data)) when you want non-blocking behaviour, since it makes the intent explicit.
 
 ::warning
 The `await` and `lazy` are independent, and on the client awaiting a `lazy` function won't have the effect you expect. If you `await` a `lazy` call (for example `await useLazyFetch(...)` or `await useFetch(..., { lazy: true })`), it still blocks server rendering as usual, but on **client-side navigation** the `await` resolves immediately without waiting for the request. `data` will still be at its default value right after the `await`, and you must handle the loading state via `status`. If you actually want the navigation to wait for the data, drop the `lazy` option rather than relying on `await`.
@@ -99,17 +99,31 @@ async function addTodo () {
 ```
 
 ::warning
-Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](/docs/4.x/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/4.x/getting-started/data-fetching#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/4.x/api/utils/dollarfetch"}
+::read-more{to="/docs/api/utils/dollarfetch"}
 Read more about `$fetch`.
 ::
 
+### Typing a Value That Holds `$fetch`
+
+To type a value that holds `$fetch` itself, such as a `$fetch` instance passed into a plugin or provided through `provide`/`inject`, use the `$Fetch` type (an alias of `TypedFetch`):
+
+```ts
+import type { $Fetch } from '#app'
+
+function createClient (fetcher: $Fetch) {
+  return {
+    todos: () => fetcher('/api/todos'),
+  }
+}
+```
+
 ### Pass Client Headers to the API
 
-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`).
+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`).
 
 ```vue
 <script setup lang="ts">
@@ -122,7 +136,7 @@ const { data } = await useFetch('/api/echo')
 export default defineEventHandler(event => parseCookies(event))
 ```
 
-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`.
+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`.
 
 ```vue
 <script setup lang="ts">
@@ -135,7 +149,7 @@ async function getCurrentUser () {
 ```
 
 ::tip
-You can also use [`useRequestFetch`](/docs/4.x/api/composables/use-request-fetch) to proxy headers to the call automatically.
+You can also use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy headers to the call automatically.
 ::
 
 ::caution
@@ -149,7 +163,7 @@ Be very careful before proxying headers to an external API and just include head
 
 ## `useFetch`
 
-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.
+The [`useFetch`](/docs/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">
@@ -161,13 +175,13 @@ const { data: count } = await useFetch('/api/count')
 </template>
 ```
 
-This composable is a wrapper around the [`useAsyncData`](/docs/4.x/api/composables/use-async-data) composable and `$fetch` utility.
+This composable is a wrapper around the [`useAsyncData`](/docs/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"}
 
-:read-more{to="/docs/4.x/api/composables/use-fetch"}
+:read-more{to="/docs/api/composables/use-fetch"}
 
-:link-example{to="/docs/4.x/examples/features/data-fetching"}
+:link-example{to="/docs/examples/features/data-fetching"}
 
 ## `useAsyncData`
 
@@ -175,12 +189,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/4.x/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/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/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.
+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 provides 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.
 
 ```vue [app/pages/users.vue]
 <script setup lang="ts">
@@ -192,11 +206,11 @@ const { data, error } = await useAsyncData(() => myGetFunction('users'))
 ```
 
 ::note
-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.
+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.
 :br :br
 Since the autogenerated key only takes into account the location 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/4.x/api/composables/use-nuxt-data) or to [refresh specific data](/docs/4.x/api/utils/refresh-nuxt-data#refresh-specific-data).
+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).
 ::
 
 ```vue [app/pages/users/[id\\].vue]
@@ -227,7 +241,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/4.x/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/api/utils/call-once) utility to do so.
 
 ```vue
 <script setup lang="ts">
@@ -239,7 +253,7 @@ await useAsyncData(() => offersStore.getOffer(route.params.slug))
 ```
 ::
 
-::read-more{to="/docs/4.x/api/composables/use-async-data"}
+::read-more{to="/docs/api/composables/use-async-data"}
 Read more about `useAsyncData`.
 ::
 
@@ -265,7 +279,7 @@ If you have not fetched data on the server (for example, with `server: false`),
 
 ## Options
 
-[`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.
+[`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.
 
 ### Lazy
 
@@ -291,7 +305,7 @@ const { status, data: posts } = useFetch('/api/posts', {
 </template>
 ```
 
-You can alternatively use [`useLazyFetch`](/docs/4.x/api/composables/use-lazy-fetch) and `useLazyAsyncData` as convenient methods to perform the same.
+You can alternatively use [`useLazyFetch`](/docs/api/composables/use-lazy-fetch) and `useLazyAsyncData` as convenient methods to perform the same.
 
 ```vue twoslash
 <script setup lang="ts">
@@ -299,11 +313,11 @@ const { status, data: posts } = useLazyFetch('/api/posts')
 </script>
 ```
 
-::read-more{to="/docs/4.x/api/composables/use-lazy-fetch"}
+::read-more{to="/docs/api/composables/use-lazy-fetch"}
 Read more about `useLazyFetch`.
 ::
 
-::read-more{to="/docs/4.x/api/composables/use-lazy-async-data"}
+::read-more{to="/docs/api/composables/use-lazy-async-data"}
 Read more about `useLazyAsyncData`.
 ::
 
@@ -326,7 +340,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](/docs/4.x/getting-started/data-fetching#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
 
@@ -366,13 +380,13 @@ Both `pick` and `transform` don't prevent the unwanted data from being fetched i
 
 #### Keys
 
-[`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) and [`useAsyncData`](/docs/api/composables/use-async-data) use keys to prevent refetching the same data.
 
-- [`useFetch`](/docs/4.x/api/composables/use-fetch) generates a key from the URL, the fetch options and the location of the call in your source code. This means two `useFetch` calls with the same URL in different components have **different** keys and will each perform their own request. To share the same data between multiple components, provide the same explicit `key` 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 location of the `useAsyncData` call in your source code will be generated for you.
+- [`useFetch`](/docs/api/composables/use-fetch) generates a key from the URL, the fetch options and the location of the call in your source code. This means two `useFetch` calls with the same URL in different components have **different** keys and will each perform their own request. To share the same data between multiple components, provide the same explicit `key` 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 location of the `useAsyncData` call in your source code will be generated for you.
 
 ::tip
-To get the cached data by key, you can use [`useNuxtData`](/docs/4.x/api/composables/use-nuxt-data)
+To get the cached data by key, you can use [`useNuxtData`](/docs/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"}
@@ -452,10 +466,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](/docs/4.x/getting-started/data-fetching#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/4.x/api/utils/clear-nuxt-data) and [`refreshNuxtData`](/docs/4.x/api/utils/refresh-nuxt-data).
+To globally refetch or invalidate cached data, see [`clearNuxtData`](/docs/api/utils/clear-nuxt-data) and [`refreshNuxtData`](/docs/api/utils/refresh-nuxt-data).
 ::
 
 #### Clear
@@ -502,7 +516,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](/docs/4.x/getting-started/data-fetching#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.
 
 When reactive fetch options are provided, they'll be automatically watched and trigger refetches. In some cases, it can be useful to opt-out of this behavior by specifying `watch: false`.
 
@@ -537,7 +551,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) 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](/docs/4.x/getting-started/data-fetching#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">
@@ -572,11 +586,11 @@ const { data, status } = useLazyFetch(() => `/api/users/${id.value}`, {
 </template>
 ```
 
-If you need to force a refresh when other reactive values change, you can also [watch other values](/docs/4.x/getting-started/data-fetching#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
 
-The `useFetch` composable will start fetching data the moment is invoked. You may prevent this by setting `immediate: false`, for example, to wait for user interaction.
+The `useFetch` composable will start fetching data the moment it is invoked. You may prevent this by setting `immediate: false`, for example, to wait for user interaction.
 
 With that, you will need both the `status` to handle the fetch lifecycle, and `execute` to start the data fetch.
 
@@ -617,7 +631,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/4.x/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/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
 
@@ -674,13 +688,13 @@ export default defineNuxtComponent({
 Using `<script setup>` or `<script setup lang="ts">` are the recommended way of declaring Vue components in Nuxt.
 ::
 
-:read-more{to="/docs/4.x/api/utils/define-nuxt-component"}
+:read-more{to="/docs/api/utils/define-nuxt-component"}
 
 ## 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/4.x/api/composables/use-nuxt-app#payload)), the payload is serialized with [`devalue`](https://github.com/sveltejs/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/api/composables/use-nuxt-app#payload)), the payload is serialized with [`devalue`](https://github.com/sveltejs/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/4.x/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/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.
@@ -688,7 +702,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/4.x/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/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,17 +4,17 @@ description: Nuxt provides powerful state management libraries and the useState
 navigation.icon: i-lucide-database
 ---
 
-Nuxt provides the [`useState`](/docs/4.x/api/composables/use-state) composable to create a reactive and SSR-friendly shared state across components.
+Nuxt provides the [`useState`](/docs/api/composables/use-state) composable to create a reactive and SSR-friendly shared state across components.
 
-[`useState`](/docs/4.x/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core#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/api/composables/use-state) is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core#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/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.
+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.
 ::
 
-::read-more{to="/docs/4.x/api/composables/use-state"}
+::read-more{to="/docs/api/composables/use-state"}
 Read more about `useState` composable.
 ::
 
@@ -53,15 +53,15 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 </template>
 ```
 
-:link-example{to="/docs/4.x/examples/features/state-management"}
+:link-example{to="/docs/examples/features/state-management"}
 
 ::note
-To globally invalidate cached state, see [`clearNuxtState`](/docs/4.x/api/utils/clear-nuxt-state) util.
+To globally invalidate cached state, see [`clearNuxtState`](/docs/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/4.x/directory-structure/app/app) component with the [`callOnce`](/docs/4.x/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/directory-structure/app/app) component with the [`callOnce`](/docs/api/utils/call-once) util to do so.
 
 ```vue twoslash [app/app.vue]
 <script setup lang="ts">
@@ -77,7 +77,7 @@ await callOnce(async () => {
 This is similar to the [`nuxtServerInit` action](https://v2.nuxt.com/docs/directory-structure/store/#the-nuxtserverinit-action) in Nuxt 2, which allows filling the initial state of your store server-side before rendering the page.
 ::
 
-:read-more{to="/docs/4.x/api/utils/call-once"}
+:read-more{to="/docs/api/utils/call-once"}
 
 ### Usage with Pinia
 
@@ -194,11 +194,11 @@ const date = useLocaleDate(new Date('2016-10-26'))
 ```
 ::
 
-:link-example{to="/docs/4.x/examples/advanced/locale"}
+:link-example{to="/docs/examples/advanced/locale"}
 
 ## Shared State
 
-By using [auto-imported composables](/docs/4.x/directory-structure/app/composables) we can define global type-safe states and import them across the app.
+By using [auto-imported composables](/docs/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')
@@ -221,7 +221,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/4.x/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/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: