@nuxt/docs-nightly 4.1.3-29314777.50febbbb → 4.1.3-29316225.304409da

package/1.getting-started/09.transitions.md

@@ -15,8 +15,8 @@ You can enable page transitions to apply an automatic transition for all your [p
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   app: {
-    pageTransition: { name: 'page', mode: 'out-in' }
-  }
+    pageTransition: { name: 'page', mode: 'out-in' },
+  },
 })
 ```
 
@@ -80,8 +80,8 @@ To set a different transition for a page, set the `pageTransition` key in [`defi
 <script setup lang="ts">
 definePageMeta({
   pageTransition: {
-    name: 'rotate'
-  }
+    name: 'rotate',
+  },
 })
 </script>
 ```
@@ -120,8 +120,8 @@ You can enable layout transitions to apply an automatic transition for all your
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   app: {
-    layoutTransition: { name: 'layout', mode: 'out-in' }
-  }
+    layoutTransition: { name: 'layout', mode: 'out-in' },
+  },
 })
 ```
 
@@ -192,7 +192,7 @@ div {
 ```vue [app/pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
-  layout: 'orange'
+  layout: 'orange',
 })
 </script>
 
@@ -219,8 +219,8 @@ Similar to `pageTransition`, you can apply a custom `layoutTransition` to the pa
 definePageMeta({
   layout: 'orange',
   layoutTransition: {
-    name: 'slide-in'
-  }
+    name: 'slide-in',
+  },
 })
 </script>
 ```
@@ -236,13 +236,13 @@ export default defineNuxtConfig({
   app: {
     pageTransition: {
       name: 'fade',
-      mode: 'out-in' // default
+      mode: 'out-in', // default
     },
     layoutTransition: {
       name: 'slide',
-      mode: 'out-in' // default
-    }
-  }
+      mode: 'out-in', // default
+    },
+  },
 })
 ```
 
@@ -257,8 +257,8 @@ To override the global transition property, use the `definePageMeta` to define p
 definePageMeta({
   pageTransition: {
     name: 'bounce',
-    mode: 'out-in' // default
-  }
+    mode: 'out-in', // default
+  },
 })
 </script>
 ```
@@ -271,7 +271,7 @@ definePageMeta({
 <script setup lang="ts">
 definePageMeta({
   pageTransition: false,
-  layoutTransition: false
+  layoutTransition: false,
 })
 </script>
 ```
@@ -282,8 +282,8 @@ Or globally in the `nuxt.config`:
 export default defineNuxtConfig({
   app: {
     pageTransition: false,
-    layoutTransition: false
-  }
+    layoutTransition: false,
+  },
 })
 ```
 
@@ -303,8 +303,8 @@ definePageMeta({
       console.log('Before enter...')
     },
     onEnter: (el, done) => {},
-    onAfterEnter: (el) => {}
-  }
+    onAfterEnter: (el) => {},
+  },
 })
 </script>
 ```
@@ -324,12 +324,13 @@ To apply dynamic transitions using conditional logic, you can leverage inline [m
 definePageMeta({
   pageTransition: {
     name: 'slide-right',
-    mode: 'out-in'
+    mode: 'out-in',
   },
   middleware (to, from) {
-    if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean')
+    if (to.meta.pageTransition && typeof to.meta.pageTransition !== 'boolean') {
       to.meta.pageTransition.name = +to.params.id! > +from.params.id! ? 'slide-left' : 'slide-right'
-  }
+    }
+  },
 })
 </script>
 
@@ -398,10 +399,12 @@ When `<NuxtPage />` is used in `app.vue`, transitions can be configured with the
 <template>
   <div>
     <NuxtLayout>
-      <NuxtPage :transition="{
-        name: 'bounce',
-        mode: 'out-in'
-      }" />
+      <NuxtPage
+        :transition="{
+          name: 'bounce',
+          mode: 'out-in',
+        }"
+      />
     </NuxtLayout>
   </div>
 </template>
@@ -422,8 +425,8 @@ The Nuxt integration can be enabled with the `experimental.viewTransition` optio
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   experimental: {
-    viewTransition: true
-  }
+    viewTransition: true,
+  },
 })
 ```
 
@@ -437,7 +440,7 @@ By default, view transitions are enabled for all [pages](/docs/4.x/guide/directo
 export default defineNuxtConfig({
   app: {
     // Disable view transitions globally, and opt-in on a per page basis
-    viewTransition: false
+    viewTransition: false,
   },
 })
 ```
@@ -447,7 +450,7 @@ It is possible to override the default `viewTransition` value for a page by sett
 ```vue twoslash [pages/about.vue]
 <script setup lang="ts">
 definePageMeta({
-  viewTransition: false
+  viewTransition: false,
 })
 </script>
 ```
@@ -459,8 +462,10 @@ Overriding view transitions on a per-page basis will only have an effect if you
 If you are also using Vue transitions like `pageTransition` and `layoutTransition` (see above) to achieve the same result as the new View Transitions API, then you may wish to _disable_ Vue transitions if the user's browser supports the newer, native web API. You can do this by creating `~/middleware/disable-vue-transitions.global.ts` with the following contents:
 
 ```ts
-export default defineNuxtRouteMiddleware(to => {
-  if (import.meta.server || !document.startViewTransition) { return }
+export default defineNuxtRouteMiddleware((to) => {
+  if (import.meta.server || !document.startViewTransition) {
+    return
+  }
 
   // Disable built-in Vue transitions
   to.meta.pageTransition = false

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,12 +68,12 @@ 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>
@@ -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>
@@ -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 }
@@ -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>
 
@@ -303,7 +303,7 @@ 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,
 })
 ```
 
@@ -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,7 +426,9 @@ 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>
 ```
@@ -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,7 +478,7 @@ 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>
 ```
@@ -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,8 +510,8 @@ const id = ref(null)
 
 const { data, status } = useLazyFetch('/api/user', {
   query: {
-    user_id: id
-  }
+    user_id: id,
+  },
 })
 </script>
 ```
@@ -521,16 +525,20 @@ Every time a dependency changes, the data will be fetched using the newly constr
 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
@@ -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>
 ```
@@ -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

@@ -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>

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

@@ -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,7 +100,9 @@ const handleError = () => clearError({ redirect: '/' })
 <template>
   <div>
     <h2>{{ error?.statusCode }}</h2>
-    <button @click="handleError">Clear errors</button>
+    <button @click="handleError">
+      Clear errors
+    </button>
   </div>
 </template>
 ```
@@ -112,7 +114,7 @@ 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) => {
     //
   })
@@ -167,7 +169,7 @@ 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>

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

@@ -74,10 +74,10 @@ 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 },
+    },
     // ...
-  }
+  },
 })
 ```
 

package/1.getting-started/14.layers.md

@@ -35,10 +35,13 @@ In addition, you can extend from a layer by adding the [extends](/docs/4.x/api/n
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    '../base',                     // Extend from a local layer
-    '@my-themes/awesome',          // Extend from an installed npm package
-    'github:my-themes/awesome#v1', // Extend from a git repository
-  ]
+    // Extend from a local layer
+    '../base',
+    // Extend from an installed npm package
+    '@my-themes/awesome',
+    // Extend from a git repository
+    'github:my-themes/awesome#v1',
+  ],
 })
 ```
 
@@ -48,8 +51,8 @@ You can also pass an authentication token if you are extending from a private Gi
 export default defineNuxtConfig({
   extends: [
     // per layer configuration
-    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }]
-  ]
+    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }],
+  ],
 })
 ```
 
@@ -61,13 +64,13 @@ export default defineNuxtConfig({
   extends: [
     [
       'github:my-themes/awesome',
-      { 
+      {
         meta: {
           name: 'my-awesome-theme',
         },
       },
     ],
-  ]
+  ],
 })
 ```
 
@@ -86,10 +89,13 @@ When using multiple layers, it's important to understand how they override each
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   extends: [
-    '../base',                     // Highest priority (among extends)
-    '@my-themes/awesome',          // Medium priority
-    'github:my-themes/awesome#v1', // Lower priority
-  ]
+    // Highest priority (among extends)
+    '../base',
+    // Medium priority
+    '@my-themes/awesome',
+    // Lower priority
+    'github:my-themes/awesome#v1',
+  ],
   // Your project has the highest priority
 })
 ```