@nuxt/docs 4.1.2 → 4.2.0

package/3.api/index.md

@@ -7,25 +7,25 @@ surround: false
 ---
 
 ::card-group
-  ::card{icon="i-lucide-box" title="Components" to="/docs/api/components/client-only"}
+  ::card{icon="i-lucide-box" title="Components" to="/docs/4.x/api/components/client-only"}
   Explore Nuxt built-in components for pages, layouts, head, and more.
   ::
-  ::card{icon="i-lucide-arrow-left-right" title="Composables" to="/docs/api/composables/use-app-config"}
+  ::card{icon="i-lucide-arrow-left-right" title="Composables" to="/docs/4.x/api/composables/use-app-config"}
   Discover Nuxt composable functions for data-fetching, head management and more.
   ::
-  ::card{icon="i-lucide-square-function" title="Utils" to="/docs/api/utils/dollarfetch"}
+  ::card{icon="i-lucide-square-function" title="Utils" to="/docs/4.x/api/utils/dollarfetch"}
   Learn about Nuxt utility functions for navigation, error handling and more.
   ::
-  ::card{icon="i-lucide-square-terminal" title="Commands" to="/docs/api/commands/add"}
+  ::card{icon="i-lucide-square-terminal" title="Commands" to="/docs/4.x/api/commands/add"}
   List of Nuxt CLI commands to init, analyze, build, and preview your application.
   ::
-  ::card{icon="i-lucide-package" title="Nuxt Kit" to="/docs/api/kit/modules"}
+  ::card{icon="i-lucide-package" title="Nuxt Kit" to="/docs/4.x/api/kit/modules"}
   Understand Nuxt Kit utilities to create modules and control Nuxt.
   ::
-  ::card{icon="i-lucide-brain" title="Advanced" to="/docs/api/advanced/hooks"}
+  ::card{icon="i-lucide-brain" title="Advanced" to="/docs/4.x/api/advanced/hooks"}
   Go deep in Nuxt internals with Nuxt lifecycle hooks.
   ::
-  ::card{icon="i-lucide-cog" title="Nuxt Configuration" to="/docs/api/nuxt-config"}
+  ::card{icon="i-lucide-cog" title="Nuxt Configuration" to="/docs/4.x/api/nuxt-config"}
   Explore all Nuxt configuration options to customize your application.
   ::
 ::

package/5.community/2.getting-help.md

@@ -37,7 +37,7 @@ And finally, just ask the question! There's no need to [ask permission to ask a
 
 Something isn't working the way that the docs say that it should. You're not sure if it's a bug. You've searched through the [open issues](https://github.com/nuxt/nuxt/issues) and [discussions](https://github.com/nuxt/nuxt/discussions) but you can't find anything. (if there is a closed issue, please create a new one)
 
-We recommend taking a look at [how to report bugs](/docs/community/reporting-bugs). Nuxt is still in active development, and every issue helps make it better.
+We recommend taking a look at [how to report bugs](/docs/4.x/community/reporting-bugs). Nuxt is still in active development, and every issue helps make it better.
 
 ## "I need professional help"
 

package/5.community/3.reporting-bugs.md

@@ -12,7 +12,7 @@ Here are a few key steps.
 
 ## Is It Really a Bug?
 
-Consider if you're looking to get help with something, or whether you think there's a bug with Nuxt itself. If it's the former, we'd love to help you - but the best way to do that is through [asking for help](/docs/community/getting-help) rather than reporting a bug.
+Consider if you're looking to get help with something, or whether you think there's a bug with Nuxt itself. If it's the former, we'd love to help you - but the best way to do that is through [asking for help](/docs/4.x/community/getting-help) rather than reporting a bug.
 
 ## Search the Issues
 
@@ -31,8 +31,8 @@ If your issue concerns Vue or Vite, please try to reproduce it first with the Vu
 **Nuxt**:
 
 ::card-group
-  :card{title="Nuxt on StackBlitz" icon="i-simple-icons-stackblitz" to="https://nuxt.new/s/v3" target="_blank"}
-  :card{title="Nuxt on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://nuxt.new/c/v3" target="_blank"}
+  :card{title="Nuxt on StackBlitz" icon="i-simple-icons-stackblitz" to="https://nuxt.new/s/v4" target="_blank"}
+  :card{title="Nuxt on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://nuxt.new/c/v4" target="_blank"}
 ::
 
 **Vue**:

package/5.community/4.contribution.md

@@ -11,7 +11,7 @@ There is a range of different ways you might be able to contribute to the Nuxt e
 The Nuxt ecosystem includes many different projects and organizations:
 
 * [nuxt/](https://github.com/nuxt) - core repositories for the Nuxt framework itself. [**nuxt/nuxt**](https://github.com/nuxt/nuxt) contains the Nuxt framework (both versions 2 and 3).
-* [nuxt-modules/](https://github.com/nuxt-modules) - community-contributed and maintained modules and libraries. There is a [process to migrate a module](/docs/guide/going-further/modules/#joining-nuxt-modules-and-nuxtjs) to `nuxt-modules`. While these modules have individual maintainers, they are not dependent on a single person.
+* [nuxt-modules/](https://github.com/nuxt-modules) - community-contributed and maintained modules and libraries. There is a [process to migrate a module](/docs/4.x/guide/going-further/modules/#joining-nuxt-modules-and-nuxtjs) to `nuxt-modules`. While these modules have individual maintainers, they are not dependent on a single person.
 * [unjs/](https://github.com/unjs) - many of these libraries are used throughout the Nuxt ecosystem. They are designed to be universal libraries that are framework- and environment-agnostic. We welcome contributions and usage by other frameworks and projects.
 
 ## How To Contribute
@@ -24,7 +24,7 @@ Check out the issues and discussions for the project you want to help. For examp
 
 Thank you for taking the time to create an issue! ❤️
 
-* **Reporting bugs**: Check out [our guide](/docs/community/reporting-bugs) for some things to do before opening an issue.
+* **Reporting bugs**: Check out [our guide](/docs/4.x/community/reporting-bugs) for some things to do before opening an issue.
 
 * **Feature requests**: Check that there is not an existing issue or discussion covering the scope of the feature you have in mind. If the feature is to another part of the Nuxt ecosystem (such as a module), please consider raising a feature request there first. If the feature you have in mind is general or the API is not entirely clear, consider opening a discussion in the **Ideas** section to discuss with the community first.
 
@@ -42,7 +42,7 @@ If you're working on a feature, then we ask that you **open a feature request is
 
 For typo fixes, it's recommended to batch multiple typo fixes into one pull request to maintain a cleaner commit history.
 
-For bigger changes to Nuxt itself, we recommend that you first [create a Nuxt module](#create-a-module) and implement the feature there. This allows for quick proof-of-concept. You can then [create an RFC](#make-an-rfc) in the form of a discussion. As users adopt it and you gather feedback, it can then be refined and either added to Nuxt core or continue as a standalone module.
+For bigger changes to Nuxt itself, we recommend that you first [create a Nuxt module](/docs/4.x/community/contribution#create-a-module) and implement the feature there. This allows for quick proof-of-concept. You can then [create an RFC](/docs/4.x/community/contribution#make-an-rfc) in the form of a discussion. As users adopt it and you gather feedback, it can then be refined and either added to Nuxt core or continue as a standalone module.
 
 #### Commit Conventions
 
@@ -58,7 +58,7 @@ If you are working in a project with a monorepo, like `nuxt/nuxt`, ensure that y
 
 If you don't know how to send a pull request, we recommend reading [the guide](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request).
 
-When sending a pull request, make sure your PR's title also follows the [Commit Convention](#commit-conventions).
+When sending a pull request, make sure your PR's title also follows the [Commit Convention](/docs/4.x/community/contribution#commit-conventions).
 
 If your PR fixes or resolves existing issues, please make sure you mention them in the PR description.
 
@@ -100,13 +100,13 @@ Our aim is ensuring quality and maintaining the joy of collaborating and communi
 
 ### Create a Module
 
-If you've built something with Nuxt that's cool, why not [extract it into a module](/docs/guide/going-further/modules), so it can be shared with others? We have [many excellent modules already](/modules), but there's always room for more.
+If you've built something with Nuxt that's cool, why not [extract it into a module](/docs/4.x/guide/going-further/modules), so it can be shared with others? We have [many excellent modules already](/modules), but there's always room for more.
 
-If you need help while building it, feel free to [check in with us](/docs/community/getting-help).
+If you need help while building it, feel free to [check in with us](/docs/4.x/community/getting-help).
 
 ### Make an RFC
 
-We highly recommend [creating a module](#create-a-module) first to test out big new features and gain community adoption.
+We highly recommend [creating a module](/docs/4.x/community/contribution#create-a-module) first to test out big new features and gain community adoption.
 
 If you have done this already, or it's not appropriate to create a new module, then please start by creating a new discussion. Make sure it explains your thinking as clearly as possible. Include code examples or function signatures for new APIs. Reference existing issues or pain points with examples.
 
@@ -126,7 +126,7 @@ The following conventions are _required_ within the `nuxt/` organization and rec
 
 #### Module Conventions
 
-Modules should follow the [Nuxt module template](https://github.com/nuxt/starter/tree/module). See [module guide](/docs/guide/going-further/modules) for more information.
+Modules should follow the [Nuxt module template](https://github.com/nuxt/starter/tree/module). See [module guide](/docs/4.x/guide/going-further/modules) for more information.
 
 #### Use Core `unjs/` Libraries
 
@@ -139,7 +139,7 @@ We recommend the following libraries which are used throughout the ecosystem:
 
 #### Use ESM Syntax and Default to `type: module`
 
-Most of the Nuxt ecosystem can consume ESM directly. In general we advocate that you avoid using CJS-specific code, such as `__dirname` and `require` statements. You can [read more about ESM](/docs/guide/concepts/esm).
+Most of the Nuxt ecosystem can consume ESM directly. In general we advocate that you avoid using CJS-specific code, such as `__dirname` and `require` statements. You can [read more about ESM](/docs/4.x/guide/concepts/esm).
 
 #### What's Corepack
 
@@ -172,7 +172,7 @@ We recommend using [VS Code](https://code.visualstudio.com) along with the [ESLi
 
 #### No Prettier
 
-Since ESLint is already configured to format the code, there is no need to duplicate the functionality with Prettier. To format the code, you can run `yarn lint --fix`, `pnpm lint --fix`, or `bun run lint --fix` or referring the [ESLint section](#use-eslint) for IDE Setup.
+Since ESLint is already configured to format the code, there is no need to duplicate the functionality with Prettier. To format the code, you can run `yarn lint --fix`, `pnpm lint --fix`, or `bun run lint --fix` or referring the [ESLint section](/docs/4.x/community/contribution#use-eslint) for IDE Setup.
 
 If you have Prettier installed in your editor, we recommend you disable it when working on the project to avoid conflict.
 
@@ -218,6 +218,6 @@ Here are some tips that may help improve your documentation:
   Nuxt will throw an error.
   ::
 
-::read-more{to="/docs/community/framework-contribution#documentation-guide"}
+::read-more{to="/docs/4.x/community/framework-contribution#documentation-guide"}
 Learn how to contribute to the documentation.
 ::

package/5.community/5.framework-contribution.md

@@ -4,7 +4,7 @@ navigation.icon: i-lucide-github
 description: Some specific points about contributions to the framework repository.
 ---
 
-Once you've read the [general contribution guide](/docs/community/contribution), here are some specific points to make about contributions to the [`nuxt/nuxt`](https://github.com/nuxt/nuxt) repository.
+Once you've read the [general contribution guide](/docs/4.x/community/contribution), here are some specific points to make about contributions to the [`nuxt/nuxt`](https://github.com/nuxt/nuxt) repository.
 
 ## Monorepo Guide
 
@@ -42,7 +42,7 @@ To contribute to Nuxt, you need to set up a local environment.
     git checkout -b my-new-branch
     ```
 
-Then, test your changes against the [playground](#playground) and [test](#testing) your changes before submitting a pull request.
+Then, test your changes against the [playground](/docs/4.x/community/framework-contribution#playground) and [test](/docs/4.x/community/framework-contribution#testing) your changes before submitting a pull request.
 
 ### Playground
 
@@ -88,7 +88,7 @@ If there are still errors left, you must correct them manually.
 If you are adding a new feature or refactoring or changing the behavior of Nuxt in any other manner, you'll likely want to document the changes. Please include any changes to the docs in the same PR. You don't have to write documentation up on the first commit (but please do so as soon as your pull request is mature enough).
 
 ::important
-Make sure to make changes according to the [Documentation Style Guide](/docs/community/contribution#documentation-style-guide).
+Make sure to make changes according to the [Documentation Style Guide](/docs/4.x/community/contribution#documentation-style-guide).
 ::
 
 ### Final Checklist
@@ -100,7 +100,7 @@ When submitting your PR, there is a simple template that you have to fill out. P
 If you spot an area where we can improve documentation or error messages, please do open a PR - even if it's just to fix a typo!
 
 ::important
-Make sure to make changes according to the [Documentation Style Guide](/docs/community/contribution#documentation-style-guide).
+Make sure to make changes according to the [Documentation Style Guide](/docs/4.x/community/contribution#documentation-style-guide).
 ::
 
 ### Quick Edits

package/5.community/6.roadmap.md

@@ -32,7 +32,7 @@ Milestone    | Expected date | Notes
 -------------|---------------|------------------------------------------------------------------------|-----------------------
 SEO & PWA    | 2025          | [nuxt/nuxt#18395](https://github.com/nuxt/nuxt/discussions/18395)      | Migrating from [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for built-in SEO utils and service worker support
 Assets       | 2025          | [nuxt/nuxt#22012](https://github.com/nuxt/nuxt/discussions/22012)      | Allow developers and modules to handle loading third-party assets.
-Translations | -             | [nuxt/translations#4](https://github.com/nuxt/translations/discussions/4) ([request access](https://github.com/nuxt/nuxt/discussions/16054)) | A collaborative project for a stable translation process for Nuxt docs. Currently pending for ideas and documentation tooling support (content v2 with remote sources).
+Translations | -             | [nuxt/nuxt.com#1711](https://github.com/nuxt/nuxt.com/issues/1711)     | A collaborative project for a stable translation process for Nuxt docs. Currently pending for ideas and documentation tooling support.
 
 ## Core Modules Roadmap
 
@@ -63,7 +63,7 @@ The current active version of [Nuxt](https://nuxt.com) is **v4** which is availa
 
 Nuxt 3 will continue to receive maintenance updates (both bug fixes and backports of features from Nuxt 4) until the end of January 2026.
 
-Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt nightly release channel, see [the nightly release channel docs](/docs/guide/going-further/nightly-release-channel).
+Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt nightly release channel, see [the nightly release channel docs](/docs/4.x/guide/going-further/nightly-release-channel).
 
 Release                    |                                                                                                                                                                               | Initial release       | End Of Life                  | Docs
 -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ---------------------------- | ---------------------------------------

package/6.bridge/1.overview.md

@@ -4,11 +4,11 @@ description: Reduce the differences with Nuxt 3 and reduce the burden of migrati
 ---
 
 ::note
-If you're starting a fresh Nuxt 3 project, please skip this section and go to [Nuxt 3 Installation](/docs/getting-started/introduction).
+If you're starting a fresh Nuxt 3 project, please skip this section and go to [Nuxt 3 Installation](/docs/4.x/getting-started/introduction).
 ::
 
 ::warning
-Nuxt Bridge provides identical features to Nuxt 3 ([docs](/docs/guide/concepts/auto-imports)) but there are some limitations, notably that [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) composables are not available. Please read the rest of this page for details.
+Nuxt Bridge provides identical features to Nuxt 3 ([docs](/docs/4.x/guide/concepts/auto-imports)) but there are some limitations, notably that [`useAsyncData`](/docs/4.x/api/composables/use-async-data) and [`useFetch`](/docs/4.x/api/composables/use-fetch) composables are not available. Please read the rest of this page for details.
 ::
 
 Bridge is a forward-compatibility layer that allows you to experience many of the new Nuxt 3 features by simply installing and enabling a Nuxt module.
@@ -80,13 +80,13 @@ bun add -D @nuxt/bridge nuxi
 
 Please make sure to avoid any CommonJS syntax such as `module.exports`, `require` or `require.resolve` in your config file. It will soon be deprecated and unsupported.
 
-You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) is also possible and recommended.
+You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to [`nuxt.config.ts`](/docs/4.x/guide/directory-structure/nuxt-config) is also possible and recommended.
 
 ```ts [nuxt.config.ts]
 import { defineNuxtConfig } from '@nuxt/bridge'
 
 export default defineNuxtConfig({
-  bridge: false
+  bridge: false,
 })
 ```
 
@@ -116,22 +116,22 @@ Try running `nuxt2` once here. You will see that the application works as before
 With Nuxt Bridge, the migration to Nuxt 3 can proceed in steps.
 The below `Upgrade Steps` does not need to be done all at once.
 
-- [TypeScript](/docs/bridge/typescript)
+- [TypeScript](/docs/4.x/bridge/typescript)
 
-- [Migrate Legacy Composition API](/docs/bridge/bridge-composition-api)
+- [Migrate Legacy Composition API](/docs/4.x/bridge/bridge-composition-api)
 
-- [Plugins and Middleware](/docs/bridge/plugins-and-middleware)
+- [Plugins and Middleware](/docs/4.x/bridge/plugins-and-middleware)
 
-- [Migrate New Composition API](/docs/bridge/nuxt3-compatible-api)
+- [Migrate New Composition API](/docs/4.x/bridge/nuxt3-compatible-api)
 
-- [Meta Tags](/docs/bridge/meta)
+- [Meta Tags](/docs/4.x/bridge/meta)
 
-- [Runtime Config](/docs/bridge/runtime-config)
+- [Runtime Config](/docs/4.x/bridge/runtime-config)
 
-- [Nitro](/docs/bridge/nitro)
+- [Nitro](/docs/4.x/bridge/nitro)
 
-- [Vite](/docs/bridge/vite)
+- [Vite](/docs/4.x/bridge/vite)
 
 ## Migrate from CommonJS to ESM
 
-Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native ES Modules](/docs/guide/concepts/esm) for more info and upgrading.
+Nuxt 3 natively supports TypeScript and ECMAScript Modules. Please check [Native ES Modules](/docs/4.x/guide/concepts/esm) for more info and upgrading.

package/6.bridge/10.configuration.md

@@ -11,6 +11,7 @@ You can check [bridge/src/module.ts](https://github.com/nuxt/bridge/blob/main/pa
 
 ```ts [nuxt.config.ts]
 import { defineNuxtConfig } from '@nuxt/bridge'
+
 export default defineNuxtConfig({
   bridge: {
 
@@ -63,7 +64,7 @@ export default defineNuxtConfig({
 
   vite: {
     // Config for Vite
-  }
+  },
 })
 ```
 

package/6.bridge/2.typescript.md

@@ -16,8 +16,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     typescript: true,
-    nitro: false // If migration to Nitro is complete, set to true
-  }
+    nitro: false, // If migration to Nitro is complete, set to true
+  },
 })
 ```
 
@@ -37,7 +37,7 @@ If you are using TypeScript, you can edit your `tsconfig.json` to benefit from a
 ::note
 As `.nuxt/tsconfig.json` is generated and not checked into version control, you'll need to generate that file before running your tests. Add `nuxi prepare` as a step before your tests, otherwise you'll see `TS5083: Cannot read file '~/.nuxt/tsconfig.json'`
 
-For modern Nuxt projects, we recommend using [TypeScript project references](/docs/guide/directory-structure/tsconfig) instead of directly extending `.nuxt/tsconfig.json`.
+For modern Nuxt projects, we recommend using [TypeScript project references](/docs/4.x/guide/directory-structure/tsconfig) instead of directly extending `.nuxt/tsconfig.json`.
 ::
 
 ::note

package/6.bridge/3.bridge-composition-api.md

@@ -35,9 +35,9 @@ Because some composables have been removed and don't yet have a replacement, thi
 
 You don't have to immediately update your imports yet - Nuxt Bridge will automatically provide a 'shim' for most imports you currently have, to give you time to migrate to the new, Nuxt 3-compatible composables, with the following exceptions:
 
-- `withContext` has been removed. See [below](/docs/bridge/nuxt3-compatible-api#usecontext-and-withcontext).
+- `withContext` has been removed. See [below](/docs/4.x/bridge/nuxt3-compatible-api#usecontext-and-withcontext).
 - `useStatic` has been removed. There is no current replacement. Feel free to raise a discussion if you have a use case for this.
-- `reqRef` and `reqSsrRef`, which were deprecated, have now been removed entirely. Follow the instructions below regarding [ssrRef](/docs/bridge/nuxt3-compatible-api#ssrref-and-shallowssrref) to replace this.
+- `reqRef` and `reqSsrRef`, which were deprecated, have now been removed entirely. Follow the instructions below regarding [ssrRef](/docs/4.x/bridge/nuxt3-compatible-api#ssrref-and-shallowssrref) to replace this.
 
 ### Set `bridge.capi`
 
@@ -47,8 +47,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     capi: true,
-    nitro: false // If migration to Nitro is complete, set to true
-  }
+    nitro: false, // If migration to Nitro is complete, set to true
+  },
 })
 ```
 
@@ -91,7 +91,7 @@ export default <Middleware> function (ctx) { }
 
 This was a type-helper stub function that is now removed.
 
-You may also keep using Nuxt 2-style plugins, by removing the function (as with [defineNuxtMiddleware](#definenuxtmiddleware)).
+You may also keep using Nuxt 2-style plugins, by removing the function (as with [defineNuxtMiddleware](/docs/4.x/bridge/bridge-composition-api#definenuxtmiddleware)).
 
 Remove the `defineNuxtPlugin` wrapper:
 
@@ -113,13 +113,13 @@ export default <Plugin> function (ctx, inject) {}
 While this example is valid, Nuxt 3 introduces a new defineNuxtPlugin function that has a slightly different signature.
 ::
 
-:ReadMore{link="/docs/guide/directory-structure/app/plugins#creating-plugins"}
+:ReadMore{link="/docs/4.x/guide/directory-structure/app/plugins#creating-plugins"}
 
 ### `useRouter` and `useRoute`
 
-Nuxt Bridge provides direct replacements for these composables via [`useRouter`](/docs/api/composables/use-router)  and `useRoute`.
+Nuxt Bridge provides direct replacements for these composables via [`useRouter`](/docs/4.x/api/composables/use-router)  and `useRoute`.
 
-The only key difference is that [`useRoute`](/docs/api/composables/use-route) no longer returns a computed property.
+The only key difference is that [`useRoute`](/docs/4.x/api/composables/use-route) no longer returns a computed property.
 
 ```diff
 - import { useRouter, useRoute } from '@nuxtjs/composition-api'

package/6.bridge/4.plugins-and-middleware.md

@@ -7,17 +7,17 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt Bridge new plugins and mi
 
 You can now migrate to the Nuxt 3 plugins API, which is slightly different in format from Nuxt 2.
 
-Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/guide/directory-structure/plugins).
+Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/4.x/guide/directory-structure/plugins).
 
-```js [app/plugins/hello.ts]
-export default defineNuxtPlugin(nuxtApp => {
+```ts [app/plugins/hello.ts]
+export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.provide('injected', () => 'my injected function')
   // now available on `nuxtApp.$injected`
 })
 ```
 
 ::note
-If you want to use the new Nuxt composables (such as [`useNuxtApp`](/docs/api/composables/use-nuxt-app) or `useRuntimeConfig`) within your plugins, you will need to use the `defineNuxtPlugin` helper for those plugins.
+If you want to use the new Nuxt composables (such as [`useNuxtApp`](/docs/4.x/api/composables/use-nuxt-app) or `useRuntimeConfig`) within your plugins, you will need to use the `defineNuxtPlugin` helper for those plugins.
 ::
 
 ::warning
@@ -28,7 +28,7 @@ Although a compatibility interface is provided via `nuxtApp.vueApp` you should a
 
 You can now migrate to the Nuxt 3 middleware API, which is slightly different in format from Nuxt 2.
 
-Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/guide/directory-structure/app/middleware).
+Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/4.x/guide/directory-structure/app/middleware).
 
 ```ts twoslash
 export default defineNuxtRouteMiddleware((to) => {
@@ -44,7 +44,7 @@ Use of `defineNuxtRouteMiddleware` is not supported outside of the `app/middlewa
 
 ## definePageMeta
 
-You can also use [`definePageMeta`](/docs/api/utils/define-page-meta) in Nuxt Bridge.
+You can also use [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) in Nuxt Bridge.
 
 You can be enabled with the `macros.pageMeta` option in your configuration file
 
@@ -54,9 +54,9 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     macros: {
-      pageMeta: true
-    }
-  }
+      pageMeta: true,
+    },
+  },
 })
 ```
 

package/6.bridge/5.nuxt3-compatible-api.md

@@ -9,7 +9,7 @@ By migrating from `@nuxtjs/composition-api` to the Nuxt 3 compatible API, there
 
 These two functions have been replaced with a new composable that works very similarly under the hood: `useState`.
 
-The key differences are that you must provide a _key_ for this state (which Nuxt generated automatically for `ssrRef` and `shallowSsrRef`), and that it can only be called within a Nuxt 3 plugin (which is defined by `defineNuxtPlugin`) or a component instance. (In other words, you cannot use [`useState`](/docs/api/composables/use-state) with a global/ambient context, because of the danger of shared state across requests.)
+The key differences are that you must provide a _key_ for this state (which Nuxt generated automatically for `ssrRef` and `shallowSsrRef`), and that it can only be called within a Nuxt 3 plugin (which is defined by `defineNuxtPlugin`) or a component instance. (In other words, you cannot use [`useState`](/docs/4.x/api/composables/use-state) with a global/ambient context, because of the danger of shared state across requests.)
 
 ```diff
 - import { ssrRef } from '@nuxtjs/composition-api'
@@ -24,7 +24,7 @@ The key differences are that you must provide a _key_ for this state (which Nuxt
 
 Because the state is keyed, you can access the same state from multiple locations, as long as you are using the same key.
 
-You can read more about how to use this composable in [the Nuxt 3 docs](/docs/api/composables/use-state).
+You can read more about how to use this composable in [the Nuxt 3 docs](/docs/4.x/api/composables/use-state).
 
 ## `ssrPromise`
 
@@ -32,7 +32,7 @@ This function has been removed, and you will need to find an alternative impleme
 
 ## `onGlobalSetup`
 
-This function has been removed, but its use cases can be met by using [`useNuxtApp`](/docs/api/composables/use-nuxt-app) or [`useState`](/docs/api/composables/use-state) within `defineNuxtPlugin`. You can also run any custom code within the `setup()` function of a layout.
+This function has been removed, but its use cases can be met by using [`useNuxtApp`](/docs/4.x/api/composables/use-nuxt-app) or [`useState`](/docs/4.x/api/composables/use-state) within `defineNuxtPlugin`. You can also run any custom code within the `setup()` function of a layout.
 
 ```diff
 - import { onGlobalSetup } from '@nuxtjs/composition-api'
@@ -73,8 +73,10 @@ You can access injected helpers using `useNuxtApp`.
 
 This helper function is not provided any more but you can replace it with the following code:
 
-```js
-const wrapProperty = (property, makeComputed = true) => () => {
+```ts
+import { computed, getCurrentInstance } from 'vue'
+
+const wrapProperty = (property: string, makeComputed = true) => () => {
   const vm = getCurrentInstance().proxy
   return makeComputed ? computed(() => vm[property]) : vm[property]
 }
@@ -82,14 +84,14 @@ const wrapProperty = (property, makeComputed = true) => () => {
 
 ## `useAsync` and `useFetch`
 
-These two composables can be replaced with `useLazyAsyncData` and `useLazyFetch`, which are documented [in the Nuxt 3 docs](/docs/getting-started/data-fetching). Just like the previous `@nuxtjs/composition-api` composables, these composables do not block route navigation on the client-side (hence the 'lazy' part of the name).
+These two composables can be replaced with `useLazyAsyncData` and `useLazyFetch`, which are documented [in the Nuxt 3 docs](/docs/4.x/getting-started/data-fetching). Just like the previous `@nuxtjs/composition-api` composables, these composables do not block route navigation on the client-side (hence the 'lazy' part of the name).
 
 ::important
 Note that the API is entirely different, despite similar sounding names. Importantly, you should not attempt to change the value of other variables outside the composable (as you may have been doing with the previous `useFetch`).
 ::
 
 ::warning
-The `useLazyFetch` must have been configured for [Nitro](/docs/bridge/nitro).
+The `useLazyFetch` must have been configured for [Nitro](/docs/4.x/bridge/nitro).
 ::
 
 Migrating to the new composables from `useAsync`:
@@ -136,7 +138,7 @@ In order to interact with `vue-meta`, you may use `useNuxt2Meta`, which will wor
 
 You can also pass in computed values or refs, and the meta values will be updated reactively:
 
-```ts
+```vue
 <script setup>
 const title = ref('my title')
 useNuxt2Meta({
@@ -150,7 +152,7 @@ title.value = 'new title'
 Be careful not to use both `useNuxt2Meta()` and the Options API `head()` within the same component, as behavior may be unpredictable.
 ::
 
-Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the [`useHead`](/docs/api/composables/use-head) composable.
+Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the [`useHead`](/docs/4.x/api/composables/use-head) composable.
 
 ```diff
 <script setup>
@@ -165,16 +167,17 @@ You will also need to enable it explicitly in your `nuxt.config`:
 
 ```js
 import { defineNuxtConfig } from '@nuxt/bridge'
+
 export default defineNuxtConfig({
   bridge: {
-    meta: true
-  }
+    meta: true,
+  },
 })
 ```
 
-This [`useHead`](/docs/api/composables/use-head) composable uses `@unhead/vue` under the hood (rather than `vue-meta`) to manipulate your `<head>`. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as [`useHead`](/docs/api/composables/use-head) , as they may conflict.
+This [`useHead`](/docs/4.x/api/composables/use-head) composable uses `@unhead/vue` under the hood (rather than `vue-meta`) to manipulate your `<head>`. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as [`useHead`](/docs/4.x/api/composables/use-head) , as they may conflict.
 
-For more information on how to use this composable, see [the Nuxt 3 docs](/docs/getting-started/seo-meta).
+For more information on how to use this composable, see [the Nuxt 3 docs](/docs/4.x/getting-started/seo-meta).
 
 ### Explicit Imports
 
@@ -182,7 +185,7 @@ Nuxt exposes every auto-import with the `#imports` alias that can be used to mak
 
 ```vue
 <script setup lang="ts">
-import { ref, computed } from '#imports'
+import { computed, ref } from '#imports'
 
 const count = ref(1)
 const double = computed(() => count.value * 2)
@@ -196,9 +199,9 @@ If you want to disable auto-importing composables and utilities, you can set `im
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   imports: {
-    autoImport: false
-  }
+    autoImport: false,
+  },
 })
 ```
 
-This will disable auto-imports completely but it's still possible to use [explicit imports](#explicit-imports) from `#imports`.
+This will disable auto-imports completely but it's still possible to use [explicit imports](/docs/4.x/bridge/nuxt3-compatible-api#explicit-imports) from `#imports`.

package/6.bridge/6.meta.md

@@ -3,7 +3,7 @@ title: Meta Tags
 description: 'Learn how to migrate from Nuxt 2 to Nuxt Bridge new meta tags.'
 ---
 
-If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/api/composables/use-head) .
+If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/4.x/api/composables/use-head) .
 
 If you need to use the Options API, there is a `head()` method you can use when you use `defineNuxtComponent`.
 
@@ -13,11 +13,12 @@ If you need to use the Options API, there is a `head()` method you can use when
 
 ```js
 import { defineNuxtConfig } from '@nuxt/bridge'
+
 export default defineNuxtConfig({
   bridge: {
     meta: true,
-    nitro: false // If migration to Nitro is complete, set to true
-  }
+    nitro: false, // If migration to Nitro is complete, set to true
+  },
 })
 ```
 
@@ -34,9 +35,9 @@ export default {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'Meta description' }
-    ]
-  }
+      { hid: 'description', name: 'description', content: 'Meta description' },
+    ],
+  },
 }
 ```
 
@@ -48,10 +49,10 @@ export default defineNuxtConfig({
       meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-        { name: 'description', content: 'Meta description' }
-      ]
-    }
-  }
+        { name: 'description', content: 'Meta description' },
+      ],
+    },
+  },
 })
 ```
 
@@ -59,7 +60,7 @@ export default defineNuxtConfig({
 
 ## `useHead` Composables
 
-Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new [`useHead`](/docs/api/composables/use-head) composable.
+Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new [`useHead`](/docs/4.x/api/composables/use-head) composable.
 
 ```vue
 <script setup lang="ts">
@@ -70,14 +71,14 @@ useHead({
 ```
 
 ::tip
-This [`useHead`](/docs/api/composables/use-head) composable uses `@unhead/vue` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
+This [`useHead`](/docs/4.x/api/composables/use-head) composable uses `@unhead/vue` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
 ::
 
 ::warning
-We recommend not using the native Nuxt 2 `head()` properties in addition to [`useHead`](/docs/api/composables/use-head) , as they may conflict.
+We recommend not using the native Nuxt 2 `head()` properties in addition to [`useHead`](/docs/4.x/api/composables/use-head) , as they may conflict.
 ::
 
-For more information on how to use this composable, see [the docs](/docs/getting-started/seo-meta).
+For more information on how to use this composable, see [the docs](/docs/4.x/getting-started/seo-meta).
 
 ## Options API
 
@@ -90,10 +91,10 @@ export default defineNuxtComponent({
     return {
       meta: [{
         name: 'description',
-        content: 'This is my page description.'
-      }]
+        content: 'This is my page description.',
+      }],
     }
-  }
+  },
 })
 </script>
 ```
@@ -110,8 +111,8 @@ If you want to use a function (for full control), then this cannot be set in you
 <script setup lang="ts">
 useHead({
   titleTemplate: (titleChunk) => {
-    return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
-  }
+    return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'
+  },
 })
 </script>
 ```