@nuxt/docs 3.19.2 → 3.19.3

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/3.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/3.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/3.x/api/composables/use-nuxt-app) or [`useState`](/docs/3.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/3.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/3.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/3.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/3.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/3.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/3.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,8 +199,8 @@ 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,
+  },
 })
 ```
 

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/3.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/3.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/3.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/3.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/3.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>
 ```

package/6.bridge/7.runtime-config.md

@@ -4,7 +4,7 @@ description: 'Nuxt provides a runtime config API to expose configuration and sec
 ---
 
 ::warning
-When using `runtimeConfig` option, [nitro](/docs/bridge/nitro) must have been configured.
+When using `runtimeConfig` option, [nitro](/docs/3.x/bridge/nitro) must have been configured.
 ::
 
 ## Update Runtime Config

package/6.bridge/8.nitro.md

@@ -14,8 +14,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 
 export default defineNuxtConfig({
   bridge: {
-    nitro: true
-  }
+    nitro: true,
+  },
 })
 ```
 
@@ -49,7 +49,7 @@ bun add -D nuxi
 
 ### Nuxi
 
-Nuxt 3 introduced the new Nuxt CLI command [`nuxi`](/docs/api/commands/add). Update your scripts as follows to leverage the better support from Nuxt Bridge:
+Nuxt 3 introduced the new Nuxt CLI command [`nuxi`](/docs/3.x/api/commands/add). Update your scripts as follows to leverage the better support from Nuxt Bridge:
 
 ```diff
 {

package/6.bridge/9.vite.md

@@ -4,7 +4,7 @@ description: 'Activate Vite to your Nuxt 2 application with Nuxt Bridge.'
 ---
 
 ::warning
-When using `vite`, [nitro](/docs/bridge/nitro) must have been configured.
+When using `vite`, [nitro](/docs/3.x/bridge/nitro) must have been configured.
 ::
 
 ## Remove Modules
@@ -19,8 +19,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     vite: true,
-    nitro: true
-  }
+    nitro: true,
+  },
 })
 ```
 
@@ -32,6 +32,6 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   vite: {
     // Config for Vite
-  }
+  },
 })
 ```

package/7.migration/1.overview.md

@@ -16,9 +16,9 @@ Some of these significant changes include:
 1. Moving from a runtime Nuxt dependency to a minimal, standalone server compiled with nitropack.
 
 ::tip
-If you need to remain on Nuxt 2, but want to benefit from Nuxt 3 features in Nuxt 2, you can alternatively check out [how to get started with Bridge](/docs/bridge/overview).
+If you need to remain on Nuxt 2, but want to benefit from Nuxt 3 features in Nuxt 2, you can alternatively check out [how to get started with Bridge](/docs/3.x/bridge/overview).
 ::
 
 ## Next Steps
 
-- Learn about differences in [configuration](/docs/migration/configuration)
+- Learn about differences in [configuration](/docs/3.x/migration/configuration)

package/7.migration/2.configuration.md

@@ -40,8 +40,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
      router: {
        extendRoutes (routes) {
          //
-       }
-     }
+       },
+     },
    }
    ```
 
@@ -50,8 +50,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
      hooks: {
        'pages:extend' (routes) {
          //
-       }
-     }
+       },
+     },
    })
    ```
 
@@ -64,8 +64,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
    ```ts [Nuxt 2]
    export default {
      router: {
-       routeNameSplitter: '/'
-     }
+       routeNameSplitter: '/',
+     },
    }
    ```
 
@@ -78,8 +78,10 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
          const routeNameSplitter = '/'
          const root = createResolver(import.meta.url).resolve('./pages')
 
-         function updateName(routes) {
-           if (!routes) return
+         function updateName (routes) {
+           if (!routes) {
+             return
+           }
 
            for (const route of routes) {
              const relativePath = route.file.substring(root.length + 1)
@@ -98,7 +100,7 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
 
 #### ESM Syntax
 
-Nuxt 3 is an [ESM native framework](/docs/guide/concepts/esm). Although [`unjs/jiti`](https://github.com/unjs/jiti) provides semi compatibility when loading `nuxt.config` file, avoid any usage of `require` and `module.exports` in this file.
+Nuxt 3 is an [ESM native framework](/docs/3.x/guide/concepts/esm). Although [`unjs/jiti`](https://github.com/unjs/jiti) provides semi compatibility when loading `nuxt.config` file, avoid any usage of `require` and `module.exports` in this file.
 
 1. Change `module.exports` to `export default`
 1. Change `const lib = require('lib')` to `import lib from 'lib'`
@@ -131,7 +133,7 @@ Nuxt and Nuxt Modules are now build-time-only.
 ```
 
 ::tip
-If you are a module author, you can check out [more information about module compatibility](/docs/migration/module-authors) and [our module author guide](/docs/guide/going-further/modules).
+If you are a module author, you can check out [more information about module compatibility](/docs/3.x/migration/module-authors) and [our module author guide](/docs/3.x/guide/going-further/modules).
 ::
 
 ## Directory Changes
@@ -144,7 +146,7 @@ The `static/` (for storing static assets) has been renamed to `public/`. You can
 
 It will be much easier to migrate your application if you use Nuxt's TypeScript integration. This does not mean you need to write your application in TypeScript, just that Nuxt will provide automatic type hints for your editor.
 
-You can read more about Nuxt's TypeScript support [in the docs](/docs/guide/concepts/typescript).
+You can read more about Nuxt's TypeScript support [in the docs](/docs/3.x/guide/concepts/typescript).
 
 ::note
 Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc) with `nuxt typecheck` command.
@@ -161,7 +163,7 @@ Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language
    ```
 
 1. Run `npx nuxt prepare` to generate `.nuxt/tsconfig.json`.
-1. Install Volar following the instructions in the [docs](/docs/getting-started/introduction#prerequisites).
+1. Install Volar following the instructions in the [docs](/docs/3.x/getting-started/introduction#prerequisites).
 
 ## Vue Changes
 
@@ -186,10 +188,10 @@ yarn add pinia @pinia/nuxt
 Enable the module in your nuxt configuration:
 
 ```ts [nuxt.config.ts]
-import { defineNuxtConfig } from 'nuxt/config';
+import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
-  modules: ['@pinia/nuxt']
+  modules: ['@pinia/nuxt'],
 })
 ```
 
@@ -203,7 +205,7 @@ export const useMainStore = defineStore('main', {
     counter: 0,
   }),
   actions: {
-    increment() {
+    increment () {
       // `this` is the store instance
       this.counter++
     },
@@ -211,7 +213,7 @@ export const useMainStore = defineStore('main', {
 })
 ```
 
-Create a [plugin](/docs/guide/directory-structure/plugins) file to globalize your store:
+Create a [plugin](/docs/3.x/guide/directory-structure/plugins) file to globalize your store:
 
 ```ts [plugins/pinia.ts]
 import { useMainStore } from '~/store'
@@ -219,8 +221,8 @@ import { useMainStore } from '~/store'
 export default defineNuxtPlugin(({ $pinia }) => {
   return {
     provide: {
-      store: useMainStore($pinia)
-    }
+      store: useMainStore($pinia),
+    },
   }
 })
 ```
@@ -232,8 +234,8 @@ Once it's done you will need to add the following plugin to your Nuxt app:
 ```ts [plugins/vuex.ts]
 import store from '~/store'
 
-export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp.use(store);
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(store)
 })
 ```
 

package/7.migration/20.module-authors.md

@@ -7,7 +7,7 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 modules.'
 
 Nuxt 3 has a basic backward compatibility layer for Nuxt 2 modules using `@nuxt/kit` auto wrappers. But there are usually steps to follow to make modules compatible with Nuxt 3 and sometimes, using Nuxt Bridge is required for cross-version compatibility.
 
-We have prepared a [Dedicated Guide](/docs/guide/going-further/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatible with Nuxt 3.
+We have prepared a [Dedicated Guide](/docs/3.x/guide/going-further/modules) for authoring Nuxt 3 ready modules using `@nuxt/kit`. Currently best migration path is to follow it and rewrite your modules. Rest of this guide includes preparation steps if you prefer to avoid a full rewrite yet making modules compatible with Nuxt 3.
 
 ::tip{icon="i-lucide-puzzle" to="/modules"}
 Explore Nuxt 3 compatible modules.
@@ -33,11 +33,11 @@ When Nuxt 3 users add your module, you will not have access to the module contai
 
 Migrating to `@nuxt/bridge` is the first and most important step for supporting Nuxt 3.
 
-If you have a fixture or example in your module, add `@nuxt/bridge` package to its config (see [example](/docs/bridge/overview#update-nuxtconfig))
+If you have a fixture or example in your module, add `@nuxt/bridge` package to its config (see [example](/docs/3.x/bridge/overview#update-nuxtconfig))
 
 ### 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/3.x/guide/concepts/esm) for more info and upgrading.
 
 ### Ensure Plugins Default Export
 
@@ -69,16 +69,16 @@ export default () => { }
 
 With Nuxt 3, Nuxt is now a build-time-only dependency, which means that modules shouldn't attempt to hook into the Nuxt runtime.
 
-Your module should work even if it's only added to [`buildModules`](/docs/api/nuxt-config#runtimeconfig) (instead of `modules`). For example:
+Your module should work even if it's only added to [`buildModules`](/docs/3.x/api/nuxt-config#runtimeconfig) (instead of `modules`). For example:
 
-- Avoid updating `process.env` within a Nuxt module and reading by a Nuxt plugin; use [`runtimeConfig`](/docs/api/nuxt-config#runtimeconfig) instead.
+- Avoid updating `process.env` within a Nuxt module and reading by a Nuxt plugin; use [`runtimeConfig`](/docs/3.x/api/nuxt-config#runtimeconfig) instead.
 - (*) Avoid depending on runtime hooks like `vue-renderer:*` for production
 - (*) Avoid adding `serverMiddleware` by importing them inside the module. Instead, add them by referencing a file path so that they are independent of the module's context
 
 (*) Unless it is for `nuxt dev` purpose only and guarded with `if (nuxt.options.dev) { }`.
 
 ::tip
-Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/guide/going-further/modules).
+Continue reading about Nuxt 3 modules in the [Modules Author Guide](/docs/3.x/guide/going-further/modules).
 ::
 
 ### Use TypeScript (Optional)

package/7.migration/3.auto-imports.md

@@ -4,14 +4,14 @@ description:  Nuxt 3 adopts a minimal friction approach, meaning wherever possib
 ---
 
 ::note
-In the rest of the migration documentation, you will notice that key Nuxt and Vue utilities do not have explicit imports. This is not a typo; Nuxt will automatically import them for you, and you should get full type hinting if you have followed [the instructions](/docs/migration/configuration#typescript) to use Nuxt's TypeScript support.
+In the rest of the migration documentation, you will notice that key Nuxt and Vue utilities do not have explicit imports. This is not a typo; Nuxt will automatically import them for you, and you should get full type hinting if you have followed [the instructions](/docs/3.x/migration/configuration#typescript) to use Nuxt's TypeScript support.
 ::
 
-[Read more about auto imports](/docs/guide/concepts/auto-imports)
+[Read more about auto imports](/docs/3.x/guide/concepts/auto-imports)
 
 ## Migration
 
-1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/guide/directory-structure/components) for more information.
+1. If you have been using `@nuxt/components` in Nuxt 2, you can remove `components: true` in your `nuxt.config`. If you had a more complex setup, then note that the component options have changed somewhat. See the [components documentation](/docs/3.x/guide/directory-structure/components) for more information.
 
 ::tip
 You can look at `.nuxt/types/components.d.ts` and `.nuxt/types/imports.d.ts` to see how Nuxt has resolved your components and composable auto-imports.

package/7.migration/4.meta.md

@@ -5,8 +5,8 @@ description: Manage your meta tags, from Nuxt 2 to Nuxt 3.
 
 Nuxt 3 provides several different ways to manage your meta tags:
 1. Through your `nuxt.config`.
-2. Through the [`useHead`](/docs/api/composables/use-head) [composable](/docs/getting-started/seo-meta)
-3. Through [global meta components](/docs/getting-started/seo-meta)
+2. Through the [`useHead`](/docs/3.x/api/composables/use-head) [composable](/docs/3.x/getting-started/seo-meta)
+3. Through [global meta components](/docs/3.x/getting-started/seo-meta)
 
 You can customize `title`, `titleTemplate`, `base`, `script`, `noscript`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`.
 
@@ -19,7 +19,7 @@ Nuxt currently uses [`Unhead`](https://github.com/unjs/unhead) to manage your me
 ## Migration
 
 1. In your `nuxt.config`, rename `head` to `meta`. Consider moving this shared meta configuration into your `app.vue` instead. (Note that objects no longer have a `hid` key for deduplication.)
-2. If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/api/composables/use-head) . You might also consider using the built-in meta-components.
+2. If you need to access the component state with `head`, you should migrate to using [`useHead`](/docs/3.x/api/composables/use-head) . You might also consider using the built-in meta-components.
 3. If you need to use the Options API, there is a `head()` method you can use when you use `defineNuxtComponent`.
 
 ### useHead
@@ -31,18 +31,18 @@ Nuxt currently uses [`Unhead`](https://github.com/unjs/unhead) to manage your me
 export default {
   data: () => ({
     title: 'My App',
-    description: 'My App Description'
-  })
+    description: 'My App Description',
+  }),
   head () {
     return {
       title: this.title,
       meta: [{
         hid: 'description',
         name: 'description',
-        content: this.description
-      }]
+        content: this.description,
+      }],
     }
-  }
+  },
 }
 </script>
 ```
@@ -57,8 +57,8 @@ useHead({
   title,
   meta: [{
     name: 'description',
-    content: description
-  }]
+    content: description,
+  }],
 })
 </script>
 ```
@@ -80,10 +80,10 @@ export default {
       meta: [{
         hid: 'description',
         name: 'description',
-        content: 'My App Description'
-      }]
+        content: 'My App Description',
+      }],
     }
-  }
+  },
 }
 </script>
 ```
@@ -93,7 +93,10 @@ export default {
   <div>
     <Head>
       <Title>My App</Title>
-      <Meta name="description" content="My app description"/>
+      <Meta
+        name="description"
+        content="My app description"
+      />
     </Head>
     <!-- -->
   </div>
@@ -118,10 +121,10 @@ export default defineNuxtComponent({
     return {
       meta: [{
         name: 'description',
-        content: 'This is my page description.'
-      }]
+        content: 'This is my page description.',
+      }],
     }
-  }
+  },
 })
 </script>
 ```

package/7.migration/5.plugins-and-middleware.md

@@ -9,22 +9,22 @@ Plugins now have a different format, and take only one argument (`nuxtApp`).
 
 ::code-group
 
-```js [Nuxt 2]
+```ts [Nuxt 2]
 export default (ctx, inject) => {
   inject('injected', () => 'my injected function')
-})
+}
 ```
 
 ```ts [Nuxt 3]
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin((nuxtApp) => {
   // now available on `nuxtApp.$injected`
   nuxtApp.provide('injected', () => 'my injected function')
 
   // You can alternatively use this format, which comes with automatic type support
   return {
     provide: {
-      injected: () => 'my injected function'
-    }
+      injected: () => 'my injected function',
+    },
   }
 })
 ```