@nuxt/docs 4.1.2 → 4.2.0

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

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

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

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

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

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

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

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

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

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

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

@@ -11,7 +11,7 @@ links:
 Within your pages, components, and plugins you can use useAsyncData to get access to data that resolves asynchronously.
 
 ::note
-[`useAsyncData`](/docs/api/composables/use-async-data) is a composable meant to be called directly in the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context). It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client **without re-fetching the data on client side** when the page hydrates.
+[`useAsyncData`](/docs/4.x/api/composables/use-async-data) is a composable meant to be called directly in the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context). It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client **without re-fetching the data on client side** when the page hydrates.
 ::
 
 ## Usage
@@ -20,13 +20,13 @@ Within your pages, components, and plugins you can use useAsyncData to get acces
 <script setup lang="ts">
 const { data, status, error, refresh, clear } = await useAsyncData(
   'mountains',
-  () => $fetch('https://api.nuxtjs.dev/mountains')
+  () => $fetch('https://api.nuxtjs.dev/mountains'),
 )
 </script>
 ```
 
 ::warning
-If you're using a custom useAsyncData wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/guide/recipes/custom-usefetch#custom-usefetch) for more information on how to make a custom async data fetcher.
+If you're using a custom useAsyncData wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/4.x/guide/recipes/custom-usefetch#custom-usefetchuseasyncdata) for more information on how to make a custom async data fetcher.
 ::
 
 ::note
@@ -44,11 +44,11 @@ const { data: posts } = await useAsyncData(
   'posts',
   () => $fetch('https://fakeApi.com/posts', {
     params: {
-      page: page.value
-    }
+      page: page.value,
+    },
   }), {
-    watch: [page]
-  }
+    watch: [page],
+  },
 )
 </script>
 ```
@@ -65,23 +65,23 @@ const userId = computed(() => `user-${route.params.id}`)
 // When the route changes and userId updates, the data will be automatically refetched
 const { data: user } = useAsyncData(
   userId,
-  () => fetchUserById(route.params.id)
+  () => fetchUserById(route.params.id),
 )
 </script>
 ```
 
 ::warning
-[`useAsyncData`](/docs/api/composables/use-async-data) is a reserved function name transformed by the compiler, so you should not name your own function [`useAsyncData`](/docs/api/composables/use-async-data).
+[`useAsyncData`](/docs/4.x/api/composables/use-async-data) is a reserved function name transformed by the compiler, so you should not name your own function [`useAsyncData`](/docs/4.x/api/composables/use-async-data).
 ::
 
-:read-more{to="/docs/getting-started/data-fetching#useasyncdata"}
+:read-more{to="/docs/4.x/getting-started/data-fetching#useasyncdata"}
 
 ## Params
 
 - `key`: a unique key to ensure that data fetching can be properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you.
 - `handler`: an asynchronous function that must return a truthy value (for example, it should not be `undefined` or `null`) or the request may be duplicated on the client side.
 ::warning
-The `handler` function should be **side-effect free** to ensure predictable behavior during SSR and CSR hydration. If you need to trigger side effects, use the [`callOnce`](/docs/api/utils/call-once) utility to do so.
+The `handler` function should be **side-effect free** to ensure predictable behavior during SSR and CSR hydration. If you need to trigger side effects, use the [`callOnce`](/docs/4.x/api/utils/call-once) utility to do so.
 ::
 - `options`:
   - `server`: whether to fetch the data on the server (defaults to `true`)
@@ -91,8 +91,8 @@ The `handler` function should be **side-effect free** to ensure predictable beha
   - `transform`: a function that can be used to alter `handler` function result after resolving
   - `getCachedData`: Provide a function which returns cached data. A `null` or `undefined` return value will trigger a fetch. By default, this is:
     ```ts
-    const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating 
-      ? nuxtApp.payload.data[key] 
+    const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating
+      ? nuxtApp.payload.data[key]
       : nuxtApp.static.data[key]
     ```
     Which only caches data when `experimental.payloadExtraction` of `nuxt.config` is enabled.
@@ -102,12 +102,13 @@ The `handler` function should be **side-effect free** to ensure predictable beha
   - `dedupe`: avoid fetching same key more than once at a time (defaults to `cancel`). Possible options:
     - `cancel` - cancels existing requests when a new one is made
     - `defer` - does not make new requests at all if there is a pending request
+  - `timeout` - a number in milliseconds to wait before timing out the request (defaults to `undefined`, which means no timeout)
 
 ::note
 Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience.
 ::
 
-::read-more{to="/docs/api/composables/use-lazy-async-data"}
+::read-more{to="/docs/4.x/api/composables/use-lazy-async-data"}
 You can use `useLazyAsyncData` to have the same behavior as `lazy: true` with `useAsyncData`.
 ::
 
@@ -143,7 +144,7 @@ const { data: users2 } = useAsyncData('users', () => $fetch('/api/users'), { imm
 ```
 
 ::tip
-Keyed state created using `useAsyncData` can be retrieved across your Nuxt application using [`useNuxtData`](/docs/api/composables/use-nuxt-data).
+Keyed state created using `useAsyncData` can be retrieved across your Nuxt application using [`useNuxtData`](/docs/4.x/api/composables/use-nuxt-data).
 ::
 
 ## Return Values
@@ -163,19 +164,19 @@ Keyed state created using `useAsyncData` can be retrieved across your Nuxt appli
 By default, Nuxt waits until a `refresh` is finished before it can be executed again.
 
 ::note
-If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await [`useAsyncData`](/docs/api/composables/use-async-data) on the client side, `data` will remain `undefined` within `<script setup>`.
+If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await [`useAsyncData`](/docs/4.x/api/composables/use-async-data) on the client side, `data` will remain `undefined` within `<script setup>`.
 ::
 
 ## Type
 
 ```ts [Signature]
-function useAsyncData<DataT, DataE>(
-  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
+export function useAsyncData<DataT, DataE> (
+  handler: (nuxtApp: NuxtApp, options: { signal: AbortSignal }) => Promise<DataT>,
   options?: AsyncDataOptions<DataT>
 ): AsyncData<DataT, DataE>
-function useAsyncData<DataT, DataE>(
+export function useAsyncData<DataT, DataE> (
   key: MaybeRefOrGetter<string>,
-  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
+  handler: (nuxtApp: NuxtApp, options: { signal: AbortSignal }) => Promise<DataT>,
   options?: AsyncDataOptions<DataT>
 ): Promise<AsyncData<DataT, DataE>>
 
@@ -190,6 +191,7 @@ type AsyncDataOptions<DataT> = {
   pick?: string[]
   watch?: MultiWatchSources | false
   getCachedData?: (key: string, nuxtApp: NuxtApp, ctx: AsyncDataRequestContext) => DataT | undefined
+  timeout?: number
 }
 
 type AsyncDataRequestContext = {
@@ -204,13 +206,15 @@ type AsyncData<DataT, ErrorT> = {
   clear: () => void
   error: Ref<ErrorT | undefined>
   status: Ref<AsyncDataRequestStatus>
-};
+}
 
 interface AsyncDataExecuteOptions {
   dedupe?: 'cancel' | 'defer'
+  timeout?: number
+  signal?: AbortSignal
 }
 
 type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 ```
 
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/4.x/getting-started/data-fetching"}

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

@@ -17,7 +17,7 @@ const cookie = useCookie(name, options)
 ```
 
 ::note
-`useCookie` only works in the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context).
+`useCookie` only works in the [Nuxt context](/docs/4.x/guide/going-further/nuxt-app#the-nuxt-context).
 ::
 
 ::tip
@@ -40,7 +40,7 @@ export interface CookieOptions<T = any> extends Omit<CookieSerializeOptions & Co
 
 export interface CookieRef<T> extends Ref<T> {}
 
-export function useCookie<T = string | null | undefined>(
+export function useCookie<T = string | null | undefined> (
   name: string,
   options?: CookieOptions<T>
 ): CookieRef<T>
@@ -59,7 +59,7 @@ Most of the options will be directly passed to the [cookie](https://github.com/j
 | `decode` | `(value: string) => T` | `decodeURIComponent` + [destr](https://github.com/unjs/destr). | Custom function to decode the cookie value.  Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to decode a previously encoded cookie value into a JavaScript string or other object. <br/> **Note:** If an error is thrown from this function, the original, non-decoded cookie value will be returned as the cookie's value. |
 | `encode` | `(value: T) => string` | `JSON.stringify` + `encodeURIComponent` | Custom function to encode the cookie value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to encode a value into a string suited for a cookie's value. |
 | `default` | `() => T \| Ref<T>` | `undefined` | Function returning the default value if the cookie does not exist.  The function can also return a `Ref`. |
-| `watch` | `boolean \| 'shallow'` | `true`  | Whether to watch for changes and update the cookie. `true` for deep watch, `'shallow'` for shallow watch, i.e. data changes for only top level properties, `false` to disable. <br/> **Note:** Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/api/utils/refresh-cookie). |
+| `watch` | `boolean \| 'shallow'` | `true`  | Whether to watch for changes and update the cookie. `true` for deep watch, `'shallow'` for shallow watch, i.e. data changes for only top level properties, `false` to disable. <br/> **Note:** Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/4.x/api/utils/refresh-cookie). |
 | `readonly` | `boolean` | `false` | If `true`, disables writing to the cookie. |
 | `maxAge` | `number` | `undefined` | Max age in seconds for the cookie, i.e. the value for the [`Max-Age` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.2). The given number will be converted to an integer by rounding down. By default, no maximum age is set. |
 | `expires` | `Date` | `undefined` | Expiration date for the cookie. By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and will delete it on a condition like exiting a web browser application. <br/> **Note:** The [cookie storage model specification](https://tools.ietf.org/html/rfc6265#section-5.3) states that if both `expires` and `maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this, so if both are set, they should point to the same date and time! <br/>If neither of `expires` and `maxAge` is set, the cookie will be session-only and removed when the user closes their browser. |
@@ -84,15 +84,21 @@ The example below creates a cookie called `counter`. If the cookie doesn't exist
 <script setup lang="ts">
 const counter = useCookie('counter')
 
-counter.value = counter.value || Math.round(Math.random() * 1000)
+counter.value ||= Math.round(Math.random() * 1000)
 </script>
 
 <template>
   <div>
     <h1>Counter: {{ counter || '-' }}</h1>
-    <button @click="counter = null">reset</button>
-    <button @click="counter--">-</button>
-    <button @click="counter++">+</button>
+    <button @click="counter = null">
+      reset
+    </button>
+    <button @click="counter--">
+      -
+    </button>
+    <button @click="counter++">
+      +
+    </button>
   </div>
 </template>
 ```
@@ -105,8 +111,8 @@ const user = useCookie(
   'userInfo',
   {
     default: () => ({ score: -1 }),
-    watch: false
-  }
+    watch: false,
+  },
 )
 
 if (user.value) {
@@ -128,20 +134,18 @@ const list = useCookie(
   'list',
   {
     default: () => [],
-    watch: 'shallow'
-  }
+    watch: 'shallow',
+  },
 )
 
-function add() {
+function add () {
   list.value?.push(Math.round(Math.random() * 1000))
   // list cookie won't be updated with this change
 }
 
-function save() {
-  if (list.value) {
-    // the actual `list` cookie will be updated
-    list.value = [...list.value]
-  }
+function save () {
+  // the actual `list` cookie will be updated
+  list.value &&= [...list.value]
 }
 </script>
 
@@ -149,8 +153,12 @@ function save() {
   <div>
     <h1>List</h1>
     <pre>{{ list }}</pre>
-    <button @click="add">Add</button>
-    <button @click="save">Save</button>
+    <button @click="add">
+      Add
+    </button>
+    <button @click="save">
+      Save
+    </button>
   </div>
 </template>
 ```
@@ -160,7 +168,7 @@ function save() {
 You can use `getCookie` and `setCookie` from [`h3`](https://github.com/h3js/h3) package to set cookies in server API routes.
 
 ```ts [server/api/counter.ts]
-export default defineEventHandler(event => {
+export default defineEventHandler((event) => {
   // Read counter cookie
   let counter = getCookie(event, 'counter') || 0
 
@@ -172,4 +180,4 @@ export default defineEventHandler(event => {
 })
 ```
 
-:link-example{to="/docs/examples/advanced/use-cookie"}
+:link-example{to="/docs/4.x/examples/advanced/use-cookie"}

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

@@ -42,7 +42,7 @@ Returns a `Ref` containing the current Nuxt error (or `undefined` if there is no
 
 ## Example
 
-```ts
+```vue
 <script setup lang="ts">
 const error = useError()
 
@@ -52,4 +52,4 @@ if (error.value) {
 </script>
 ```
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/4.x/getting-started/error-handling"}