@nuxt/docs 4.1.2 → 4.1.3

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

@@ -22,7 +22,7 @@ export default defineEventHandler((event) => {
 })
 ```
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
 
 ## Define Runtime Config
 
@@ -38,9 +38,9 @@ export default defineNuxtConfig({
 
     // Public keys that are exposed to the client
     public: {
-      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
-    }
-  }
+      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api',
+    },
+  },
 })
 ```
 
@@ -48,7 +48,7 @@ export default defineNuxtConfig({
 Variables that need to be accessible on the server are added directly inside `runtimeConfig`. Variables that need to be accessible on both the client and the server are defined in `runtimeConfig.public`.
 ::
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
 
 ## Access Runtime Config
 
@@ -63,11 +63,11 @@ export default defineEventHandler(async (event) => {
     baseURL: config.public.apiBase,
     headers: {
       // Access a private variable (only available on the server)
-      Authorization: `Bearer ${config.apiSecret}`
-    }
+      Authorization: `Bearer ${config.apiSecret}`,
+    },
   })
   return result
-}
+})
 ```
 
 In this example, since `apiBase` is defined within the `public` namespace, it is universally accessible on both server and client-side, while `apiSecret` **is only accessible on the server-side**.
@@ -76,7 +76,7 @@ In this example, since `apiBase` is defined within the `public` namespace, it is
 
 It is possible to update runtime config values using a matching environment variable name prefixed with `NUXT_`.
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
 
 ### Using the `.env` File
 
@@ -95,7 +95,7 @@ Any environment variables set within `.env` file are accessed using `process.env
 In **production runtime**, you should use platform environment variables and `.env` is not used.
 ::
 
-:read-more{to="/docs/guide/directory-structure/env"}
+:read-more{to="/docs/4.x/guide/directory-structure/env"}
 
 ## `app` namespace
 
@@ -139,4 +139,4 @@ export default defineEventHandler((event) => {
 })
 ```
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}

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

@@ -13,7 +13,7 @@ This composable is available in Nuxt v3.14+.
 ::
 
 ```ts [signature]
-function useRuntimeHook<THookName extends keyof RuntimeNuxtHooks>(
+function useRuntimeHook<THookName extends keyof RuntimeNuxtHooks> (
   name: THookName,
   fn: RuntimeNuxtHooks[THookName] extends HookCallback ? RuntimeNuxtHooks[THookName] : never
 ): void
@@ -23,7 +23,7 @@ function useRuntimeHook<THookName extends keyof RuntimeNuxtHooks>(
 
 ### Parameters
 
-- `name`: The name of the runtime hook to register. You can see the full list of [runtime Nuxt hooks here](/docs/api/advanced/hooks#app-hooks-runtime).
+- `name`: The name of the runtime hook to register. You can see the full list of [runtime Nuxt hooks here](/docs/4.x/api/advanced/hooks#app-hooks-runtime).
 - `fn`: The callback function to execute when the hook is triggered. The function signature varies based on the hook name.
 
 ### Returns

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

@@ -14,7 +14,7 @@ This helps you avoid common mistakes, such as using `name` instead of `property`
 This is the recommended way to add meta tags to your site as it is XSS safe and has full TypeScript support.
 ::
 
-:read-more{to="/docs/getting-started/seo-meta"}
+:read-more{to="/docs/4.x/getting-started/seo-meta"}
 
 ## Usage
 
@@ -39,7 +39,7 @@ const title = ref('My title')
 
 useSeoMeta({
   title,
-  description: () => `This is a description for the ${title.value} page`
+  description: () => `This is a description for the ${title.value} page`,
 })
 </script>
 ```
@@ -48,7 +48,7 @@ useSeoMeta({
 
 There are over 100 parameters. See the [full list of parameters in the source code](https://github.com/harlan-zw/zhead/blob/main/packages/zhead/src/metaFlat.ts#L1035).
 
-:read-more{to="/docs/getting-started/seo-meta"}
+:read-more{to="/docs/4.x/getting-started/seo-meta"}
 
 ## Performance
 
@@ -77,4 +77,4 @@ useSeoMeta({
 </script>
 ```
 
-This previously used the [`useServerSeoMeta`](/docs/api/composables/use-server-seo-meta) composable, but it has been deprecated in favor of this approach.
+This previously used the [`useServerSeoMeta`](/docs/4.x/api/composables/use-server-seo-meta) composable, but it has been deprecated in favor of this approach.

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

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

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

@@ -15,7 +15,7 @@ links:
 const count = useState('counter', () => Math.round(Math.random() * 100))
 ```
 
-:read-more{to="/docs/getting-started/state-management"}
+:read-more{to="/docs/4.x/getting-started/state-management"}
 
 ::important
 Because the data inside `useState` will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
@@ -38,11 +38,11 @@ const state = useState('my-shallow-state', () => shallowRef({ deep: 'not reactiv
 
 ## Type
 
-```ts
-useState<T>(init?: () => T | Ref<T>): Ref<T>
-useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>
+```ts [Signature]
+export function useState<T> (init?: () => T | Ref<T>): Ref<T>
+export function useState<T> (key: string, init?: () => T | Ref<T>): Ref<T>
 ```
 
-- `key`: A unique key ensuring that data fetching is properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file and line number of the instance of [`useState`](/docs/api/composables/use-state) will be generated for you.
+- `key`: A unique key ensuring that data fetching is properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file and line number of the instance of [`useState`](/docs/4.x/api/composables/use-state) will be generated for you.
 - `init`: A function that provides initial value for the state when not initiated. This function can also return a `Ref`.
 - `T`: (typescript only) Specify the type of state

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

@@ -11,16 +11,16 @@ links:
 Nuxt uses [ofetch](https://github.com/unjs/ofetch) to expose globally the `$fetch` helper for making HTTP requests within your Vue app or API routes.
 
 ::tip{icon="i-lucide-rocket"}
-During server-side rendering, calling `$fetch` to fetch your internal [API routes](/docs/guide/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**.
+During server-side rendering, calling `$fetch` to fetch your internal [API routes](/docs/4.x/guide/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**.
 ::
 
 ::note{color="blue" icon="i-lucide-info"}
-Using `$fetch` in components without wrapping it with [`useAsyncData`](/docs/api/composables/use-async-data) causes fetching the data twice: initially on the server, then again on the client-side during hydration, because `$fetch` does not transfer state from the server to the client. Thus, the fetch will be executed on both sides because the client has to get the data again.
+Using `$fetch` in components without wrapping it with [`useAsyncData`](/docs/4.x/api/composables/use-async-data) causes fetching the data twice: initially on the server, then again on the client-side during hydration, because `$fetch` does not transfer state from the server to the client. Thus, the fetch will be executed on both sides because the client has to get the data again.
 ::
 
 ## Usage
 
-We recommend using [`useFetch`](/docs/api/composables/use-fetch) or [`useAsyncData`](/docs/api/composables/use-async-data) + `$fetch` to prevent double data fetching when fetching the component data.
+We recommend using [`useFetch`](/docs/4.x/api/composables/use-fetch) or [`useAsyncData`](/docs/4.x/api/composables/use-async-data) + `$fetch` to prevent double data fetching when fetching the component data.
 
 ```vue [app/app.vue]
 <script setup lang="ts">
@@ -35,22 +35,24 @@ const { data } = await useFetch('/api/item')
 </script>
 ```
 
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/4.x/getting-started/data-fetching"}
 
 You can use `$fetch` in any methods that are executed only on client-side.
 
 ```vue [app/pages/contact.vue]
 <script setup lang="ts">
-async function contactForm() {
+async function contactForm () {
   await $fetch('/api/contact', {
     method: 'POST',
-    body: { hello: 'world '}
+    body: { hello: 'world' },
   })
 }
 </script>
 
 <template>
-  <button @click="contactForm">Contact</button>
+  <button @click="contactForm">
+    Contact
+  </button>
 </template>
 ```
 
@@ -95,4 +97,4 @@ const { data } = await useAsyncData(() => requestFetch('/api/cookies'))
 </script>
 ```
 
-However, when calling `useFetch` with a relative URL on the server, Nuxt will use [`useRequestFetch`](/docs/api/composables/use-request-fetch) to proxy headers and cookies (with the exception of headers not meant to be forwarded, like `host`).
+However, when calling `useFetch` with a relative URL on the server, Nuxt will use [`useRequestFetch`](/docs/4.x/api/composables/use-request-fetch) to proxy headers and cookies (with the exception of headers not meant to be forwarded, like `host`).

package/3.api/3.utils/abort-navigation.md

@@ -9,13 +9,13 @@ links:
 ---
 
 ::warning
-`abortNavigation` is only usable inside a [route middleware handler](/docs/guide/directory-structure/app/middleware).
+`abortNavigation` is only usable inside a [route middleware handler](/docs/4.x/guide/directory-structure/app/middleware).
 ::
 
 ## Type
 
-```ts
-abortNavigation(err?: Error | string): false
+```ts [Signature]
+export function abortNavigation (err?: Error | string): false
 ```
 
 ## Parameters

package/3.api/3.utils/add-route-middleware.md

@@ -9,7 +9,7 @@ links:
 ---
 
 ::note
-Route middleware are navigation guards stored in the [`app/middleware/`](/docs/guide/directory-structure/app/middleware) directory of your Nuxt application (unless [set otherwise](/docs/api/nuxt-config#middleware)).
+Route middleware are navigation guards stored in the [`app/middleware/`](/docs/4.x/guide/directory-structure/app/middleware) directory of your Nuxt application (unless [set otherwise](/docs/4.x/api/nuxt-config#middleware)).
 ::
 
 ## Type
@@ -31,7 +31,7 @@ interface AddRouteMiddlewareOptions {
 
 Can be either a string or a function of type `RouteMiddleware`. Function takes the next route `to` as the first argument and the current route `from` as the second argument, both of which are Vue route objects.
 
-Learn more about available properties of [route objects](/docs/api/composables/use-route).
+Learn more about available properties of [route objects](/docs/4.x/api/composables/use-route).
 
 ### `middleware`
 
@@ -80,9 +80,9 @@ Global route middleware can be defined in two ways:
   ```ts [app/plugins/my-plugin.ts]
   export default defineNuxtPlugin(() => {
     addRouteMiddleware('global-middleware', (to, from) => {
-        console.log('global middleware that runs on every route change')
-      },
-      { global: true }
+      console.log('global middleware that runs on every route change')
+    },
+    { global: true },
     )
   })
   ```

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

@@ -54,14 +54,14 @@ await callOnce(async () => {
 `navigation` mode is available since [Nuxt v3.15](/blog/v3-15).
 ::
 
-::tip{to="/docs/getting-started/state-management#usage-with-pinia"}
+::tip{to="/docs/4.x/getting-started/state-management#usage-with-pinia"}
 `callOnce` is useful in combination with the [Pinia module](/modules/pinia) to call store actions.
 ::
 
-:read-more{to="/docs/getting-started/state-management"}
+:read-more{to="/docs/4.x/getting-started/state-management"}
 
 ::warning
-Note that `callOnce` doesn't return anything. You should use [`useAsyncData`](/docs/api/composables/use-async-data) or [`useFetch`](/docs/api/composables/use-fetch) if you want to do data fetching during SSR.
+Note that `callOnce` doesn't return anything. You should use [`useAsyncData`](/docs/4.x/api/composables/use-async-data) or [`useFetch`](/docs/4.x/api/composables/use-fetch) if you want to do data fetching during SSR.
 ::
 
 ::note
@@ -70,9 +70,9 @@ Note that `callOnce` doesn't return anything. You should use [`useAsyncData`](/d
 
 ## Type
 
-```ts
-callOnce (key?: string, fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
-callOnce(fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
+```ts [Signature]
+export function callOnce (key?: string, fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
+export function callOnce (fn?: (() => any | Promise<any>), options?: CallOnceOptions): Promise<void>
 
 type CallOnceOptions = {
   /**

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

@@ -16,7 +16,7 @@ Within your pages, components, and plugins, you can use `clearError` to clear al
 
 You can provide an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
 
-```js
+```ts
 // Without redirect
 clearError()
 
@@ -24,6 +24,6 @@ clearError()
 clearError({ redirect: '/homepage' })
 ```
 
-Errors are set in state using [`useError()`](/docs/api/composables/use-error). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
+Errors are set in state using [`useError()`](/docs/4.x/api/composables/use-error). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/4.x/getting-started/error-handling"}

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

@@ -14,10 +14,10 @@ This method is useful if you want to invalidate the data fetching for another pa
 
 ## Type
 
-```ts
-clearNuxtData (keys?: string | string[] | ((key: string) => boolean)): void
+```ts [Signature]
+export function clearNuxtData (keys?: string | string[] | ((key: string) => boolean)): void
 ```
 
 ## Parameters
 
-* `keys`: One or an array of keys that are used in [`useAsyncData`](/docs/api/composables/use-async-data) to delete their cached data. If no keys are provided, **all data** will be invalidated.
+* `keys`: One or an array of keys that are used in [`useAsyncData`](/docs/4.x/api/composables/use-async-data) to delete their cached data. If no keys are provided, **all data** will be invalidated.

package/3.api/3.utils/clear-nuxt-state.md

@@ -14,10 +14,10 @@ This method is useful if you want to invalidate the state of `useState`.
 
 ## Type
 
-```ts
-clearNuxtState (keys?: string | string[] | ((key: string) => boolean)): void
+```ts [Signature]
+export function clearNuxtState (keys?: string | string[] | ((key: string) => boolean)): void
 ```
 
 ## Parameters
 
-- `keys`: One or an array of keys that are used in [`useState`](/docs/api/composables/use-state) to delete their cached state. If no keys are provided, **all state** will be invalidated.
+- `keys`: One or an array of keys that are used in [`useState`](/docs/4.x/api/composables/use-state) to delete their cached state. If no keys are provided, **all state** will be invalidated.

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

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

package/3.api/3.utils/define-lazy-hydration-component.md

@@ -20,13 +20,13 @@ Hydrates the component when it becomes visible in the viewport.
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'visible',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
 <template>
   <div>
-    <!-- 
+    <!--
       Hydration will be triggered when
       the element(s) is 100px away from entering the viewport.
     -->
@@ -53,7 +53,7 @@ Hydrates the component when the browser is idle. This is suitable if you need th
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'idle',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
@@ -81,7 +81,7 @@ Hydrates the component after a specified interaction (e.g., click, mouseover).
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'interaction',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
@@ -110,7 +110,7 @@ Hydrates the component when the window matches a media query.
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'mediaQuery',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
@@ -136,8 +136,8 @@ Hydrates the component after a specified delay (in milliseconds).
 ```vue
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
-  'time', 
-  () => import('./components/MyComponent.vue')
+  'time',
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
@@ -159,12 +159,12 @@ Hydrates the component based on a boolean condition.
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'if',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 
 const isReady = ref(false)
 
-function myFunction() {
+function myFunction () {
   // Trigger custom hydration strategy...
   isReady.value = true
 }
@@ -188,7 +188,7 @@ Never hydrates the component.
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'never',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 </script>
 
@@ -208,11 +208,11 @@ All delayed hydration components emit a `@hydrated` event when they are hydrated
 <script setup lang="ts">
 const LazyHydrationMyComponent = defineLazyHydrationComponent(
   'visible',
-  () => import('./components/MyComponent.vue')
+  () => import('./components/MyComponent.vue'),
 )
 
-function onHydrate() {
-  console.log("Component has been hydrated!")
+function onHydrate () {
+  console.log('Component has been hydrated!')
 }
 </script>
 

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

@@ -25,11 +25,11 @@ If you choose not to use `setup()` in your app, you can use the `asyncData()` me
 ```vue [app/pages/index.vue]
 <script lang="ts">
 export default defineNuxtComponent({
-  async asyncData() {
+  asyncData () {
     return {
       data: {
-        greetings: 'hello world!'
-      }
+        greetings: 'hello world!',
+      },
     }
   },
 })
@@ -43,9 +43,9 @@ If you choose not to use `setup()` in your app, you can use the `head()` method
 ```vue [app/pages/index.vue]
 <script lang="ts">
 export default defineNuxtComponent({
-  head(nuxtApp) {
+  head (nuxtApp) {
     return {
-      title: 'My site'
+      title: 'My site',
     }
   },
 })

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

@@ -16,14 +16,14 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/plugins#creating-plugins"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/plugins#creating-plugins"}
 
 ## Type
 
-```ts
-defineNuxtPlugin<T extends Record<string, unknown>>(plugin: Plugin<T> | ObjectPlugin<T>): Plugin<T> & ObjectPlugin<T>
+```ts [Signature]
+export function defineNuxtPlugin<T extends Record<string, unknown>> (plugin: Plugin<T> | ObjectPlugin<T>): Plugin<T> & ObjectPlugin<T>
 
-type Plugin<T> = (nuxt: [NuxtApp](/docs/guide/going-further/internals#the-nuxtapp-interface)) => Promise<void> | Promise<{ provide?: T }> | void | { provide?: T }
+type Plugin<T> = (nuxt: NuxtApp) => Promise<void> | Promise<{ provide?: T }> | void | { provide?: T }
 
 interface ObjectPlugin<T> {
   name?: string
@@ -32,7 +32,7 @@ interface ObjectPlugin<T> {
   order?: number
   parallel?: boolean
   setup?: Plugin<T>
-  hooks?: Partial<[RuntimeNuxtHooks](/docs/api/advanced/hooks#app-hooks-runtime)>
+  hooks?: Partial<RuntimeNuxtHooks>
   env?: {
     islands?: boolean
   }
@@ -42,7 +42,7 @@ interface ObjectPlugin<T> {
 ## Parameters
 
 **plugin**: A plugin can be defined in two ways:
-1. **Function Plugin**: A function that receives the [`NuxtApp`](/docs/guide/going-further/internals#the-nuxtapp-interface) instance and can return a promise with an potential object with a [`provide`](/docs/guide/directory-structure/plugins#providing-helpers) property if you want to provide a helper on [`NuxtApp`](/docs/guide/going-further/internals#the-nuxtapp-interface) instance.
+1. **Function Plugin**: A function that receives the [`NuxtApp`](/docs/4.x/guide/going-further/internals#the-nuxtapp-interface) instance and can return a promise with an potential object with a [`provide`](/docs/4.x/guide/directory-structure/plugins#providing-helpers) property if you want to provide a helper on [`NuxtApp`](/docs/4.x/guide/going-further/internals#the-nuxtapp-interface) instance.
 2. **Object Plugin**: An object that can include various properties to configure the plugin's behavior, such as `name`, `enforce`, `dependsOn`, `order`, `parallel`, `setup`, `hooks`, and `env`.
 
 | Property           | Type                                                                 | Required | Description                                                                                                     |
@@ -69,8 +69,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   // Add a global method
   return {
     provide: {
-      hello: (name: string) => `Hello ${name}!`
-    }
+      hello: (name: string) => `Hello ${name}!`,
+    },
   }
 })
 ```
@@ -86,17 +86,17 @@ export default defineNuxtPlugin({
   async setup (nuxtApp) {
     // Plugin setup logic
     const data = await $fetch('/api/config')
-    
+
     return {
       provide: {
-        config: data
-      }
+        config: data,
+      },
     }
   },
   hooks: {
-    'app:created'() {
+    'app:created' () {
       console.log('App created!')
-    }
+    },
   },
 })
 ```

package/3.api/3.utils/define-nuxt-route-middleware.md

@@ -8,12 +8,12 @@ links:
     size: xs
 ---
 
-Route middleware are stored in the [`app/middleware/`](/docs/guide/directory-structure/app/middleware) of your Nuxt application (unless [set otherwise](/docs/api/nuxt-config#middleware)).
+Route middleware are stored in the [`app/middleware/`](/docs/4.x/guide/directory-structure/app/middleware) of your Nuxt application (unless [set otherwise](/docs/4.x/api/nuxt-config#middleware)).
 
 ## Type
 
-```ts
-defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware
+```ts [Signature]
+export function defineNuxtRouteMiddleware (middleware: RouteMiddleware): RouteMiddleware
 
 interface RouteMiddleware {
   (to: RouteLocationNormalized, from: RouteLocationNormalized): ReturnType<NavigationGuard>
@@ -48,7 +48,7 @@ The above route middleware will redirect a user to the custom error page defined
 
 ### Redirection
 
-Use [`useState`](/docs/api/composables/use-state) in combination with `navigateTo` helper function inside the route middleware to redirect users to different routes based on their authentication status:
+Use [`useState`](/docs/4.x/api/composables/use-state) in combination with `navigateTo` helper function inside the route middleware to redirect users to different routes based on their authentication status:
 
 ```ts [app/middleware/auth.ts]
 export default defineNuxtRouteMiddleware((to, from) => {
@@ -64,4 +64,4 @@ export default defineNuxtRouteMiddleware((to, from) => {
 })
 ```
 
-Both [navigateTo](/docs/api/utils/navigate-to) and [abortNavigation](/docs/api/utils/abort-navigation) are globally available helper functions that you can use inside `defineNuxtRouteMiddleware`.
+Both [navigateTo](/docs/4.x/api/utils/navigate-to) and [abortNavigation](/docs/4.x/api/utils/abort-navigation) are globally available helper functions that you can use inside `defineNuxtRouteMiddleware`.