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

package/3.api/1.components/13.nuxt-time.md

@@ -56,7 +56,10 @@ The [BCP 47 language tag](https://datatracker.ietf.org/doc/html/rfc5646) for for
 
 ```vue
 <template>
-  <NuxtTime :datetime="Date.now()" locale="fr-FR" />
+  <NuxtTime
+    :datetime="Date.now()"
+    locale="fr-FR"
+  />
 </template>
 ```
 
@@ -66,8 +69,8 @@ The component accepts any property from the [Intl.DateTimeFormat](https://develo
 
 ```vue
 <template>
-  <NuxtTime 
-    :datetime="Date.now()" 
+  <NuxtTime
+    :datetime="Date.now()"
     year="numeric"
     month="long"
     day="numeric"
@@ -90,7 +93,10 @@ Enables relative time formatting using the Intl.RelativeTimeFormat API:
 ```vue
 <template>
   <!-- Shows something like "5 minutes ago" -->
-  <NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative />
+  <NuxtTime
+    :datetime="Date.now() - 5 * 60 * 1000"
+    relative
+  />
 </template>
 ```
 
@@ -100,9 +106,9 @@ When `relative` is set to `true`, the component also accepts properties from [In
 
 ```vue
 <template>
-  <NuxtTime 
-    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000" 
-    relative 
+  <NuxtTime
+    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000"
+    relative
     numeric="auto"
     style="long"
   />
@@ -125,8 +131,8 @@ This would output something like: "3 days ago" or "last Friday" depending on the
 
 ```vue
 <template>
-  <NuxtTime 
-    :datetime="Date.now()" 
+  <NuxtTime
+    :datetime="Date.now()"
     weekday="long"
     year="numeric"
     month="short"
@@ -134,7 +140,7 @@ This would output something like: "3 days ago" or "last Friday" depending on the
     hour="numeric"
     minute="numeric"
     second="numeric"
-    timeZoneName="short"
+    time-zone-name="short"
   />
 </template>
 ```
@@ -145,15 +151,24 @@ This would output something like: "3 days ago" or "last Friday" depending on the
 <template>
   <div>
     <p>
-      <NuxtTime :datetime="Date.now() - 30 * 1000" relative />
+      <NuxtTime
+        :datetime="Date.now() - 30 * 1000"
+        relative
+      />
       <!-- 30 seconds ago -->
     </p>
-    <p>  
-      <NuxtTime :datetime="Date.now() - 45 * 60 * 1000" relative />
+    <p>
+      <NuxtTime
+        :datetime="Date.now() - 45 * 60 * 1000"
+        relative
+      />
       <!-- 45 minutes ago -->
     </p>
     <p>
-      <NuxtTime :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000" relative />
+      <NuxtTime
+        :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000"
+        relative
+      />
       <!-- in 2 days -->
     </p>
   </div>
@@ -165,9 +180,21 @@ This would output something like: "3 days ago" or "last Friday" depending on the
 ```vue
 <template>
   <div>
-    <NuxtTime :datetime="Date.now()" locale="en-US" weekday="long" />
-    <NuxtTime :datetime="Date.now()" locale="fr-FR" weekday="long" />
-    <NuxtTime :datetime="Date.now()" locale="ja-JP" weekday="long" />
+    <NuxtTime
+      :datetime="Date.now()"
+      locale="en-US"
+      weekday="long"
+    />
+    <NuxtTime
+      :datetime="Date.now()"
+      locale="fr-FR"
+      weekday="long"
+    />
+    <NuxtTime
+      :datetime="Date.now()"
+      locale="ja-JP"
+      weekday="long"
+    />
   </div>
 </template>
 ```

package/3.api/1.components/2.nuxt-page.md

@@ -18,7 +18,7 @@ links:
 
 ```vue
 <template>
-  <RouterView #default="{ Component }">
+  <RouterView v-slot="{ Component }">
     <!-- Optional, when using transitions -->
     <Transition>
       <!-- Optional, when using keep-alive -->
@@ -84,7 +84,7 @@ Alternatively, `pageKey` can be passed as a `key` value via [`definePageMeta`](/
 ```vue [app/pages/my-page.vue]
 <script setup lang="ts">
 definePageMeta({
-  key: route => route.fullPath
+  key: route => route.fullPath,
 })
 </script>
 ```

package/3.api/1.components/3.nuxt-layout.md

@@ -66,8 +66,11 @@ Read more about dynamic layouts.
 ```vue [app/pages/some-page.vue]
 <template>
   <div>
-    <NuxtLayout name="custom" title="I am a custom layout">
-      <-- ... -->
+    <NuxtLayout
+      name="custom"
+      title="I am a custom layout"
+    >
+      <!-- ... -->
     </NuxtLayout>
   </div>
 </template>
@@ -93,7 +96,9 @@ console.log(layoutCustomProps.title) // I am a custom layout
 <template>
   <div>
     <NuxtLayout name="custom">
-      <template #header> Some header template content. </template>
+      <template #header>
+        Some header template content.
+      </template>
     </NuxtLayout>
   </div>
 </template>
@@ -139,7 +144,7 @@ function logFoo () {
 <script setup lang="ts">
 const foo = () => console.log('foo')
 defineExpose({
-  foo
+  foo,
 })
 </script>
 

package/3.api/1.components/4.nuxt-link.md

@@ -67,7 +67,10 @@ For static files in the `/public` directory, such as PDFs or images, use the `ex
 
 ```vue [app/pages/index.vue]
 <template>
-  <NuxtLink to="/example-report.pdf" external>
+  <NuxtLink
+    to="/example-report.pdf"
+    external
+  >
     Download Report
   </NuxtLink>
 </template>
@@ -79,7 +82,10 @@ When pointing to a different application on the same domain, using the `external
 
 ```vue [app/pages/index.vue]
 <template>
-  <NuxtLink to="/another-app" external>
+  <NuxtLink
+    to="/another-app"
+    external
+  >
     Go to Another App
   </NuxtLink>
 </template>
@@ -117,12 +123,18 @@ When you need to overwrite this behavior you can use the `rel` or `noRel` props.
   </NuxtLink>
   <!-- <a href="https://twitter.com/nuxt_js" rel="noopener noreferrer">...</a> -->
 
-  <NuxtLink to="https://discord.nuxtjs.org" rel="noopener">
+  <NuxtLink
+    to="https://discord.nuxtjs.org"
+    rel="noopener"
+  >
     Nuxt Discord
   </NuxtLink>
   <!-- <a href="https://discord.nuxtjs.org" rel="noopener">...</a> -->
 
-  <NuxtLink to="/about" target="_blank">About page</NuxtLink>
+  <NuxtLink
+    to="/about"
+    target="_blank"
+  >About page</NuxtLink>
   <!-- <a href="/about" target="_blank" rel="noopener noreferrer">...</a> -->
 </template>
 ```
@@ -131,7 +143,10 @@ A `noRel` prop can be used to prevent the default `rel` attribute from being add
 
 ```vue [app/app.vue]
 <template>
-  <NuxtLink to="https://github.com/nuxt" no-rel>
+  <NuxtLink
+    to="https://github.com/nuxt"
+    no-rel
+  >
     Nuxt GitHub
   </NuxtLink>
   <!-- <a href="https://github.com/nuxt">...</a> -->
@@ -147,8 +162,13 @@ A `noRel` prop can be used to prevent the default `rel` attribute from being add
 Nuxt automatically includes smart prefetching. That means it detects when a link is visible (by default), either in the viewport or when scrolling and prefetches the JavaScript for those pages so that they are ready when the user clicks the link. Nuxt only loads the resources when the browser isn't busy and skips prefetching if your connection is offline or if you only have 2g connection.
 
 ```vue [app/pages/index.vue]
-<NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
-<NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>
+<NuxtLink to="/about" no-prefetch>
+About page not pre-fetched
+</NuxtLink>
+
+<NuxtLink to="/about" :prefetch="false">
+About page not pre-fetched
+</NuxtLink>
 ```
 
 ### Custom Prefetch Triggers
@@ -273,12 +293,12 @@ export default defineNuxtConfig({
         activeClass: 'router-link-active',
         exactActiveClass: 'router-link-exact-active',
         prefetchedClass: undefined, // can be any valid string class name
-        trailingSlash: undefined // can be 'append' or 'remove'
+        trailingSlash: undefined, // can be 'append' or 'remove'
         prefetch: true,
-        prefetchOn: { visibility: true } 
-      }
-    }
-  }
+        prefetchOn: { visibility: true },
+      },
+    },
+  },
 })
 ```
 
@@ -286,7 +306,7 @@ export default defineNuxtConfig({
 
 You can overwrite `<NuxtLink>` defaults by creating your own link component using `defineNuxtLink`.
 
-```js [app/components/MyNuxtLink.ts]
+```ts [app/components/MyNuxtLink.ts]
 export default defineNuxtLink({
   componentName: 'MyNuxtLink',
   /* see signature below for more */
@@ -299,10 +319,10 @@ You can then use `<MyNuxtLink />` component as usual with your new defaults.
 
 ```ts
 interface NuxtLinkOptions {
-  componentName?: string;
-  externalRelAttribute?: string;
-  activeClass?: string;
-  exactActiveClass?: string;
+  componentName?: string
+  externalRelAttribute?: string
+  activeClass?: string
+  exactActiveClass?: string
   trailingSlash?: 'append' | 'remove'
   prefetch?: boolean
   prefetchedClass?: string
@@ -311,7 +331,7 @@ interface NuxtLinkOptions {
     interaction: boolean
   }>
 }
-function defineNuxtLink(options: NuxtLinkOptions): Component {}
+function defineNuxtLink (options: NuxtLinkOptions): Component {}
 ```
 
 - `componentName`: A name for the component. Default is `NuxtLink`.

package/3.api/1.components/6.nuxt-error-boundary.md

@@ -29,16 +29,18 @@ The `<NuxtErrorBoundary>` uses Vue's [`onErrorCaptured`](https://vuejs.org/api/c
 - `#error`: Specify a fallback content to display in case of error.
 
   ```vue
-    <template>
-      <NuxtErrorBoundary>
-        <!-- ... -->
-        <template #error="{ error, clearError }">
-          <p>An error occurred: {{ error }}</p>
+  <template>
+    <NuxtErrorBoundary>
+      <!-- ... -->
+      <template #error="{ error, clearError }">
+        <p>An error occurred: {{ error }}</p>
 
-          <button @click="clearError">Clear error</button>
-        </template>
-      </NuxtErrorBoundary>
-    </template>
+        <button @click="clearError">
+          Clear error
+        </button>
+      </template>
+    </NuxtErrorBoundary>
+  </template>
   ```
 
 :read-more{to="/docs/4.x/getting-started/error-handling"}

package/3.api/2.composables/on-prehydrate.md

@@ -24,8 +24,8 @@ Call `onPrehydrate` in the setup function of a Vue component (e.g., in `<script
 ## Type
 
 ```ts [Signature]
-export function onPrehydrate(callback: (el: HTMLElement) => void): void
-export function onPrehydrate(callback: string | ((el: HTMLElement) => void), key?: string): undefined | string
+export function onPrehydrate (callback: (el: HTMLElement) => void): void
+export function onPrehydrate (callback: string | ((el: HTMLElement) => void), key?: string): undefined | string
 ```
 
 ## Parameters

package/3.api/2.composables/use-async-data.md

@@ -20,7 +20,7 @@ Within your pages, components, and plugins you can use useAsyncData to get acces
 <script setup lang="ts">
 const { data, status, error, refresh, clear } = await useAsyncData(
   'mountains',
-  () => $fetch('https://api.nuxtjs.dev/mountains')
+  () => $fetch('https://api.nuxtjs.dev/mountains'),
 )
 </script>
 ```
@@ -44,11 +44,11 @@ const { data: posts } = await useAsyncData(
   'posts',
   () => $fetch('https://fakeApi.com/posts', {
     params: {
-      page: page.value
-    }
+      page: page.value,
+    },
   }), {
-    watch: [page]
-  }
+    watch: [page],
+  },
 )
 </script>
 ```
@@ -65,7 +65,7 @@ const userId = computed(() => `user-${route.params.id}`)
 // When the route changes and userId updates, the data will be automatically refetched
 const { data: user } = useAsyncData(
   userId,
-  () => fetchUserById(route.params.id)
+  () => fetchUserById(route.params.id),
 )
 </script>
 ```
@@ -91,8 +91,8 @@ The `handler` function should be **side-effect free** to ensure predictable beha
   - `transform`: a function that can be used to alter `handler` function result after resolving
   - `getCachedData`: Provide a function which returns cached data. A `null` or `undefined` return value will trigger a fetch. By default, this is:
     ```ts
-    const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating 
-      ? nuxtApp.payload.data[key] 
+    const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating
+      ? nuxtApp.payload.data[key]
       : nuxtApp.static.data[key]
     ```
     Which only caches data when `experimental.payloadExtraction` of `nuxt.config` is enabled.
@@ -169,11 +169,11 @@ If you have not fetched data on the server (for example, with `server: false`),
 ## Type
 
 ```ts [Signature]
-function useAsyncData<DataT, DataE>(
+export function useAsyncData<DataT, DataE> (
   handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
   options?: AsyncDataOptions<DataT>
 ): AsyncData<DataT, DataE>
-function useAsyncData<DataT, DataE>(
+export function useAsyncData<DataT, DataE> (
   key: MaybeRefOrGetter<string>,
   handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
   options?: AsyncDataOptions<DataT>
@@ -204,7 +204,7 @@ type AsyncData<DataT, ErrorT> = {
   clear: () => void
   error: Ref<ErrorT | undefined>
   status: Ref<AsyncDataRequestStatus>
-};
+}
 
 interface AsyncDataExecuteOptions {
   dedupe?: 'cancel' | 'defer'

package/3.api/2.composables/use-cookie.md

@@ -40,7 +40,7 @@ export interface CookieOptions<T = any> extends Omit<CookieSerializeOptions & Co
 
 export interface CookieRef<T> extends Ref<T> {}
 
-export function useCookie<T = string | null | undefined>(
+export function useCookie<T = string | null | undefined> (
   name: string,
   options?: CookieOptions<T>
 ): CookieRef<T>
@@ -84,15 +84,21 @@ The example below creates a cookie called `counter`. If the cookie doesn't exist
 <script setup lang="ts">
 const counter = useCookie('counter')
 
-counter.value = counter.value || Math.round(Math.random() * 1000)
+counter.value ||= Math.round(Math.random() * 1000)
 </script>
 
 <template>
   <div>
     <h1>Counter: {{ counter || '-' }}</h1>
-    <button @click="counter = null">reset</button>
-    <button @click="counter--">-</button>
-    <button @click="counter++">+</button>
+    <button @click="counter = null">
+      reset
+    </button>
+    <button @click="counter--">
+      -
+    </button>
+    <button @click="counter++">
+      +
+    </button>
   </div>
 </template>
 ```
@@ -105,8 +111,8 @@ const user = useCookie(
   'userInfo',
   {
     default: () => ({ score: -1 }),
-    watch: false
-  }
+    watch: false,
+  },
 )
 
 if (user.value) {
@@ -128,20 +134,18 @@ const list = useCookie(
   'list',
   {
     default: () => [],
-    watch: 'shallow'
-  }
+    watch: 'shallow',
+  },
 )
 
-function add() {
+function add () {
   list.value?.push(Math.round(Math.random() * 1000))
   // list cookie won't be updated with this change
 }
 
-function save() {
-  if (list.value) {
-    // the actual `list` cookie will be updated
-    list.value = [...list.value]
-  }
+function save () {
+  // the actual `list` cookie will be updated
+  list.value &&= [...list.value]
 }
 </script>
 
@@ -149,8 +153,12 @@ function save() {
   <div>
     <h1>List</h1>
     <pre>{{ list }}</pre>
-    <button @click="add">Add</button>
-    <button @click="save">Save</button>
+    <button @click="add">
+      Add
+    </button>
+    <button @click="save">
+      Save
+    </button>
   </div>
 </template>
 ```
@@ -160,7 +168,7 @@ function save() {
 You can use `getCookie` and `setCookie` from [`h3`](https://github.com/h3js/h3) package to set cookies in server API routes.
 
 ```ts [server/api/counter.ts]
-export default defineEventHandler(event => {
+export default defineEventHandler((event) => {
   // Read counter cookie
   let counter = getCookie(event, 'counter') || 0
 

package/3.api/2.composables/use-error.md

@@ -42,7 +42,7 @@ Returns a `Ref` containing the current Nuxt error (or `undefined` if there is no
 
 ## Example
 
-```ts
+```vue
 <script setup lang="ts">
 const error = useError()
 

package/3.api/2.composables/use-fetch.md

@@ -20,7 +20,7 @@ It automatically generates a key based on URL and fetch options, provides type h
 ```vue [app/pages/modules.vue]
 <script setup lang="ts">
 const { data, status, error, refresh, clear } = await useFetch('/api/modules', {
-  pick: ['title']
+  pick: ['title'],
 })
 </script>
 ```
@@ -38,7 +38,7 @@ Using the `query` option, you can add search parameters to your query. This opti
 ```ts
 const param1 = ref('value1')
 const { data, status, error, refresh } = await useFetch('/api/modules', {
-  query: { param1, param2: 'value2' }
+  query: { param1, param2: 'value2' },
 })
 ```
 
@@ -48,21 +48,21 @@ You can also use [interceptors](https://github.com/unjs/ofetch#%EF%B8%8F-interce
 
 ```ts
 const { data, status, error, refresh, clear } = await useFetch('/api/auth/login', {
-  onRequest({ request, options }) {
+  onRequest ({ request, options }) {
     // Set the request headers
     // note that this relies on ofetch >= 1.4.0 - you may need to refresh your lockfile
     options.headers.set('Authorization', '...')
   },
-  onRequestError({ request, options, error }) {
+  onRequestError ({ request, options, error }) {
     // Handle the request errors
   },
-  onResponse({ request, response, options }) {
+  onResponse ({ request, response, options }) {
     // Process the response data
     localStorage.setItem('token', response._data.token)
   },
-  onResponseError({ request, response, options }) {
+  onResponseError ({ request, response, options }) {
     // Handle the response errors
-  }
+  },
 })
 ```
 
@@ -105,7 +105,7 @@ Fetch options can be provided as reactive, supporting `computed`, `ref` and [com
 ```ts
 const searchQuery = ref('initial')
 const { data } = await useFetch('/api/search', {
-  query: { q: searchQuery }
+  query: { q: searchQuery },
 })
 // triggers a refetch: /api/search?q=new%20search
 searchQuery.value = 'new search'
@@ -117,7 +117,7 @@ If needed, you can opt out of this behavior using `watch: false`:
 const searchQuery = ref('initial')
 const { data } = await useFetch('/api/search', {
   query: { q: searchQuery },
-  watch: false
+  watch: false,
 })
 // does not trigger a refetch
 searchQuery.value = 'new search'
@@ -126,7 +126,7 @@ searchQuery.value = 'new search'
 ## Type
 
 ```ts [Signature]
-function useFetch<DataT, ErrorT>(
+export function useFetch<DataT, ErrorT> (
   url: string | Request | Ref<string | Request> | (() => string | Request),
   options?: UseFetchOptions<DataT>
 ): Promise<AsyncData<DataT, ErrorT>>
@@ -210,9 +210,9 @@ All fetch options can be given a `computed` or `ref` value. These will be watche
 **getCachedData default:**
 
 ```ts
-const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating 
- ? nuxtApp.payload.data[key] 
- : nuxtApp.static.data[key]
+const getDefaultCachedData = (key, nuxtApp, ctx) => nuxtApp.isHydrating
+  ? nuxtApp.payload.data[key]
+  : nuxtApp.static.data[key]
 ```
 This only caches data when `experimental.payloadExtraction` in `nuxt.config` is enabled.
 

package/3.api/2.composables/use-head-safe.md

@@ -17,11 +17,11 @@ You can pass all the same values as [`useHead`](/docs/4.x/api/composables/use-he
 ```ts
 useHeadSafe({
   script: [
-    { id: 'xss-script', innerHTML: 'alert("xss")' }
+    { id: 'xss-script', innerHTML: 'alert("xss")' },
   ],
   meta: [
-    { 'http-equiv': 'refresh', content: '0;javascript:alert(1)' }
-  ]
+    { 'http-equiv': 'refresh', 'content': '0;javascript:alert(1)' },
+  ],
 })
 // Will safely generate
 // <script id="xss-script"></script>
@@ -34,8 +34,8 @@ Read more on the `Unhead` documentation.
 
 ## Type
 
-```ts
-useHeadSafe(input: MaybeComputedRef<HeadSafe>): void
+```ts [Signature]
+export function useHeadSafe (input: MaybeComputedRef<HeadSafe>): void
 ```
 
 The list of allowed values is:

package/3.api/2.composables/use-head.md

@@ -14,8 +14,8 @@ The [`useHead`](/docs/4.x/api/composables/use-head) composable function allows y
 
 ## Type
 
-```ts
-useHead(meta: MaybeComputedRef<MetaObject>): void
+```ts [Signature]
+export function useHead (meta: MaybeComputedRef<MetaObject>): void
 ```
 
 Below are the non-reactive types for [`useHead`](/docs/4.x/api/composables/use-head) .

package/3.api/2.composables/use-hydration.md

@@ -47,9 +47,9 @@ export default defineNuxtPlugin((nuxtApp) => {
   const myStore = new MyStore()
 
   useHydration(
-    'myStoreState', 
-    () => myStore.getState(), 
-    (data) => myStore.setState(data)
+    'myStoreState',
+    () => myStore.getState(),
+    data => myStore.setState(data),
   )
 })
 ```
@@ -57,8 +57,8 @@ export default defineNuxtPlugin((nuxtApp) => {
 
 ## Type
 
-```ts [signature]
-useHydration <T> (key: string, get: () => T, set: (value: T) => void) => void
+```ts [Signature]
+export function useHydration<T> (key: string, get: () => T, set: (value: T) => void): void
 ```
 
 ## Parameters