@nuxt/docs 3.19.2 → 3.19.3

package/7.migration/6.pages-and-layouts.md

@@ -19,13 +19,13 @@ This file is a great place to put any custom code that needs to be run once when
 
 ### Migration
 
-Consider creating an `app.vue` file and including any logic that needs to run once at the top-level of your app. You can check out [an example here](/docs/guide/directory-structure/app).
+Consider creating an `app.vue` file and including any logic that needs to run once at the top-level of your app. You can check out [an example here](/docs/3.x/guide/directory-structure/app).
 
 ## Layouts
 
 If you are using layouts in your app for multiple pages, there is only a slight change required.
 
-In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/docs/guide/directory-structure/layouts).
+In Nuxt 2, the `<Nuxt>` component is used within a layout to render the current page. In Nuxt 3, layouts use slots instead, so you will have to replace that component with a `<slot />`. This also allows advanced use cases with named and scoped slots. [Read more about layouts](/docs/3.x/guide/directory-structure/layouts).
 
 You will also need to change how you define the layout used by a page using the `definePageMeta` compiler macro. Layouts will be kebab-cased. So `layouts/customLayout.vue` becomes `custom-layout` when referenced in your page.
 
@@ -42,7 +42,7 @@ You will also need to change how you define the layout used by a page using the
         </div>
       </template>
     ```
-2. Use [`definePageMeta`](/docs/api/utils/define-page-meta) to select the layout used by your page.
+2. Use [`definePageMeta`](/docs/3.x/api/utils/define-page-meta) to select the layout used by your page.
     ```diff [pages/index.vue]
     + <script setup>
     + definePageMeta({
@@ -54,7 +54,7 @@ You will also need to change how you define the layout used by a page using the
     - }
       </script>
     ```
-3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/guide/directory-structure/layouts) directly within `error.vue`:
+3. Move `~/layouts/_error.vue` to `~/error.vue`. See [the error handling docs](/docs/3.x/getting-started/error-handling). If you want to ensure that this page uses a layout, you can use [`<NuxtLayout>`](/docs/3.x/guide/directory-structure/layouts) directly within `error.vue`:
     ```vue [error.vue]
     <template>
       <div>
@@ -67,7 +67,7 @@ You will also need to change how you define the layout used by a page using the
 
 ## Pages
 
-Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`pages/`](/docs/guide/directory-structure/pages) directory in your source directory. If you only have a single page, you may consider instead moving it to `app.vue` for a lighter build.
+Nuxt 3 ships with an optional `vue-router` integration triggered by the existence of a [`pages/`](/docs/3.x/guide/directory-structure/pages) directory in your source directory. If you only have a single page, you may consider instead moving it to `app.vue` for a lighter build.
 
 ### Dynamic Routes
 
@@ -96,7 +96,7 @@ If you have been defining transitions for your page or layout directly in your c
 
 1. Rename any pages with dynamic parameters to match the new format.
 2. Update `<Nuxt>` and `<NuxtChild>` to be `<NuxtPage>`.
-3. If you're using the Composition API, you can also migrate `this.$route` and `this.$router` to use [`useRoute`](/docs/api/composables/use-route) and [`useRouter`](/docs/api/composables/use-router)  composables.
+3. If you're using the Composition API, you can also migrate `this.$route` and `this.$router` to use [`useRoute`](/docs/3.x/api/composables/use-route) and [`useRouter`](/docs/3.x/api/composables/use-router)  composables.
 
 #### Example: Dynamic Routes
 
@@ -145,13 +145,17 @@ If you have been defining transitions for your page or layout directly in your c
 ```vue [Nuxt 2]
 <template>
   <div>
-    <NuxtChild keep-alive :keep-alive-props="{ exclude: ['modal'] }" :nuxt-child-key="$route.slug" />
+    <NuxtChild
+      keep-alive
+      :keep-alive-props="{ exclude: ['modal'] }"
+      :nuxt-child-key="$route.slug"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  transition: 'page' // or { name: 'page' }
+  transition: 'page', // or { name: 'page' }
 }
 </script>
 ```
@@ -172,7 +176,7 @@ definePageMeta({
     name: 'page',
   },
   keepalive: {
-    exclude: ['modal']
+    exclude: ['modal'],
   },
 })
 </script>
@@ -182,7 +186,7 @@ definePageMeta({
 
 ## `<NuxtLink>` Component
 
-Most of the syntax and functionality are the same for the global [NuxtLink](/docs/api/components/nuxt-link) component. If you have been using the shortcut `<NLink>` format, you should update this to use `<NuxtLink>`.
+Most of the syntax and functionality are the same for the global [NuxtLink](/docs/3.x/api/components/nuxt-link) component. If you have been using the shortcut `<NLink>` format, you should update this to use `<NuxtLink>`.
 
 `<NuxtLink>` is now a drop-in replacement for _all_ links, even external ones. You can read more about it, and how to extend it to provide your own link component.
 
@@ -193,7 +197,7 @@ Most of the syntax and functionality are the same for the global [NuxtLink](/doc
 When migrating from Nuxt 2 to Nuxt 3, you will have to update how you programmatically navigate your users. In Nuxt 2, you had access to the underlying Vue Router with `this.$router`. In Nuxt 3, you can use the `navigateTo()` utility method which allows you to pass a route and parameters to Vue Router.
 
 ::warning
-Make sure to always `await` on [`navigateTo`](/docs/api/utils/navigate-to) or chain its result by returning from functions.
+Make sure to always `await` on [`navigateTo`](/docs/3.x/api/utils/navigate-to) or chain its result by returning from functions.
 ::
 
 ::code-group
@@ -202,29 +206,29 @@ Make sure to always `await` on [`navigateTo`](/docs/api/utils/navigate-to) or ch
 <script>
 export default {
   methods: {
-    navigate(){
+    navigate () {
       this.$router.push({
         path: '/search',
         query: {
           name: 'first name',
-          type: '1'
-        }
+          type: '1',
+        },
       })
-    }
-  }
+    },
+  },
 }
 </script>
 ```
 
 ```vue [Nuxt 3]
 <script setup lang="ts">
-function navigate(){
+function navigate () {
   return navigateTo({
     path: '/search',
     query: {
       name: 'first name',
-      type: '1'
-    }
+      type: '1',
+    },
   })
 }
 </script>

package/7.migration/7.component-options.md

@@ -5,7 +5,7 @@ description: 'Learn how to migrate from Nuxt 2 components options to Nuxt 3 comp
 
 ## `asyncData` and `fetch`
 
-Nuxt 3 provides new options for [fetching data from an API](/docs/getting-started/data-fetching).
+Nuxt 3 provides new options for [fetching data from an API](/docs/3.x/getting-started/data-fetching).
 
 <!-- TODO: Intro to <script setup> -->
 <!-- TODO: Mention about options compatibility with asyncData -->
@@ -14,30 +14,30 @@ Nuxt 3 provides new options for [fetching data from an API](/docs/getting-starte
 
 In Nuxt 2 you might use `@nuxtjs/axios` or `@nuxt/http` to fetch your data - or just the polyfilled global `fetch`.
 
-In Nuxt 3 you can use a globally available `fetch` method that has the same API as [the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) or [`$fetch`](/docs/api/utils/dollarfetch) method which is using [unjs/ofetch](https://github.com/unjs/ofetch). It has a number of benefits, including:
+In Nuxt 3 you can use a globally available `fetch` method that has the same API as [the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) or [`$fetch`](/docs/3.x/api/utils/dollarfetch) method which is using [unjs/ofetch](https://github.com/unjs/ofetch). It has a number of benefits, including:
 
-1. It will handle 'smartly' making [direct API calls](/docs/guide/concepts/server-engine#direct-api-calls) if it's running on the server, or making a client-side call to your API if it's running on the client. (It can also handle calling third-party APIs.)
+1. It will handle 'smartly' making [direct API calls](/docs/3.x/guide/concepts/server-engine#direct-api-calls) if it's running on the server, or making a client-side call to your API if it's running on the client. (It can also handle calling third-party APIs.)
 
 2. Plus, it comes with convenience features including automatically parsing responses and stringifying data.
 
-You can read more [about direct API calls](/docs/guide/concepts/server-engine#direct-api-calls) or [fetching data](/docs/getting-started/data-fetching).
+You can read more [about direct API calls](/docs/3.x/guide/concepts/server-engine#direct-api-calls) or [fetching data](/docs/3.x/getting-started/data-fetching).
 
 ### Composables
 
-Nuxt 3 provides new composables for fetching data: [`useAsyncData`](/docs/api/composables/use-async-data) and `useFetch`. They each have 'lazy' variants (`useLazyAsyncData` and `useLazyFetch`), which do not block client-side navigation.
+Nuxt 3 provides new composables for fetching data: [`useAsyncData`](/docs/3.x/api/composables/use-async-data) and `useFetch`. They each have 'lazy' variants (`useLazyAsyncData` and `useLazyFetch`), which do not block client-side navigation.
 
 In Nuxt 2, you'd fetch your data in your component using a syntax similar to:
 
 ```ts
 export default {
-  async asyncData({ params, $http }) {
+  async asyncData ({ params, $http }) {
     const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
     return { post }
   },
   // or alternatively
   fetch () {
     this.post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
-  }
+  },
 }
 ```
 
@@ -48,7 +48,7 @@ With Nuxt 3, you can perform this data fetching using composables in your `setup
 ```vue
 <script setup lang="ts">
 // Define params wherever, through `defineProps()`, `useRoute()`, etc.
-const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`) )
+const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`))
 // Or instead - useFetch is a convenience wrapper around useAsyncData when you're just performing a simple fetch
 const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`)
 </script>
@@ -57,13 +57,13 @@ const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${p
 You can now use `post` inside of your Nuxt 3 template, or call `refresh` to update the data.
 
 ::note
-Despite the names, [`useFetch`](/docs/api/composables/use-fetch) is not a direct replacement of the `fetch()` hook. Rather, [`useAsyncData`](/docs/api/composables/use-async-data) replaces both hooks and is more customizable; it can do more than simply fetching data from an endpoint. [`useFetch`](/docs/api/composables/use-fetch) is a convenience wrapper around [`useAsyncData`](/docs/api/composables/use-async-data) for simply fetching data from an endpoint.
+Despite the names, [`useFetch`](/docs/3.x/api/composables/use-fetch) is not a direct replacement of the `fetch()` hook. Rather, [`useAsyncData`](/docs/3.x/api/composables/use-async-data) replaces both hooks and is more customizable; it can do more than simply fetching data from an endpoint. [`useFetch`](/docs/3.x/api/composables/use-fetch) is a convenience wrapper around [`useAsyncData`](/docs/3.x/api/composables/use-async-data) for simply fetching data from an endpoint.
 ::
 
 ### Migration
 
-1. Replace the `asyncData` hook with [`useAsyncData`](/docs/api/composables/use-async-data) or [`useFetch`](/docs/api/composables/use-fetch) in your page/component.
-2. Replace the `fetch` hook with [`useAsyncData`](/docs/api/composables/use-async-data) or [`useFetch`](/docs/api/composables/use-fetch) in your component.
+1. Replace the `asyncData` hook with [`useAsyncData`](/docs/3.x/api/composables/use-async-data) or [`useFetch`](/docs/3.x/api/composables/use-fetch) in your page/component.
+2. Replace the `fetch` hook with [`useAsyncData`](/docs/3.x/api/composables/use-async-data) or [`useFetch`](/docs/3.x/api/composables/use-fetch) in your component.
 
 ## `head`
 
@@ -71,7 +71,7 @@ Despite the names, [`useFetch`](/docs/api/composables/use-fetch) is not a direct
 
 ## `key`
 
-You can now define a key within the [`definePageMeta`](/docs/api/utils/define-page-meta) compiler macro.
+You can now define a key within the [`definePageMeta`](/docs/3.x/api/utils/define-page-meta) compiler macro.
 
 ```diff [pages/index.vue]
 - <script>
@@ -103,8 +103,8 @@ This feature is not yet supported in Nuxt 3.
 
 ## `scrollToTop`
 
-This feature is not yet supported in Nuxt 3. If you want to overwrite the default scroll behavior of `vue-router`, you can do so in `~/app/router.options.ts` (see [docs](/docs/guide/recipes/custom-routing#router-options)) for more info.
-Similar to `key`, specify it within the [`definePageMeta`](/docs/api/utils/define-page-meta) compiler macro.
+This feature is not yet supported in Nuxt 3. If you want to overwrite the default scroll behavior of `vue-router`, you can do so in `~/app/router.options.ts` (see [docs](/docs/3.x/guide/recipes/custom-routing#router-options)) for more info.
+Similar to `key`, specify it within the [`definePageMeta`](/docs/3.x/api/utils/define-page-meta) compiler macro.
 
 ```diff [pages/index.vue]
 - <script>

package/7.migration/8.runtime-config.md

@@ -5,16 +5,16 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 runtime config.'
 
 If you wish to reference environment variables within your Nuxt 3 app, you will need to use runtime config.
 
-When referencing these variables within your components, you will have to use the [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) composable in your setup method (or Nuxt plugin).
+When referencing these variables within your components, you will have to use the [`useRuntimeConfig`](/docs/3.x/api/composables/use-runtime-config) composable in your setup method (or Nuxt plugin).
 
-In the `server/` portion of your app, you can use [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) without any import.
+In the `server/` portion of your app, you can use [`useRuntimeConfig`](/docs/3.x/api/composables/use-runtime-config) without any import.
 
 :read-more{to="/docs/guide/going-further/runtime-config"}
 
 ## Migration
 
 1. Add any environment variables that you use in your app to the `runtimeConfig` property of the `nuxt.config` file.
-2. Migrate `process.env` to [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) throughout the Vue part of your app.
+2. Migrate `process.env` to [`useRuntimeConfig`](/docs/3.x/api/composables/use-runtime-config) throughout the Vue part of your app.
 
 ::code-group
 
@@ -25,9 +25,9 @@ export default defineNuxtConfig({
     apiSecret: '123',
     // Config within public will be also exposed to the client
     public: {
-      apiBase: '/api'
-    }
-  }
+      apiBase: '/api',
+    },
+  },
 })
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs",
-  "version": "3.19.2",
+  "version": "3.19.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",