@nuxt/docs 4.1.2 → 4.1.3

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

@@ -10,17 +10,17 @@ links:
 
 ## Description
 
-By default, [`useFetch`](/docs/api/composables/use-fetch) blocks navigation until its async handler is resolved. `useLazyFetch` provides a wrapper around [`useFetch`](/docs/api/composables/use-fetch) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
+By default, [`useFetch`](/docs/4.x/api/composables/use-fetch) blocks navigation until its async handler is resolved. `useLazyFetch` provides a wrapper around [`useFetch`](/docs/4.x/api/composables/use-fetch) that triggers navigation before the handler is resolved by setting the `lazy` option to `true`.
 
 ::note
-`useLazyFetch` has the same signature as [`useFetch`](/docs/api/composables/use-fetch).
+`useLazyFetch` has the same signature as [`useFetch`](/docs/4.x/api/composables/use-fetch).
 ::
 
 ::note
 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-loading-indicator.md

@@ -10,8 +10,8 @@ links:
 
 ## Description
 
-A composable which returns the loading state of the page. Used by [`<NuxtLoadingIndicator>`](/docs/api/components/nuxt-loading-indicator) and controllable.
-It hooks into [`page:loading:start`](/docs/api/advanced/hooks#app-hooks-runtime) and [`page:loading:end`](/docs/api/advanced/hooks#app-hooks-runtime) to change its state.
+A composable which returns the loading state of the page. Used by [`<NuxtLoadingIndicator>`](/docs/4.x/api/components/nuxt-loading-indicator) and controllable.
+It hooks into [`page:loading:start`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) and [`page:loading:end`](/docs/4.x/api/advanced/hooks#app-hooks-runtime) to change its state.
 
 ## Parameters
 
@@ -58,20 +58,20 @@ Used by `finish()`. Clear all timers and intervals used by the composable.
 
 ```vue
 <script setup lang="ts">
-  const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
-    duration: 2000,
-    throttle: 200,
-    // This is how progress is calculated by default
-    estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50)
-  })
+const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
+  duration: 2000,
+  throttle: 200,
+  // This is how progress is calculated by default
+  estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50),
+})
 </script>
 ```
 
 ```vue
 <script setup lang="ts">
-  const { start, set } = useLoadingIndicator()
-  // same as set(0, { force: true })
-  // set the progress to 0, and show loading immediately
-  start({ force: true })
+const { start, set } = useLoadingIndicator()
+// same as set(0, { force: true })
+// set the progress to 0, and show loading immediately
+start({ force: true })
 </script>
 ```

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

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-`useNuxtApp` is a built-in composable that provides a way to access shared runtime context of Nuxt, also known as the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context), which is available on both client and server side (but not within Nitro routes). It helps you access the Vue app instance, runtime hooks, runtime config variables and internal states, such as `ssrContext` and `payload`.
+`useNuxtApp` is a built-in composable that provides a way to access shared runtime context of Nuxt, also known as the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context), which is available on both client and server side (but not within Nitro routes). It helps you access the Vue app instance, runtime hooks, runtime config variables and internal states, such as `ssrContext` and `payload`.
 
 ```vue [app/app.vue]
 <script setup lang="ts">
@@ -16,11 +16,11 @@ const nuxtApp = useNuxtApp()
 </script>
 ```
 
-If runtime context is unavailable in your scope, `useNuxtApp` will throw an exception when called. You can use [`tryUseNuxtApp`](#tryusenuxtapp) instead for composables that do not require `nuxtApp`, or to simply check if context is available or not without an exception.
+If runtime context is unavailable in your scope, `useNuxtApp` will throw an exception when called. You can use [`tryUseNuxtApp`](/docs/4.x/api/composables/use-nuxt-app#tryusenuxtapp) instead for composables that do not require `nuxtApp`, or to simply check if context is available or not without an exception.
 
 <!--
 note
-By default, the shared runtime context of Nuxt is namespaced under the [`buildId`](/docs/api/nuxt-config#buildid) option. It allows the support of multiple runtime contexts.
+By default, the shared runtime context of Nuxt is namespaced under the [`buildId`](/docs/4.x/api/nuxt-config#buildid) option. It allows the support of multiple runtime contexts.
 
 ## Params
 
@@ -30,13 +30,13 @@ By default, the shared runtime context of Nuxt is namespaced under the [`buildId
 
 ### `provide (name, value)`
 
-`nuxtApp` is a runtime context that you can extend using [Nuxt plugins](/docs/guide/directory-structure/plugins). Use the `provide` function to create Nuxt plugins to make values and helper methods available in your Nuxt application across all composables and components.
+`nuxtApp` is a runtime context that you can extend using [Nuxt plugins](/docs/4.x/guide/directory-structure/plugins). Use the `provide` function to create Nuxt plugins to make values and helper methods available in your Nuxt application across all composables and components.
 
 `provide` function accepts `name` and `value` parameters.
 
-```js
+```ts
 const nuxtApp = useNuxtApp()
-nuxtApp.provide('hello', (name) => `Hello ${name}!`)
+nuxtApp.provide('hello', name => `Hello ${name}!`)
 
 // Prints "Hello name!"
 console.log(nuxtApp.$hello('name'))
@@ -46,11 +46,11 @@ As you can see in the example above, `$hello` has become the new and custom part
 
 ### `hook(name, cb)`
 
-Hooks available in `nuxtApp` allows you to customize the runtime aspects of your Nuxt application. You can use runtime hooks in Vue.js composables and [Nuxt plugins](/docs/guide/directory-structure/plugins) to hook into the rendering lifecycle.
+Hooks available in `nuxtApp` allows you to customize the runtime aspects of your Nuxt application. You can use runtime hooks in Vue.js composables and [Nuxt plugins](/docs/4.x/guide/directory-structure/plugins) to hook into the rendering lifecycle.
 
 `hook` function is useful for adding custom logic by hooking into the rendering lifecycle at a specific point. `hook` function is mostly used when creating Nuxt plugins.
 
-See [Runtime Hooks](/docs/api/advanced/hooks#app-hooks-runtime) for available runtime hooks called by Nuxt.
+See [Runtime Hooks](/docs/4.x/api/advanced/hooks#app-hooks-runtime) for available runtime hooks called by Nuxt.
 
 ```ts [app/plugins/test.ts]
 export default defineNuxtPlugin((nuxtApp) => {
@@ -84,8 +84,8 @@ await nuxtApp.callHook('my-plugin:init')
 
 Some useful methods:
 - [`component()`](https://vuejs.org/api/application.html#app-component) - Registers a global component if passing both a name string and a component definition, or retrieves an already registered one if only the name is passed.
-- [`directive()`](https://vuejs.org/api/application.html#app-directive) - Registers a global custom directive if passing both a name string and a directive definition, or retrieves an already registered one if only the name is passed[(example)](/docs/guide/directory-structure/plugins#vue-directives).
-- [`use()`](https://vuejs.org/api/application.html#app-use) - Installs a **[Vue.js Plugin](https://vuejs.org/guide/reusability/plugins.html)** [(example)](/docs/guide/directory-structure/plugins#vue-plugins).
+- [`directive()`](https://vuejs.org/api/application.html#app-directive) - Registers a global custom directive if passing both a name string and a directive definition, or retrieves an already registered one if only the name is passed[(example)](/docs/4.x/guide/directory-structure/plugins#vue-directives).
+- [`use()`](https://vuejs.org/api/application.html#app-use) - Installs a **[Vue.js Plugin](https://vuejs.org/guide/reusability/plugins.html)** [(example)](/docs/4.x/guide/directory-structure/plugins#vue-plugins).
 
 :read-more{icon="i-simple-icons-vuedotjs" to="https://vuejs.org/api/application.html#application-api"}
 
@@ -103,7 +103,7 @@ Nuxt exposes the following properties through `ssrContext`:
 `payload` exposes data and state variables from server side to client side. The following keys will be available on the client after they have been passed from the server side:
 
 - `serverRendered` (boolean) - Indicates if response is server-side-rendered.
-- `data` (object) - When you fetch the data from an API endpoint using either [`useFetch`](/docs/api/composables/use-fetch) or [`useAsyncData`](/docs/api/composables/use-async-data) , resulting payload can be accessed from the `payload.data`. This data is cached and helps you prevent fetching the same data in case an identical request is made more than once.
+- `data` (object) - When you fetch the data from an API endpoint using either [`useFetch`](/docs/4.x/api/composables/use-fetch) or [`useAsyncData`](/docs/4.x/api/composables/use-async-data) , resulting payload can be accessed from the `payload.data`. This data is cached and helps you prevent fetching the same data in case an identical request is made more than once.
 
   ::code-group
   ```vue [app/app.vue]
@@ -112,17 +112,17 @@ Nuxt exposes the following properties through `ssrContext`:
   </script>
   ```
   ```ts [server/api/count.ts]
-  export default defineEventHandler(event => {
+  export default defineEventHandler((event) => {
     return { count: 1 }
   })
   ```
   ::
 
-  After fetching the value of `count` using [`useAsyncData`](/docs/api/composables/use-async-data) in the example above, if you access `payload.data`, you will see `{ count: 1 }` recorded there.
+  After fetching the value of `count` using [`useAsyncData`](/docs/4.x/api/composables/use-async-data) in the example above, if you access `payload.data`, you will see `{ count: 1 }` recorded there.
 
-  When accessing the same `payload.data` from [`ssrcontext`](#ssrcontext), you can access the same value on the server side as well.
+  When accessing the same `payload.data` from [`ssrcontext`](/docs/4.x/api/composables/use-nuxt-app#ssrcontext), you can access the same value on the server side as well.
 
-- `state` (object) - When you use [`useState`](/docs/api/composables/use-state) composable in Nuxt to set shared state, this state data is accessed through `payload.state.[name-of-your-state]`.
+- `state` (object) - When you use [`useState`](/docs/4.x/api/composables/use-state) composable in Nuxt to set shared state, this state data is accessed through `payload.state.[name-of-your-state]`.
 
   ```ts [app/plugins/my-plugin.ts]
   export const useColor = () => useState<string>('color', () => 'pink')
@@ -173,7 +173,7 @@ export default defineComponent({
         // ...
       }
     })
-  }
+  },
 })
 ```
 
@@ -204,7 +204,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
 #### Usage
 
-```js
+```ts
 const result = nuxtApp.runWithContext(() => functionWithContext())
 ```
 
@@ -218,14 +218,14 @@ Vue.js Composition API (and Nuxt composables similarly) work by depending on an
 
 What it does mean? The Composition API and Nuxt Composables are only available during lifecycle and in same tick before any async operation:
 
-```js
+```ts
 // --- Vue internal ---
 const _vueInstance = null
 const getCurrentInstance = () => _vueInstance
 // ---
 
 // Vue / Nuxt sets a global variable referencing to current component in _vueInstance when calling setup()
-async function setup() {
+async function setup () {
   getCurrentInstance() // Works
   await someAsyncOperation() // Vue unsets the context in same tick before async operation!
   getCurrentInstance() // null
@@ -236,7 +236,7 @@ The classic solution to this, is caching the current instance on first call to a
 
 To overcome this limitation, Vue does some behind the scenes work when compiling our application code and restores context after each call for `<script setup>`:
 
-```js
+```ts
 const __instance = getCurrentInstance() // Generated by Vue compiler
 getCurrentInstance() // Works!
 await someAsyncOperation() // Vue unsets the context
@@ -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
 
@@ -279,7 +279,7 @@ You can use it for composables that do not require `nuxtApp`, or to simply check
 Example usage:
 
 ```ts [composable.ts]
-export function useStandType() {
+export function useStandType () {
   // Always works on the client
   if (tryUseNuxtApp()) {
     return useRuntimeConfig().public.STAND_TYPE

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

@@ -9,7 +9,7 @@ links:
 ---
 
 ::note
-`useNuxtData` gives you access to the current cached value of [`useAsyncData`](/docs/api/composables/use-async-data) , [`useLazyAsyncData`](/docs/api/composables/use-lazy-async-data), [`useFetch`](/docs/api/composables/use-fetch) and [`useLazyFetch`](/docs/api/composables/use-lazy-fetch) with explicitly provided key.
+`useNuxtData` gives you access to the current cached value of [`useAsyncData`](/docs/4.x/api/composables/use-async-data) , [`useLazyAsyncData`](/docs/4.x/api/composables/use-lazy-async-data), [`useFetch`](/docs/4.x/api/composables/use-fetch) and [`useLazyFetch`](/docs/4.x/api/composables/use-lazy-fetch) with explicitly provided key.
 ::
 
 ## Usage
@@ -50,10 +50,10 @@ const route = useRoute()
 
 const { data } = useLazyFetch(`/api/posts/${route.params.id}`, {
   key: `post-${route.params.id}`,
-  default() {
+  default () {
     // Find the individual post from the cache and set it as the default value.
     return posts.value.find(post => post.id === route.params.id)
-  }
+  },
 })
 </script>
 ```
@@ -80,10 +80,10 @@ let previousTodos = []
 const { data: todos } = useNuxtData('todos')
 
 async function addTodo () {
-  return $fetch('/api/addTodo', {
+  await $fetch('/api/addTodo', {
     method: 'post',
     body: {
-      todo: newTodo.value
+      todo: newTodo.value,
     },
     onRequest () {
       // Store the previously cached value to restore if fetch fails.
@@ -99,7 +99,7 @@ async function addTodo () {
     async onResponse () {
       // Invalidate todos in the background if the request succeeded.
       await refreshNuxtData('todos')
-    }
+    },
   })
 }
 </script>
@@ -107,6 +107,6 @@ async function addTodo () {
 
 ## Type
 
-```ts
-useNuxtData<DataT = any> (key: string): { data: Ref<DataT | undefined> }
+```ts [Signature]
+export function useNuxtData<DataT = any> (key: string): { data: Ref<DataT | undefined> }
 ```

package/3.api/2.composables/use-preview-mode.md

@@ -12,9 +12,9 @@ links:
 
 Preview mode allows you to see how your changes would be displayed on a live site without revealing them to users.
 
-You can use the built-in `usePreviewMode` composable to access and control preview state in Nuxt. If the composable detects preview mode it will automatically force any updates necessary for [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) to rerender preview content.
+You can use the built-in `usePreviewMode` composable to access and control preview state in Nuxt. If the composable detects preview mode it will automatically force any updates necessary for [`useAsyncData`](/docs/4.x/api/composables/use-async-data) and [`useFetch`](/docs/4.x/api/composables/use-fetch) to rerender preview content.
 
-```js
+```ts
 const { enabled, state } = usePreviewMode()
 ```
 
@@ -24,27 +24,28 @@ const { enabled, state } = usePreviewMode()
 
 You can specify a custom way to enable preview mode. By default the `usePreviewMode` composable will enable preview mode if there is a `preview` param in url that is equal to `true` (for example, `http://localhost:3000?preview=true`). You can wrap the `usePreviewMode` into custom composable, to keep options consistent across usages and prevent any errors.
 
-```js
+```ts
 export function useMyPreviewMode () {
+  const route = useRoute()
   return usePreviewMode({
     shouldEnable: () => {
       return !!route.query.customPreview
-    }
-  });
+    },
+  })
 }
 ```
 
 ### Modify default state
 
-`usePreviewMode` will try to store the value of a `token` param from url in state. You can modify this state and it will be available for all [`usePreviewMode`](/docs/api/composables/use-preview-mode) calls.
+`usePreviewMode` will try to store the value of a `token` param from url in state. You can modify this state and it will be available for all [`usePreviewMode`](/docs/4.x/api/composables/use-preview-mode) calls.
 
-```js
+```ts
 const data1 = ref('data1')
 
 const { enabled, state } = usePreviewMode({
   getState: (currentState) => {
     return { data1, data2: 'data2' }
-  }
+  },
 })
 ```
 
@@ -60,14 +61,14 @@ When preview mode is disabled, the composable will attach a callback to call `re
 
 You can specify custom callbacks to be triggered by providing your own functions for the `onEnable` and `onDisable` options.
 
-```js
+```ts
 const { enabled, state } = usePreviewMode({
   onEnable: () => {
     console.log('preview mode has been enabled')
   },
   onDisable: () => {
     console.log('preview mode has been disabled')
-  }
+  },
 })
 ```
 
@@ -81,8 +82,8 @@ const { enabled, state } = usePreviewMode()
 
 const { data } = await useFetch('/api/preview', {
   query: {
-    apiKey: state.token
-  }
+    apiKey: state.token,
+  },
 })
 </script>
 
@@ -107,12 +108,8 @@ npx nuxt generate
 npx nuxt preview
 ```
 
-Then you can see your preview page by adding the query param `preview` to the end of the page you want to see once:
-
-```js
-?preview=true
-```
+Then you can see your preview page by adding the query param `preview` to the end of the page you want to see once, for example `http://localhost:3000/?preview=true`.
 
 ::note
-`usePreviewMode` should be tested locally with `nuxt generate` and then `nuxt preview` rather than `nuxt dev`. (The [preview command](/docs/api/commands/preview) is not related to preview mode.)
+`usePreviewMode` should be tested locally with `nuxt generate` and then `nuxt preview` rather than `nuxt dev`. (The [preview command](/docs/4.x/api/commands/preview) is not related to preview mode.)
 ::

package/3.api/2.composables/use-request-event.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-Within the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context) you can use `useRequestEvent` to access the incoming request.
+Within the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context) you can use `useRequestEvent` to access the incoming request.
 
 ```ts
 // Get underlying request event

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

@@ -19,7 +19,7 @@ Headers that are **not meant to be forwarded** will **not be included** in the r
 ::
 
 ::tip
-The [`useFetch`](/docs/api/composables/use-fetch) composable uses `useRequestFetch` under the hood to automatically forward the request context and headers.
+The [`useFetch`](/docs/4.x/api/composables/use-fetch) composable uses `useRequestFetch` under the hood to automatically forward the request context and headers.
 ::
 
 ::code-group
@@ -33,7 +33,7 @@ const { data: forwarded } = await useAsyncData(() => requestFetch('/api/cookies'
 
 // This will NOT forward anything
 // Result: { cookies: {} }
-const { data: notForwarded } = await useAsyncData(() => $fetch('/api/cookies')) 
+const { data: notForwarded } = await useAsyncData(() => $fetch('/api/cookies'))
 </script>
 ```
 
@@ -48,5 +48,5 @@ export default defineEventHandler((event) => {
 ::
 
 ::tip
-In the browser during client-side navigation, `useRequestFetch` will behave just like regular [`$fetch`](/docs/api/utils/dollarfetch).
+In the browser during client-side navigation, `useRequestFetch` will behave just like regular [`$fetch`](/docs/4.x/api/utils/dollarfetch).
 ::

package/3.api/2.composables/use-request-header.md

@@ -8,7 +8,7 @@ links:
     size: xs
 ---
 
-You can use the built-in [`useRequestHeader`](/docs/api/composables/use-request-header) composable to access any incoming request header within your pages, components, and plugins.
+You can use the built-in [`useRequestHeader`](/docs/4.x/api/composables/use-request-header) composable to access any incoming request header within your pages, components, and plugins.
 
 ```ts
 // Get the authorization request header

package/3.api/2.composables/use-request-headers.md

@@ -8,14 +8,14 @@ links:
     size: xs
 ---
 
-You can use built-in [`useRequestHeaders`](/docs/api/composables/use-request-headers) composable to access the incoming request headers within your pages, components, and plugins.
+You can use built-in [`useRequestHeaders`](/docs/4.x/api/composables/use-request-headers) composable to access the incoming request headers within your pages, components, and plugins.
 
-```js
+```ts
 // Get all request headers
 const headers = useRequestHeaders()
 
 // Get only cookie request header
-const headers = useRequestHeaders(['cookie'])
+const { cookie } = useRequestHeaders(['cookie'])
 ```
 
 ::tip
@@ -31,7 +31,7 @@ The example below adds the `authorization` request header to an isomorphic `$fet
 ```vue [app/pages/some-page.vue]
 <script setup lang="ts">
 const { data } = await useFetch('/api/confidential', {
-  headers: useRequestHeaders(['authorization'])
+  headers: useRequestHeaders(['authorization']),
 })
 </script>
 ```

package/3.api/2.composables/use-request-url.md

@@ -11,7 +11,7 @@ links:
 `useRequestURL` is a helper function that returns an [URL object](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL) working on both server-side and client-side.
 
 ::important
-When utilizing [Hybrid Rendering](/docs/guide/concepts/rendering#hybrid-rendering) with cache strategies, all incoming request headers are dropped when handling the cached responses via the [Nitro caching layer](https://nitro.build/guide/cache) (meaning `useRequestURL` will return `localhost` for the `host`).
+When utilizing [Hybrid Rendering](/docs/4.x/guide/concepts/rendering#hybrid-rendering) with cache strategies, all incoming request headers are dropped when handling the cached responses via the [Nitro caching layer](https://nitro.build/guide/cache) (meaning `useRequestURL` will return `localhost` for the `host`).
 
 You can define the [`cache.varies` option](https://nitro.build/guide/cache#options) to specify headers that will be considered when caching and serving the responses, such as `host` and `x-forwarded-host` for multi-tenant environments.
 ::

package/3.api/2.composables/use-response-header.md

@@ -12,12 +12,12 @@ links:
 This composable is available in Nuxt v3.14+.
 ::
 
-You can use the built-in [`useResponseHeader`](/docs/api/composables/use-response-header) composable to set any server response header within your pages, components, and plugins.
+You can use the built-in [`useResponseHeader`](/docs/4.x/api/composables/use-response-header) composable to set any server response header within your pages, components, and plugins.
 
 ```ts
 // Set a custom response header
-const header = useResponseHeader('X-My-Header');
-header.value = 'my-value';
+const header = useResponseHeader('X-My-Header')
+header.value = 'my-value'
 ```
 
 ## Example
@@ -27,8 +27,8 @@ We can use `useResponseHeader` to easily set a response header on a per-page bas
 ```vue [app/pages/test.vue]
 <script setup>
 // pages/test.vue
-const header = useResponseHeader('X-My-Header');
-header.value = 'my-value';
+const header = useResponseHeader('X-My-Header')
+header.value = 'my-value'
 </script>
 
 <template>
@@ -37,12 +37,11 @@ header.value = 'my-value';
 </template>
 ```
 
-We can use `useResponseHeader` for example in Nuxt [middleware](/docs/guide/directory-structure/app/middleware) to set a response header for all pages.
+We can use `useResponseHeader` for example in Nuxt [middleware](/docs/4.x/guide/directory-structure/app/middleware) to set a response header for all pages.
 
 ```ts [app/middleware/my-header-middleware.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
-  const header = useResponseHeader('X-My-Always-Header');
-  header.value = `I'm Always here!`;
-});
-
+  const header = useResponseHeader('X-My-Always-Header')
+  header.value = `I'm Always here!`
+})
 ```

package/3.api/2.composables/use-route-announcer.md

@@ -16,7 +16,7 @@ This composable is available in Nuxt v3.12+.
 
 ## Description
 
-A composable which observes the page title changes and updates the announcer message accordingly. Used by [`<NuxtRouteAnnouncer>`](/docs/api/components/nuxt-route-announcer) and controllable.
+A composable which observes the page title changes and updates the announcer message accordingly. Used by [`<NuxtRouteAnnouncer>`](/docs/4.x/api/components/nuxt-route-announcer) and controllable.
 It hooks into Unhead's [`dom:rendered`](https://unhead.unjs.io/docs/typescript/head/api/hooks/dom-rendered) to read the page's title and set it as the announcer message.
 
 ## Parameters
@@ -53,8 +53,8 @@ Sets the message with `politeness = "assertive"`
 
 ```vue [app/pages/index.vue]
 <script setup lang="ts">
-  const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
-    politeness: 'assertive'
-  })
+const { message, politeness, set, polite, assertive } = useRouteAnnouncer({
+  politeness: 'assertive',
+})
 </script>
 ```

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

@@ -20,7 +20,7 @@ that rely on the route metadata, for example.
 
 ## Example
 
-In the following example, we call an API via [`useFetch`](/docs/api/composables/use-fetch) using a dynamic page parameter - `slug` - as part of the URL.
+In the following example, we call an API via [`useFetch`](/docs/4.x/api/composables/use-fetch) using a dynamic page parameter - `slug` - as part of the URL.
 
 ```html [~/pages/[slug\\].vue]
 <script setup lang="ts">

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

@@ -18,7 +18,9 @@ If you only need the router instance within your template, use `$router`:
 
 ```vue [app/pages/index.vue]
 <template>
-  <button @click="$router.back()">Back</button>
+  <button @click="$router.back()">
+    Back
+  </button>
 </template>
 ```
 
@@ -47,7 +49,7 @@ router.resolve({ name: 'home' })
 ```
 
 ::note
-`router.addRoute()` adds route details into an array of routes and it is useful while building [Nuxt plugins](/docs/guide/directory-structure/plugins) while `router.push()` on the other hand, triggers a new navigation immediately and it is useful in pages, Vue components and composable.
+`router.addRoute()` adds route details into an array of routes and it is useful while building [Nuxt plugins](/docs/4.x/guide/directory-structure/plugins) while `router.push()` on the other hand, triggers a new navigation immediately and it is useful in pages, Vue components and composable.
 ::
 
 ## Based on History API
@@ -55,8 +57,8 @@ router.resolve({ name: 'home' })
 - [`back()`](https://router.vuejs.org/api/interfaces/Router.html#back): Go back in history if possible, same as `router.go(-1)`.
 - [`forward()`](https://router.vuejs.org/api/interfaces/Router.html#forward): Go forward in history if possible, same as `router.go(1)`.
 - [`go()`](https://router.vuejs.org/api/interfaces/Router.html#go): Move forward or backward through the history without the hierarchical restrictions enforced in `router.back()` and `router.forward()`.
-- [`push()`](https://router.vuejs.org/api/interfaces/Router.html#push): Programmatically navigate to a new URL by pushing an entry in the history stack. **It is recommended to use [`navigateTo`](/docs/api/utils/navigate-to) instead.**
-- [`replace()`](https://router.vuejs.org/api/interfaces/Router.html#replace): Programmatically navigate to a new URL by replacing the current entry in the routes history stack. **It is recommended to use [`navigateTo`](/docs/api/utils/navigate-to) instead.**
+- [`push()`](https://router.vuejs.org/api/interfaces/Router.html#push): Programmatically navigate to a new URL by pushing an entry in the history stack. **It is recommended to use [`navigateTo`](/docs/4.x/api/utils/navigate-to) instead.**
+- [`replace()`](https://router.vuejs.org/api/interfaces/Router.html#replace): Programmatically navigate to a new URL by replacing the current entry in the routes history stack. **It is recommended to use [`navigateTo`](/docs/4.x/api/utils/navigate-to) instead.**
 
 ```ts [Example]
 const router = useRouter()
@@ -64,8 +66,8 @@ const router = useRouter()
 router.back()
 router.forward()
 router.go(3)
-router.push({ path: "/home" })
-router.replace({ hash: "#bio" })
+router.push({ path: '/home' })
+router.replace({ hash: '#bio' })
 ```
 
 ::read-more{icon="i-simple-icons-mdnwebdocs" to="https://developer.mozilla.org/en-US/docs/Web/API/History" target="_blank"}
@@ -78,7 +80,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
 
@@ -89,4 +91,4 @@ However, Nuxt has a concept of **route middleware** that simplifies the implemen
 
 ## Universal Router Instance
 
-If you do not have a `app/pages/` folder, then [`useRouter`](/docs/api/composables/use-router)  will return a universal router instance with similar helper methods, but be aware that not all features may be supported or behave in exactly the same way as with `vue-router`.
+If you do not have a `app/pages/` folder, then [`useRouter`](/docs/4.x/api/composables/use-router)  will return a universal router instance with similar helper methods, but be aware that not all features may be supported or behave in exactly the same way as with `vue-router`.