@nuxt/docs-nightly 4.1.3-29313386.edc02e27 → 4.1.3-29316215.910d159d

package/1.getting-started/10.data-fetching.md

@@ -30,12 +30,12 @@ Use the [Nuxt DevTools](https://devtools.nuxt.com) to inspect this data in the *
 <script setup lang="ts">
 const { data } = await useFetch('/api/data')
 
-async function handleFormSubmit() {
+async function handleFormSubmit () {
   const res = await $fetch('/api/submit', {
     method: 'POST',
     body: {
       // My form data
-    }
+    },
   })
 }
 </script>
@@ -68,23 +68,23 @@ Nuxt includes the [ofetch](https://github.com/unjs/ofetch) library, and is auto-
 
 ```vue twoslash [pages/todos.vue]
 <script setup lang="ts">
-async function addTodo() {
+async function addTodo () {
   const todo = await $fetch('/api/todos', {
     method: 'POST',
     body: {
       // My todo data
-    }
+    },
   })
 }
 </script>
 ```
 
 ::warning
-Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](/docs/getting-started/data-fetching#the-need-for-usefetch-and-useasyncdata). :br
-It is recommended to use `$fetch` for client-side interactions (event-based) or combined with [`useAsyncData`](/docs/getting-started/data-fetching#useasyncdata) when fetching the initial component data.
+Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](/docs/4.x/getting-started/data-fetching#the-need-for-usefetch-and-useasyncdata). :br
+It is recommended to use `$fetch` for client-side interactions (event-based) or combined with [`useAsyncData`](/docs/4.x/getting-started/data-fetching#useasyncdata) when fetching the initial component data.
 ::
 
-::read-more{to="/docs/api/utils/dollarfetch"}
+::read-more{to="/docs/4.x/api/utils/dollarfetch"}
 Read more about `$fetch`.
 ::
 
@@ -94,7 +94,7 @@ When calling `useFetch` on the server, Nuxt will use [`useRequestFetch`](/docs/4
 
 ```vue
 <script setup lang="ts">
-const { data } = await useFetch('/api/echo');
+const { data } = await useFetch('/api/echo')
 </script>
 ```
 
@@ -109,7 +109,7 @@ Alternatively, the example below shows how to use [`useRequestHeaders`](/docs/4.
 <script setup lang="ts">
 const headers = useRequestHeaders(['cookie'])
 
-async function getCurrentUser() {
+async function getCurrentUser () {
   return await $fetch('/api/me', { headers })
 }
 </script>
@@ -146,9 +146,9 @@ This composable is a wrapper around the [`useAsyncData`](/docs/4.x/api/composabl
 
 :video-accordion{title="Watch a video from Alexander Lichter to avoid using useFetch the wrong way" videoId="njsGVmcWviY"}
 
-:read-more{to="/docs/api/composables/use-fetch"}
+:read-more{to="/docs/4.x/api/composables/use-fetch"}
 
-:link-example{to="/docs/examples/features/data-fetching"}
+:link-example{to="/docs/4.x/examples/features/data-fetching"}
 
 ## `useAsyncData`
 
@@ -197,7 +197,7 @@ The `useAsyncData` composable is a great way to wrap and wait for multiple `$fet
 const { data: discounts, status } = await useAsyncData('cart-discount', async () => {
   const [coupons, offers] = await Promise.all([
     $fetch('/cart/coupons'),
-    $fetch('/cart/offers')
+    $fetch('/cart/offers'),
   ])
 
   return { coupons, offers }
@@ -220,7 +220,7 @@ await useAsyncData(() => offersStore.getOffer(route.params.slug))
 ```
 ::
 
-::read-more{to="/docs/api/composables/use-async-data"}
+::read-more{to="/docs/4.x/api/composables/use-async-data"}
 Read more about `useAsyncData`.
 ::
 
@@ -255,7 +255,7 @@ By default, data fetching composables will wait for the resolution of their asyn
 ```vue twoslash [app/app.vue]
 <script setup lang="ts">
 const { status, data: posts } = useFetch('/api/posts', {
-  lazy: true
+  lazy: true,
 })
 </script>
 
@@ -280,11 +280,11 @@ const { status, data: posts } = useLazyFetch('/api/posts')
 </script>
 ```
 
-::read-more{to="/docs/api/composables/use-lazy-fetch"}
+::read-more{to="/docs/4.x/api/composables/use-lazy-fetch"}
 Read more about `useLazyFetch`.
 ::
 
-::read-more{to="/docs/api/composables/use-lazy-async-data"}
+::read-more{to="/docs/4.x/api/composables/use-lazy-async-data"}
 Read more about `useLazyAsyncData`.
 ::
 
@@ -303,11 +303,11 @@ const articles = await useFetch('/api/article')
 /* This call will only be performed on the client */
 const { status, data: comments } = useFetch('/api/comments', {
   lazy: true,
-  server: false
+  server: false,
 })
 ```
 
-The `useFetch` composable is meant to be invoked in setup method or called directly at the top level of a function in lifecycle hooks, otherwise you should use [`$fetch` method](/docs/getting-started/data-fetching#fetch).
+The `useFetch` composable is meant to be invoked in setup method or called directly at the top level of a function in lifecycle hooks, otherwise you should use [`$fetch` method](/docs/4.x/getting-started/data-fetching#fetch).
 
 ### Minimize payload size
 
@@ -317,7 +317,7 @@ The `pick` option helps you to minimize the payload size stored in your HTML doc
 <script setup lang="ts">
 /* only pick the fields used in your template */
 const { data: mountain } = await useFetch('/api/mountains/everest', {
-  pick: ['title', 'description']
+  pick: ['title', 'description'],
 })
 </script>
 
@@ -333,7 +333,7 @@ If you need more control or map over several objects, you can use the `transform
 const { data: mountains } = await useFetch('/api/mountains', {
   transform: (mountains) => {
     return mountains.map(mountain => ({ title: mountain.title, description: mountain.description }))
-  }
+  },
 })
 ```
 
@@ -406,7 +406,7 @@ You can use computed refs, plain refs or getter functions as keys, allowing for
 const userId = ref('123')
 const { data: user } = useAsyncData(
   computed(() => `user-${userId.value}`),
-  () => fetchUser(userId.value)
+  () => fetchUser(userId.value),
 )
 
 // When userId changes, the data will be automatically refetched
@@ -426,12 +426,14 @@ const { data, error, execute, refresh } = await useFetch('/api/users')
 <template>
   <div>
     <p>{{ data }}</p>
-    <button @click="() => refresh()">Refresh data</button>
+    <button @click="() => refresh()">
+      Refresh data
+    </button>
   </div>
 </template>
 ```
 
-The `execute` function is an alias for `refresh` that works in exactly the same way but is more semantic for cases when the fetch is [not immediate](/docs/getting-started/data-fetching#not-immediate).
+The `execute` function is an alias for `refresh` that works in exactly the same way but is more semantic for cases when the fetch is [not immediate](/docs/4.x/getting-started/data-fetching#not-immediate).
 
 ::tip
 To globally refetch or invalidate cached data, see [`clearNuxtData`](/docs/4.x/api/utils/clear-nuxt-data) and [`refreshNuxtData`](/docs/4.x/api/utils/refresh-nuxt-data).
@@ -447,7 +449,9 @@ const { data, clear } = await useFetch('/api/users')
 
 const route = useRoute()
 watch(() => route.path, (path) => {
-  if (path === '/') clear()
+  if (path === '/') {
+    clear()
+  }
 })
 </script>
 ```
@@ -462,7 +466,7 @@ const id = ref(1)
 
 const { data, error, refresh } = await useFetch('/api/users', {
   /* Changing the id will trigger a refetch */
-  watch: [id]
+  watch: [id],
 })
 </script>
 ```
@@ -474,12 +478,12 @@ Note that **watching a reactive value won't change the URL fetched**. For exampl
 const id = ref(1)
 
 const { data, error, refresh } = await useFetch(`/api/users/${id.value}`, {
-  watch: [id]
+  watch: [id],
 })
 </script>
 ```
 
-If you need to change the URL based on a reactive value, you may want to use a [computed URL](/docs/getting-started/data-fetching#computed-url) instead.
+If you need to change the URL based on a reactive value, you may want to use a [computed URL](/docs/4.x/getting-started/data-fetching#computed-url) instead.
 
 When reactive fetch options are provided, they'll be automatically watched and trigger refetches. In some cases, it can be useful to opt-out of this behavior by specifying `watch: false`.
 
@@ -489,7 +493,7 @@ const id = ref(1)
 // Won't automatically refetch when id changes
 const { data, execute } = await useFetch('/api/users', {
   query: { id }, // id is watched by default
-  watch: false,  // disables automatic watching of id
+  watch: false, // disables automatic watching of id
 })
 
 // doesn't trigger refetch
@@ -506,31 +510,35 @@ const id = ref(null)
 
 const { data, status } = useLazyFetch('/api/user', {
   query: {
-    user_id: id
-  }
+    user_id: id,
+  },
 })
 </script>
 ```
 
 In the case of more complex URL construction, you may use a callback as a [computed getter](https://vuejs.org/guide/essentials/computed.html) that returns the URL string.
 
-Every time a dependency changes, the data will be fetched using the newly constructed URL. Combine this with [not-immediate](/docs/getting-started/data-fetching#not-immediate), and you can wait until the reactive element changes before fetching.
+Every time a dependency changes, the data will be fetched using the newly constructed URL. Combine this with [not-immediate](/docs/4.x/getting-started/data-fetching#not-immediate), and you can wait until the reactive element changes before fetching.
 
 ```vue
 <script setup lang="ts">
 const id = ref(null)
 
 const { data, status } = useLazyFetch(() => `/api/users/${id.value}`, {
-  immediate: false
+  immediate: false,
 })
 
-const pending = computed(() => status.value === 'pending');
+const pending = computed(() => status.value === 'pending')
 </script>
 
 <template>
   <div>
     <!-- disable the input while fetching -->
-    <input v-model="id" type="number" :disabled="pending"/>
+    <input
+      v-model="id"
+      type="number"
+      :disabled="pending"
+    >
 
     <div v-if="status === 'idle'">
       Type an user ID
@@ -547,7 +555,7 @@ const pending = computed(() => status.value === 'pending');
 </template>
 ```
 
-If you need to force a refresh when other reactive values change, you can also [watch other values](/docs/getting-started/data-fetching#watch).
+If you need to force a refresh when other reactive values change, you can also [watch other values](/docs/4.x/getting-started/data-fetching#watch).
 
 ### Not immediate
 
@@ -558,13 +566,15 @@ With that, you will need both the `status` to handle the fetch lifecycle, and `e
 ```vue
 <script setup lang="ts">
 const { data, error, execute, status } = await useLazyFetch('/api/comments', {
-  immediate: false
+  immediate: false,
 })
 </script>
 
 <template>
   <div v-if="status === 'idle'">
-    <button @click="execute">Get data</button>
+    <button @click="execute">
+      Get data
+    </button>
   </div>
 
   <div v-else-if="status === 'pending'">
@@ -636,9 +646,9 @@ export default defineNuxtComponent({
   fetchKey: 'hello',
   async asyncData () {
     return {
-      hello: await $fetch('/api/hello')
+      hello: await $fetch('/api/hello'),
     }
-  }
+  },
 })
 </script>
 ```
@@ -647,7 +657,7 @@ export default defineNuxtComponent({
 Using `<script setup>` or `<script setup lang="ts">` are the recommended way of declaring Vue components in Nuxt.
 ::
 
-:read-more{to="/docs/api/utils/define-nuxt-component"}
+:read-more{to="/docs/4.x/api/utils/define-nuxt-component"}
 
 ## Serializing Data From Server to Client
 
@@ -691,7 +701,7 @@ export default defineEventHandler(() => {
   const data = {
     createdAt: new Date(),
 
-    toJSON() {
+    toJSON () {
       return {
         createdAt: {
           year: this.createdAt.getFullYear(),
@@ -703,7 +713,6 @@ export default defineEventHandler(() => {
   }
   return data
 })
-
 ```
 
 ```vue [app/app.vue]
@@ -734,9 +743,9 @@ export default defineEventHandler(() => {
     createdAt: new Date(),
 
     // Workaround the type conversion
-    toJSON() {
+    toJSON () {
       return this
-    }
+    },
   }
 
   // Serialize the output to string, using superjson
@@ -772,7 +781,7 @@ When consuming SSE via POST request, you need to handle the connection manually.
 const response = await $fetch<ReadableStream>('/chats/ask-ai', {
   method: 'POST',
   body: {
-    query: "Hello AI, how are you?",
+    query: 'Hello AI, how are you?',
   },
   responseType: 'stream',
 })
@@ -784,8 +793,7 @@ const reader = response.pipeThrough(new TextDecoderStream()).getReader()
 while (true) {
   const { value, done } = await reader.read()
 
-  if (done)
-    break
+  if (done) { break }
 
   console.log('Received:', value)
 }
@@ -798,13 +806,13 @@ When requests don't rely on each other, you can make them in parallel with `Prom
 ```ts
 const { data } = await useAsyncData(() => {
   return Promise.all([
-    $fetch("/api/comments/"), 
-    $fetch("/api/author/12")
-  ]);
-});
+    $fetch('/api/comments/'),
+    $fetch('/api/author/12'),
+  ])
+})
 
-const comments = computed(() => data.value?.[0]);
-const author = computed(() => data.value?.[1]);
+const comments = computed(() => data.value?.[0])
+const author = computed(() => data.value?.[1])
 ```
 
 :video-accordion{title="Watch a video from Vue School on parallel data fetching" videoId="1024262536" platform="vimeo"}

package/1.getting-started/11.state-management.md

@@ -14,7 +14,7 @@ Nuxt provides the [`useState`](/docs/4.x/api/composables/use-state) composable t
 Because the data inside [`useState`](/docs/4.x/api/composables/use-state) will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
 ::
 
-::read-more{to="/docs/api/composables/use-state"}
+::read-more{to="/docs/4.x/api/composables/use-state"}
 Read more about `useState` composable.
 ::
 
@@ -53,7 +53,7 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 </template>
 ```
 
-:link-example{to="/docs/examples/features/state-management"}
+:link-example{to="/docs/4.x/examples/features/state-management"}
 
 ::note
 To globally invalidate cached state, see [`clearNuxtState`](/docs/4.x/api/utils/clear-nuxt-state) util.
@@ -77,7 +77,7 @@ await callOnce(async () => {
 This is similar to the [`nuxtServerInit` action](https://v2.nuxt.com/docs/directory-structure/store/#the-nuxtserverinit-action) in Nuxt 2, which allows filling the initial state of your store server-side before rendering the page.
 ::
 
-:read-more{to="/docs/api/utils/call-once"}
+:read-more{to="/docs/4.x/api/utils/call-once"}
 
 ### Usage with Pinia
 
@@ -92,16 +92,16 @@ Make sure to install the Pinia module with `npx nuxt module add pinia` or follow
 export const useWebsiteStore = defineStore('websiteStore', {
   state: () => ({
     name: '',
-    description: ''
+    description: '',
   }),
   actions: {
-    async fetch() {
+    async fetch () {
       const infos = await $fetch('https://api.nuxt.com/modules/pinia')
 
       this.name = infos.name
       this.description = infos.description
-    }
-  }
+    },
+  },
 })
 ```
 ```vue [app/app.vue]
@@ -151,8 +151,8 @@ export const useLocales = () => {
   const locales = ref([
     'en-US',
     'en-GB',
-    ...
-    'ja-JP-u-ca-japanese'
+    // ...,
+    'ja-JP-u-ca-japanese',
   ])
   if (!locales.value.includes(locale.value)) {
     locales.value.unshift(locale.value)
@@ -177,8 +177,15 @@ const date = useLocaleDate(new Date('2016-10-26'))
     <h1>Nuxt birthday</h1>
     <p>{{ date }}</p>
     <label for="locale-chooser">Preview a different locale</label>
-    <select id="locale-chooser" v-model="locale">
-      <option v-for="loc of locales" :key="loc" :value="loc">
+    <select
+      id="locale-chooser"
+      v-model="locale"
+    >
+      <option
+        v-for="loc of locales"
+        :key="loc"
+        :value="loc"
+      >
         {{ loc }}
       </option>
     </select>
@@ -187,7 +194,7 @@ const date = useLocaleDate(new Date('2016-10-26'))
 ```
 ::
 
-:link-example{to="/docs/examples/advanced/locale"}
+:link-example{to="/docs/4.x/examples/advanced/locale"}
 
 ## Shared State
 

package/1.getting-started/12.error-handling.md

@@ -53,7 +53,7 @@ This includes:
 
 ## Nitro Server Errors
 
-You cannot currently define a server-side handler for these errors, but can render an error page, see the [Render an Error Page](/docs/getting-started/error-handling#error-page) section.
+You cannot currently define a server-side handler for these errors, but can render an error page, see the [Render an Error Page](/docs/4.x/getting-started/error-handling#error-page) section.
 
 ## Errors with JS Chunks
 
@@ -78,7 +78,7 @@ It can also occur on the client side when:
 - mounting your app if the error was not handled with `onErrorCaptured` or `vue:error` hook
 - the Vue app is initialized and mounted in browser (`app:mounted`).
 
-::read-more{to="/docs/api/advanced/hooks"}
+::read-more{to="/docs/4.x/api/advanced/hooks"}
 Discover all the Nuxt lifecycle hooks.
 ::
 
@@ -91,7 +91,7 @@ Customize the default error page by adding `~/error.vue` in the source directory
 import type { NuxtError } from '#app'
 
 const props = defineProps({
-  error: Object as () => NuxtError
+  error: Object as () => NuxtError,
 })
 
 const handleError = () => clearError({ redirect: '/' })
@@ -100,19 +100,21 @@ const handleError = () => clearError({ redirect: '/' })
 <template>
   <div>
     <h2>{{ error?.statusCode }}</h2>
-    <button @click="handleError">Clear errors</button>
+    <button @click="handleError">
+      Clear errors
+    </button>
   </div>
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/error"}
+::read-more{to="/docs/4.x/guide/directory-structure/error"}
 Read more about `error.vue` and its uses.
 ::
 
 For custom errors we highly recommend using `onErrorCaptured` composable that can be called in a page/component setup function or `vue:error` runtime nuxt hook that can be configured in a nuxt plugin.
 
 ```ts twoslash [plugins/error-handler.ts]
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('vue:error', (err) => {
     //
   })
@@ -126,7 +128,7 @@ Make sure to check before using anything dependent on Nuxt plugins, such as `$ro
 ::
 
 ::note
-Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](/docs/getting-started/error-handling#useerror) in middleware to check if an error is being handled.
+Rendering an error page is an entirely separate page load, meaning any registered middleware will run again. You can use [`useError`](/docs/4.x/getting-started/error-handling#useerror) in middleware to check if an error is being handled.
 ::
 
 ::note
@@ -143,7 +145,7 @@ function useError (): Ref<Error | { url, statusCode, statusMessage, message, des
 
 This function will return the global Nuxt error that is being handled.
 
-::read-more{to="/docs/api/composables/use-error"}
+::read-more{to="/docs/4.x/api/composables/use-error"}
 Read more about `useError` composable.
 ::
 
@@ -156,7 +158,7 @@ function createError (err: string | { cause, data, message, name, stack, statusC
 Create an error object with additional metadata. You can pass a string to be set as the error `message` or an object containing error properties. It is usable in both the Vue and Server portions of your app, and is meant to be thrown.
 
 If you throw an error created with `createError`:
-- on server-side, it will trigger a full-screen error page which you can clear with [`clearError`](/docs/getting-started/error-handling#clearerror).
+- on server-side, it will trigger a full-screen error page which you can clear with [`clearError`](/docs/4.x/getting-started/error-handling#clearerror).
 - on client-side, it will throw a non-fatal error for you to handle. If you need to trigger a full-screen error page, then you can do this by setting `fatal: true`.
 
 ```vue twoslash [pages/movies/[slug\\].vue]
@@ -167,13 +169,13 @@ const { data } = await useFetch(`/api/movies/${route.params.slug}`)
 if (!data.value) {
   throw createError({
     statusCode: 404,
-    statusMessage: 'Page Not Found'
+    statusMessage: 'Page Not Found',
   })
 }
 </script>
 ```
 
-::read-more{to="/docs/api/utils/create-error"}
+::read-more{to="/docs/4.x/api/utils/create-error"}
 Read more about `createError` util.
 ::
 
@@ -183,11 +185,11 @@ Read more about `createError` util.
 function showError (err: string | Error | { statusCode, statusMessage }): Error
 ```
 
-You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page which you can clear with [`clearError`](/docs/getting-started/error-handling#clearerror).
+You can call this function at any point on client-side, or (on server side) directly within middleware, plugins or `setup()` functions. It will trigger a full-screen error page which you can clear with [`clearError`](/docs/4.x/getting-started/error-handling#clearerror).
 
 It is recommended instead to use `throw createError()`.
 
-::read-more{to="/docs/api/utils/show-error"}
+::read-more{to="/docs/4.x/api/utils/show-error"}
 Read more about `showError` util.
 ::
 
@@ -199,7 +201,7 @@ function clearError (options?: { redirect?: string }): Promise<void>
 
 This function will clear the currently handled Nuxt error. It also takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
 
-::read-more{to="/docs/api/utils/clear-error"}
+::read-more{to="/docs/4.x/api/utils/clear-error"}
 Read more about `clearError` util.
 ::
 
@@ -230,4 +232,4 @@ If you navigate to another route, the error will be cleared automatically.
 </template>
 ```
 
-:link-example{to="/docs/examples/advanced/error-handling"}
+:link-example{to="/docs/4.x/examples/advanced/error-handling"}

package/1.getting-started/13.server.md

@@ -4,7 +4,7 @@ description: Build full-stack applications with Nuxt's server framework. You can
 navigation.icon: i-lucide-pc-case
 ---
 
-:read-more{to="/docs/guide/directory-structure/server"}
+:read-more{to="/docs/4.x/guide/directory-structure/server"}
 
 ## Powered by Nitro
 
@@ -38,7 +38,7 @@ And you can directly return `text`, `json`, `html` or even a `stream`.
 
 Out-of-the-box, it supports **hot module replacement** and **auto-import** like the other parts of your Nuxt application.
 
-:read-more{to="/docs/guide/directory-structure/server"}
+:read-more{to="/docs/4.x/guide/directory-structure/server"}
 
 ## Universal Deployment
 
@@ -59,7 +59,7 @@ Or for other runtimes:
   :card{icon="i-logos-bun" title="Bun" to="https://bun.sh" target="_blank"}
 ::
 
-:read-more{to="/docs/getting-started/deployment"}
+:read-more{to="/docs/4.x/getting-started/deployment"}
 
 ## Hybrid Rendering
 
@@ -74,14 +74,14 @@ export default defineNuxtConfig({
     '/api/*': { cache: { maxAge: 60 * 60 } },
     // Redirection to avoid 404
     '/old-page': {
-      redirect: { to: '/new-page', statusCode: 302 }
-    }
+      redirect: { to: '/new-page', statusCode: 302 },
+    },
     // ...
-  }
+  },
 })
 ```
 
-::read-more{to="/docs/guide/concepts/rendering#hybrid-rendering"}
+::read-more{to="/docs/4.x/guide/concepts/rendering#hybrid-rendering"}
 Learn about all available route rules are available to customize the rendering mode of your routes.
 ::
 
@@ -91,4 +91,4 @@ Some route rules (`appMiddleware`, `redirect` and `prerender`) also affect clien
 
 Nitro is used to build the app for server side rendering, as well as pre-rendering.
 
-:read-more{to="/docs/guide/concepts/rendering"}
+:read-more{to="/docs/4.x/guide/concepts/rendering"}