@nuxt/docs 4.1.2 → 4.2.0

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/4.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/4.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/4.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/4.x/guide/concepts/server-engine#direct-api-calls) or [fetching data](/docs/4.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/4.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,21 +57,21 @@ 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/4.x/api/composables/use-fetch) is not a direct replacement of the `fetch()` hook. Rather, [`useAsyncData`](/docs/4.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/4.x/api/composables/use-fetch) is a convenience wrapper around [`useAsyncData`](/docs/4.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/4.x/api/composables/use-async-data) or [`useFetch`](/docs/4.x/api/composables/use-fetch) in your page/component.
+2. Replace the `fetch` hook with [`useAsyncData`](/docs/4.x/api/composables/use-async-data) or [`useFetch`](/docs/4.x/api/composables/use-fetch) in your component.
 
 ## `head`
 
-:read-more{to="/docs/migration/meta"}
+:read-more{to="/docs/4.x/migration/meta"}
 
 ## `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/4.x/api/utils/define-page-meta) compiler macro.
 
 ```diff [app/pages/index.vue]
 - <script>
@@ -91,7 +91,7 @@ You can now define a key within the [`definePageMeta`](/docs/api/utils/define-pa
 
 ## `layout`
 
-:read-more{to="/docs/migration/pages-and-layouts"}
+:read-more{to="/docs/4.x/migration/pages-and-layouts"}
 
 ## `loading`
 
@@ -99,12 +99,12 @@ This feature is not yet supported in Nuxt 3.
 
 ## `middleware`
 
-:read-more{to="/docs/migration/plugins-and-middleware"}
+:read-more{to="/docs/4.x/migration/plugins-and-middleware"}
 
 ## `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 an `~/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 an `~/router.options.ts` (see [docs](/docs/4.x/guide/recipes/custom-routing#router-options)) for more info.
+Similar to `key`, specify it within the [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) compiler macro.
 
 ```diff [app/pages/index.vue]
 - <script>
@@ -120,7 +120,7 @@ Similar to `key`, specify it within the [`definePageMeta`](/docs/api/utils/defin
 
 ## `transition`
 
-:read-more{to="/docs/getting-started/transitions"}
+:read-more{to="/docs/4.x/getting-started/transitions"}
 
 ## `validate`
 

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/4.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/4.x/api/composables/use-runtime-config) without any import.
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/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/4.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": "4.1.2",
+  "version": "4.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",

package/2.guide/2.directory-structure/0.output.md

@@ -1,18 +0,0 @@
----
-title: ".output"
-description: "Nuxt creates the .output/ directory when building your application for production."
-head.title: ".output/"
-navigation.icon: i-lucide-folder
----
-
-::important
-This directory should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing the build output to your repository.
-::
-
-Use this directory to deploy your Nuxt application to production.
-
-:read-more{to="/docs/getting-started/deployment"}
-
-::warning
-You should not touch any files inside since the whole directory will be re-created when running [`nuxt build`](/docs/api/commands/build).
-::