@nuxt/docs 4.1.2 → 4.2.0

package/2.guide/3.going-further/6.nuxt-app.md

@@ -15,7 +15,7 @@ In Nuxt 2, this was referred to as **Nuxt context**.
 
 ## Nuxt App Interface
 
-::read-more{to="/docs/guide/going-further/internals#the-nuxtapp-interface"}
+::read-more{to="/docs/4.x/guide/going-further/internals#the-nuxtapp-interface"}
 Jump over the `NuxtApp` interface documentation.
 ::
 
@@ -23,13 +23,13 @@ Jump over the `NuxtApp` interface documentation.
 
 Many composables and utilities, both built-in and user-made, may require access to the Nuxt instance. This doesn't exist everywhere on your application, because a fresh instance is created on every request.
 
-Currently, the Nuxt context is only accessible in [plugins](/docs/guide/directory-structure/plugins), [Nuxt hooks](/docs/guide/going-further/hooks), [Nuxt middleware](/docs/guide/directory-structure/app/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup.html) (in pages and components).
+Currently, the Nuxt context is only accessible in [plugins](/docs/4.x/guide/directory-structure/plugins), [Nuxt hooks](/docs/4.x/guide/going-further/hooks), [Nuxt middleware](/docs/4.x/guide/directory-structure/app/middleware) (if wrapped in `defineNuxtRouteMiddleware`), and [setup functions](https://vuejs.org/api/composition-api-setup.html) (in pages and components).
 
-If a composable is called without access to the context, you may get an error stating that 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.' In that case, you can also explicitly call functions within this context by using [`nuxtApp.runWithContext`](/docs/api/composables/use-nuxt-app#runwithcontext).
+If a composable is called without access to the context, you may get an error stating that 'A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.' In that case, you can also explicitly call functions within this context by using [`nuxtApp.runWithContext`](/docs/4.x/api/composables/use-nuxt-app#runwithcontext).
 
 ## Accessing NuxtApp
 
-Within composables, plugins and components you can access `nuxtApp` with [`useNuxtApp()`](/docs/api/composables/use-nuxt-app):
+Within composables, plugins and components you can access `nuxtApp` with [`useNuxtApp()`](/docs/4.x/api/composables/use-nuxt-app):
 
 ```ts [app/composables/useMyComposable.ts]
 export function useMyComposable () {
@@ -38,11 +38,11 @@ export function useMyComposable () {
 }
 ```
 
-If your composable does not always need `nuxtApp` or you simply want to check if it is present or not, since [`useNuxtApp`](/docs/api/composables/use-nuxt-app) throws an exception, you can use [`tryUseNuxtApp`](/docs/api/composables/use-nuxt-app#tryusenuxtapp) instead.
+If your composable does not always need `nuxtApp` or you simply want to check if it is present or not, since [`useNuxtApp`](/docs/4.x/api/composables/use-nuxt-app) throws an exception, you can use [`tryUseNuxtApp`](/docs/4.x/api/composables/use-nuxt-app#tryusenuxtapp) instead.
 
 Plugins also receive `nuxtApp` as the first argument for convenience.
 
-:read-more{to="/docs/guide/directory-structure/plugins"}
+:read-more{to="/docs/4.x/guide/directory-structure/plugins"}
 
 ## Providing Helpers
 
@@ -50,12 +50,12 @@ You can provide helpers to be usable across all composables and application. Thi
 
 ```ts
 const nuxtApp = useNuxtApp()
-nuxtApp.provide('hello', (name) => `Hello ${name}!`)
+nuxtApp.provide('hello', name => `Hello ${name}!`)
 
 console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
 ```
 
-::read-more{to="/docs/guide/directory-structure/plugins#providing-helpers"}
+::read-more{to="/docs/4.x/guide/directory-structure/plugins#providing-helpers"}
 It is possible to inject helpers by returning an object with a `provide` key in plugins.
 ::
 

package/2.guide/3.going-further/7.layers.md

@@ -5,9 +5,9 @@ description: Nuxt provides a powerful system that allows you to extend the defau
 
 Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.
 
-:read-more{to="/docs/getting-started/layers"}
+:read-more{to="/docs/4.x/getting-started/layers"}
 
-A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file to indicate it is a layer.
+A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file to indicate it is a layer.
 
 ```ts [base/nuxt.config.ts]
 export default defineNuxtConfig({})
@@ -15,16 +15,16 @@ export default defineNuxtConfig({})
 
 Additionally, certain other files in the layer directory will be auto-scanned and used by Nuxt for the project extending this layer.
 
-- [`app/components/*`](/docs/guide/directory-structure/app/components)   - Extend the default components
-- [`app/composables/*`](/docs/guide/directory-structure/app/composables)  - Extend the default composables
-- [`app/layouts/*`](/docs/guide/directory-structure/app/layouts)  - Extend the default layouts
-- [`app/middleware/*`](/docs/guide/directory-structure/app/middleware)  - Extend the default middleware
-- [`app/pages/*`](/docs/guide/directory-structure/app/pages)        - Extend the default pages
-- [`app/plugins/*`](/docs/guide/directory-structure/plugins)        - Extend the default plugins
-- [`app/utils/*`](/docs/guide/directory-structure/app/utils)   - Extend the default utils
-- [`app/app.config.ts`](/docs/guide/directory-structure/app-config)  - Extend the default app config
-- [`server/*`](/docs/guide/directory-structure/server)       - Extend the default server endpoints & middleware
-- [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config)- Extend the default nuxt config
+- [`app/components/*`](/docs/4.x/guide/directory-structure/app/components)   - Extend the default components
+- [`app/composables/*`](/docs/4.x/guide/directory-structure/app/composables)  - Extend the default composables
+- [`app/layouts/*`](/docs/4.x/guide/directory-structure/app/layouts)  - Extend the default layouts
+- [`app/middleware/*`](/docs/4.x/guide/directory-structure/app/middleware)  - Extend the default middleware
+- [`app/pages/*`](/docs/4.x/guide/directory-structure/app/pages)        - Extend the default pages
+- [`app/plugins/*`](/docs/4.x/guide/directory-structure/plugins)        - Extend the default plugins
+- [`app/utils/*`](/docs/4.x/guide/directory-structure/app/utils)   - Extend the default utils
+- [`app/app.config.ts`](/docs/4.x/guide/directory-structure/app-config)  - Extend the default app config
+- [`server/*`](/docs/4.x/guide/directory-structure/server)       - Extend the default server endpoints & middleware
+- [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config)- Extend the default nuxt config
 
 ## Basic Example
 
@@ -33,35 +33,35 @@ Additionally, certain other files in the layer directory will be auto-scanned an
   ```ts [nuxt.config.ts]
   export default defineNuxtConfig({
     extends: [
-      './base'
-    ]
+      './base',
+    ],
   })
   ```
 
   ```vue [app/app.vue]
-    <template>
-      <BaseComponent/>
-    </template>
+  <template>
+    <BaseComponent />
+  </template>
   ```
 
   ```ts [base/nuxt.config.ts]
-    export default defineNuxtConfig({
-      // Extending from base nuxt.config.ts!
-      app: {
-        head: {
-          title: 'Extending Configs is Fun!',
-          meta: [
-            { name: 'description', content: 'I am using the extends feature in Nuxt!' }
-          ],
-        }
-      }
-    })
+  export default defineNuxtConfig({
+    // Extending from base nuxt.config.ts!
+    app: {
+      head: {
+        title: 'Extending Configs is Fun!',
+        meta: [
+          { name: 'description', content: 'I am using the extends feature in Nuxt!' },
+        ],
+      },
+    },
+  })
   ```
 
   ```vue [base/app/components/BaseComponent.vue]
-    <template>
-      <h1>Extending Components is Fun!</h1>
-    </template>
+  <template>
+    <h1>Extending Components is Fun!</h1>
+  </template>
   ```
 
 ::
@@ -79,10 +79,13 @@ For example:
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    './layers/base',      // Highest priority (among extends)
-    './layers/theme',     // Medium priority  
-    './layers/custom'     // Lower priority
-  ]
+    // Highest priority (among extends)
+    './layers/base',
+    // Medium priority
+    './layers/theme',
+    // Lower priority
+    './layers/custom',
+  ],
   // Your project has the highest priority
 })
 ```
@@ -110,13 +113,19 @@ You can use a git repository to share your Nuxt layer. Some examples:
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    'github:username/repoName',        // GitHub Remote Source
-    'github:username/repoName/base',   // GitHub Remote Source within /base directory
-    'github:username/repoName#dev',    // GitHub Remote Source from dev branch
-    'github:username/repoName#v1.0.0', // GitHub Remote Source from v1.0.0 tag
-    'gitlab:username/repoName',        // GitLab Remote Source example
-    'bitbucket:username/repoName',     // Bitbucket Remote Source example
-  ]
+    // GitHub Remote Source
+    'github:username/repoName',
+    // GitHub Remote Source within /base directory
+    'github:username/repoName/base',
+    // GitHub Remote Source from dev branch
+    'github:username/repoName#dev',
+    // GitHub Remote Source from v1.0.0 tag
+    'github:username/repoName#v1.0.0',
+    // GitLab Remote Source example
+    'gitlab:username/repoName',
+    // Bitbucket Remote Source example
+    'bitbucket:username/repoName',
+  ],
 })
 ```
 
@@ -138,8 +147,8 @@ When using git remote sources, if a layer has npm dependencies and you wish to i
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    ['github:username/repoName', { install: true }]
-  ]
+    ['github:username/repoName', { install: true }],
+  ],
 })
 ```
 ::
@@ -156,8 +165,8 @@ export default defineNuxtConfig({
     // Node Module with scope
     '@scope/moduleName',
     // or just the module name
-    'moduleName'
-  ]
+    'moduleName',
+  ],
 })
 ```
 
@@ -210,37 +219,45 @@ When importing using global aliases (such as `~/` and `@/`) in a layer component
 
 Also when using relative paths in `nuxt.config` file of a layer, (with exception of nested `extends`) they are resolved relative to user's project instead of the layer. As a workaround, use full resolved paths in `nuxt.config`:
 
-```js [nuxt.config.ts]
-import { fileURLToPath } from 'url'
-import { dirname, join } from 'path'
+```ts [nuxt.config.ts]
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
 
 const currentDir = dirname(fileURLToPath(import.meta.url))
 
 export default defineNuxtConfig({
   css: [
-    join(currentDir, './app/assets/main.css')
-  ]
+    join(currentDir, './app/assets/main.css'),
+  ],
 })
 ```
 
 ## Multi-Layer Support for Nuxt Modules
 
-You can use the internal array `nuxt.options._layers` to support custom multi-layer handling for your modules.
+You can use the [`getLayerDirectories`](/docs/4.x/api/kit/layers#getlayerdirectories) utility from Nuxt Kit to support custom multi-layer handling for your modules.
 
 ```ts [modules/my-module.ts]
+import { defineNuxtModule, getLayerDirectories } from 'nuxt/kit'
+
 export default defineNuxtModule({
-  setup(_options, nuxt) {
-    for (const layer of nuxt.options._layers) {
-      // You can check for a custom directory existence to extend for each layer
-      console.log('Custom extension for', layer.cwd, layer.config)
+  setup (_options, nuxt) {
+    const layerDirs = getLayerDirectories()
+
+    for (const [index, layer] of layerDirs.entries()) {
+      console.log(`Layer ${index}:`)
+      console.log(`  Root: ${layer.root}`)
+      console.log(`  App: ${layer.app}`)
+      console.log(`  Server: ${layer.server}`)
+      console.log(`  Pages: ${layer.appPages}`)
+      // ... other directories
     }
-  }
+  },
 })
 ```
 
 **Notes:**
-- Earlier items in the `_layers` array have higher priority and override later ones
-- The user's project is the first item in the `_layers` array
+- Earlier items in the array have higher priority and override later ones
+- The user's project is the first item in the array
 
 ## Going Deeper
 

package/2.guide/3.going-further/9.debugging.md

@@ -12,8 +12,8 @@ export default defineNuxtConfig({
   // or sourcemap: true
   sourcemap: {
     server: true,
-    client: true
-  }
+    client: true,
+  },
 })
 ```
 

package/2.guide/4.recipes/1.custom-routing.md

@@ -5,11 +5,11 @@ description: "In Nuxt, your routing is defined by the structure of your files in
 
 ## Adding custom routes
 
-In Nuxt, your routing is defined by the structure of your files inside the [app/pages directory](/docs/guide/directory-structure/app/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
+In Nuxt, your routing is defined by the structure of your files inside the [app/pages directory](/docs/4.x/guide/directory-structure/app/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
 
 ### Router Config
 
-Using [router options](/docs/guide/recipes/custom-routing#router-options), you can optionally override or extend your routes using a function that accepts the scanned routes and returns customized routes.
+Using [router options](/docs/4.x/guide/recipes/custom-routing#router-options), you can optionally override or extend your routes using a function that accepts the scanned routes and returns customized routes.
 
 If it returns `null` or `undefined`, Nuxt will fall back to the default routes (useful to modify input array).
 
@@ -18,18 +18,18 @@ import type { RouterConfig } from '@nuxt/schema'
 
 export default {
   // https://router.vuejs.org/api/interfaces/routeroptions.html#routes
-  routes: (_routes) => [
+  routes: _routes => [
     {
       name: 'home',
       path: '/',
-      component: () => import('~/pages/home.vue')
-    }
+      component: () => import('~/pages/home.vue'),
+    },
   ],
 } satisfies RouterConfig
 ```
 
 ::note
-Nuxt will not augment any new routes you return from the `routes` function with metadata defined in `definePageMeta` of the component you provide. If you want that to happen, you should use the `pages:extend` hook which is [called at build-time](/docs/api/advanced/hooks#nuxt-hooks-build-time).
+Nuxt will not augment any new routes you return from the `routes` function with metadata defined in `definePageMeta` of the component you provide. If you want that to happen, you should use the `pages:extend` hook which is [called at build-time](/docs/4.x/api/advanced/hooks#nuxt-hooks-build-time).
 ::
 
 ### Pages Hook
@@ -48,7 +48,7 @@ export default defineNuxtConfig({
       pages.push({
         name: 'profile',
         path: '/profile',
-        file: '~/extra-pages/profile.vue'
+        file: '~/extra-pages/profile.vue',
       })
 
       // remove routes
@@ -66,8 +66,8 @@ export default defineNuxtConfig({
         }
       }
       removePagesMatching(/\.ts$/, pages)
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -75,17 +75,17 @@ export default defineNuxtConfig({
 
 If you plan to add a whole set of pages related with a specific functionality, you might want to use a [Nuxt module](/modules).
 
-The [Nuxt kit](/docs/guide/going-further/kit) provides a few ways [to add routes](/docs/api/kit/pages):
-- [`extendPages`](/docs/api/kit/pages#extendpages) (callback: pages => void)
-- [`extendRouteRules`](/docs/api/kit/pages#extendrouterules) (route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)
+The [Nuxt kit](/docs/4.x/guide/going-further/kit) provides a few ways [to add routes](/docs/4.x/api/kit/pages):
+- [`extendPages`](/docs/4.x/api/kit/pages#extendpages) (callback: pages => void)
+- [`extendRouteRules`](/docs/4.x/api/kit/pages#extendrouterules) (route: string, rule: NitroRouteConfig, options: ExtendRouteRulesOptions)
 
 ## Router Options
 
-On top of customizing options for [`vue-router`](https://router.vuejs.org/api/interfaces/routeroptions.html), Nuxt offers [additional options](/docs/api/nuxt-config#router) to customize the router.
+On top of customizing options for [`vue-router`](https://router.vuejs.org/api/interfaces/routeroptions.html), Nuxt offers [additional options](/docs/4.x/api/nuxt-config#router) to customize the router.
 
 ### Using `router.options`
 
-This is the recommended way to specify [router options](/docs/api/nuxt-config#router).
+This is the recommended way to specify [router options](/docs/4.x/api/nuxt-config#router).
 
 ```ts [router.options.ts]
 import type { RouterConfig } from '@nuxt/schema'
@@ -110,16 +110,16 @@ export default defineNuxtConfig({
       // add a route
       files.push({
         path: resolver.resolve('./runtime/router-options'),
-        optional: true
+        optional: true,
       })
-    }
-  }
+    },
+  },
 })
 ```
 
 ### Using `nuxt.config`
 
-**Note:** Only JSON serializable [options](/docs/api/nuxt-config#router) are configurable:
+**Note:** Only JSON serializable [options](/docs/4.x/api/nuxt-config#router) are configurable:
 
 - `linkActiveClass`
 - `linkExactActiveClass`
@@ -129,40 +129,40 @@ export default defineNuxtConfig({
 - `hashMode`
 - `scrollBehaviorType`
 
-```js [nuxt.config]
+```ts [nuxt.config]
 export default defineNuxtConfig({
   router: {
-    options: {}
-  }
+    options: {},
+  },
 })
 ```
 
 ### Hash Mode (SPA)
 
-You can enable hash history in SPA mode using the `hashMode` [config](/docs/api/nuxt-config#router). In this mode, router uses a hash character (#) before the actual URL that is internally passed. When enabled, the **URL is never sent to the server** and **SSR is not supported**.
+You can enable hash history in SPA mode using the `hashMode` [config](/docs/4.x/api/nuxt-config#router). In this mode, router uses a hash character (#) before the actual URL that is internally passed. When enabled, the **URL is never sent to the server** and **SSR is not supported**.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   ssr: false,
   router: {
     options: {
-      hashMode: true
-    }
-  }
+      hashMode: true,
+    },
+  },
 })
 ```
 
 ### Scroll Behavior for hash links
 
-You can optionally customize the scroll behavior for hash links. When you set the [config](/docs/api/nuxt-config#router) to be `smooth` and you load a page with a hash link (e.g. `https://example.com/blog/my-article#comments`), you will see that the browser smoothly scrolls to this anchor.
+You can optionally customize the scroll behavior for hash links. When you set the [config](/docs/4.x/api/nuxt-config#router) to be `smooth` and you load a page with a hash link (e.g. `https://example.com/blog/my-article#comments`), you will see that the browser smoothly scrolls to this anchor.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   router: {
     options: {
-      scrollBehaviorType: 'smooth'
-    }
-  }
+      scrollBehaviorType: 'smooth',
+    },
+  },
 })
 ```
 
@@ -176,6 +176,6 @@ import { createMemoryHistory } from 'vue-router'
 
 export default {
   // https://router.vuejs.org/api/interfaces/routeroptions.html
-  history: base => import.meta.client ? createMemoryHistory(base) : null /* default */
+  history: base => import.meta.client ? createMemoryHistory(base) : null, /* default */
 } satisfies RouterConfig
 ```

package/2.guide/4.recipes/2.vite-plugin.md

@@ -28,7 +28,7 @@ First, we need to install the Vite plugin, for our example, we'll use `@rollup/p
 
 ::
 
-Next, we need to import and add it to our [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:
+Next, we need to import and add it to our [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) file:
 
 ```ts [nuxt.config.ts]
 import yaml from '@rollup/plugin-yaml'
@@ -36,9 +36,9 @@ import yaml from '@rollup/plugin-yaml'
 export default defineNuxtConfig({
   vite: {
     plugins: [
-      yaml()
-    ]
-  }
+      yaml(),
+    ],
+  },
 })
 ```
 
@@ -63,3 +63,44 @@ import config from '~/data/hello.yaml'
 ```
 
 ::
+
+## Using Vite Plugins in Nuxt Modules
+
+If you're developing a Nuxt module and need to add Vite plugins, you should use the [`addVitePlugin`](/docs/4.x/api/kit/builder#addviteplugin) utility:
+
+```ts [modules/my-module.ts]
+import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
+import yaml from '@rollup/plugin-yaml'
+
+export default defineNuxtModule({
+  setup () {
+    addVitePlugin(yaml())
+  },
+})
+```
+
+For environment-specific plugins in Nuxt 5+, use the `applyToEnvironment()` method:
+
+```ts [modules/my-module.ts]
+import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  setup () {
+    addVitePlugin(() => ({
+      name: 'my-client-plugin',
+      applyToEnvironment (environment) {
+        return environment.name === 'client'
+      },
+      // Plugin configuration
+    }))
+  },
+})
+```
+
+::important
+If you're writing code that needs to access resolved Vite configuration, you should use the `config` and `configResolved` hooks _within_ your Vite plugin, rather than using Nuxt's `vite:extend`, `vite:extendConfig` and `vite:configResolved`.
+::
+
+::read-more{to="/docs/4.x/api/kit/builder#addviteplugin"}
+Read more about `addVitePlugin` in the Nuxt Kit documentation.
+::

package/2.guide/4.recipes/3.custom-usefetch.md

@@ -6,13 +6,13 @@ description: How to create a custom fetcher for calling your external API in Nux
 
 When working with Nuxt, you might be making the frontend and fetching an external API, and you might want to set some default options for fetching from your API.
 
-The [`$fetch`](/docs/api/utils/dollarfetch) utility function (used by the [`useFetch`](/docs/api/composables/use-fetch) composable) is intentionally not globally configurable. This is important so that fetching behavior throughout your application remains consistent, and other integrations (like modules) can rely on the behavior of core utilities like `$fetch`.
+The [`$fetch`](/docs/4.x/api/utils/dollarfetch) utility function (used by the [`useFetch`](/docs/4.x/api/composables/use-fetch) composable) is intentionally not globally configurable. This is important so that fetching behavior throughout your application remains consistent, and other integrations (like modules) can rely on the behavior of core utilities like `$fetch`.
 
 However, Nuxt provides a way to create a custom fetcher for your API (or multiple fetchers if you have multiple APIs to call).
 
 ## Custom `$fetch`
 
-Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/guide/directory-structure/plugins).
+Let's create a custom `$fetch` instance with a [Nuxt plugin](/docs/4.x/guide/directory-structure/plugins).
 
 ::note
 `$fetch` is a configured instance of [ofetch](https://github.com/unjs/ofetch) which supports adding the base URL of your Nuxt server as well as direct function calls during SSR (avoiding HTTP roundtrips).
@@ -29,24 +29,24 @@ export default defineNuxtPlugin((nuxtApp) => {
 
   const api = $fetch.create({
     baseURL: 'https://api.nuxt.com',
-    onRequest({ request, options, error }) {
+    onRequest ({ request, options, error }) {
       if (session.value?.token) {
         // note that this relies on ofetch >= 1.4.0 - you may need to refresh your lockfile
         options.headers.set('Authorization', `Bearer ${session.value?.token}`)
       }
     },
-    async onResponseError({ response }) {
+    async onResponseError ({ response }) {
       if (response.status === 401) {
         await nuxtApp.runWithContext(() => navigateTo('/login'))
       }
-    }
+    },
   })
 
   // Expose to useNuxtApp().$api
   return {
     provide: {
-      api
-    }
+      api,
+    },
   }
 })
 ```
@@ -61,7 +61,7 @@ const { data: modules } = await useAsyncData('modules', () => $api('/modules'))
 ```
 
 ::callout
-Wrapping with [`useAsyncData`](/docs/api/composables/use-async-data) **avoid double data fetching when doing server-side rendering** (server & client on hydration).
+Wrapping with [`useAsyncData`](/docs/4.x/api/composables/use-async-data) **avoid double data fetching when doing server-side rendering** (server & client on hydration).
 ::
 
 ## Custom `useFetch`/`useAsyncData`
@@ -71,13 +71,13 @@ Now that `$api` has the logic we want, let's create a `useAPI` composable to rep
 ```ts [app/composables/useAPI.ts]
 import type { UseFetchOptions } from 'nuxt/app'
 
-export function useAPI<T>(
+export function useAPI<T> (
   url: string | (() => string),
   options?: UseFetchOptions<T>,
 ) {
   return useFetch(url, {
     ...options,
-    $fetch: useNuxtApp().$api as typeof $fetch
+    $fetch: useNuxtApp().$api as typeof $fetch,
   })
 }
 ```
@@ -101,13 +101,13 @@ interface CustomError {
   statusCode: number
 }
 
-export function useAPI<T>(
+export function useAPI<T> (
   url: string | (() => string),
   options?: UseFetchOptions<T>,
 ) {
   return useFetch<T, FetchError<CustomError>>(url, {
     ...options,
-    $fetch: useNuxtApp().$api
+    $fetch: useNuxtApp().$api,
   })
 }
 ```
@@ -116,7 +116,7 @@ export function useAPI<T>(
 This example demonstrates how to use a custom `useFetch`, but the same structure is identical for a custom `useAsyncData`.
 ::
 
-:link-example{to="/docs/examples/advanced/use-custom-fetch-composable"}
+:link-example{to="/docs/4.x/examples/advanced/use-custom-fetch-composable"}
 
 :video-accordion{title="Watch a video about custom $fetch and Repository Pattern in Nuxt" videoId="jXH8Tr-exhI"}