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

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,12 +84,12 @@ 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>
 ```
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/4.x/examples/routing/pages"}
 
 ## Page's Ref
 
@@ -151,4 +151,4 @@ console.log(attrs.foobar) // Outputs: 123
 </script>
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/pages"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/pages"}

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

@@ -18,7 +18,7 @@ You can use `<NuxtLayout />` component to activate the `default` layout on `app.
 </template>
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/layouts"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
 
 ## Props
 
@@ -51,7 +51,7 @@ Please note the layout name is normalized to kebab-case, so if your layout file
 </template>
 ```
 
-::read-more{to="/docs/guide/directory-structure/app/layouts"}
+::read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
 Read more about dynamic layouts.
 ::
 
@@ -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>
@@ -111,7 +116,7 @@ console.log(layoutCustomProps.title) // I am a custom layout
 
 ::
 
-:read-more{to="/docs/getting-started/transitions"}
+:read-more{to="/docs/4.x/getting-started/transitions"}
 
 ## Layout's Ref
 
@@ -139,7 +144,7 @@ function logFoo () {
 <script setup lang="ts">
 const foo = () => console.log('foo')
 defineExpose({
-  foo
+  foo,
 })
 </script>
 
@@ -153,4 +158,4 @@ defineExpose({
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/app/layouts"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}

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
@@ -249,7 +269,7 @@ When not using `external`, `<NuxtLink>` supports all Vue Router's [`RouterLink`
 - `rel`: A `rel` attribute value to apply on the link. Defaults to `"noopener noreferrer"` for external links.
 
 ::tip
-Defaults can be overwritten, see [overwriting defaults](/docs/api/components/nuxt-link#overwriting-defaults) if you want to change them.
+Defaults can be overwritten, see [overwriting defaults](/docs/4.x/api/components/nuxt-link#overwriting-defaults) if you want to change them.
 ::
 
 ## Overwriting Defaults
@@ -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`.
@@ -323,4 +343,4 @@ function defineNuxtLink(options: NuxtLinkOptions): Component {}
 - `prefetchOn`: Granular control of which prefetch strategies to apply by default.
 - `prefetchedClass`: A default class to apply to links that have been prefetched.
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/4.x/examples/routing/pages"}

package/3.api/1.components/5.nuxt-loading-indicator.md

@@ -21,7 +21,7 @@ Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/4.x/guide/directory-stru
 </template>
 ```
 
-:link-example{to="/docs/examples/routing/pages"}
+:link-example{to="/docs/4.x/examples/routing/pages"}
 
 ## Slots
 

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

@@ -29,19 +29,21 @@ 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/getting-started/error-handling"}
+:read-more{to="/docs/4.x/getting-started/error-handling"}
 
 ## Examples
 

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-app-config.md

@@ -16,4 +16,4 @@ const appConfig = useAppConfig()
 console.log(appConfig)
 ```
 
-:read-more{to="/docs/guide/directory-structure/app-config"}
+:read-more{to="/docs/4.x/guide/directory-structure/app-config"}

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>
 ```
@@ -74,7 +74,7 @@ const { data: user } = useAsyncData(
 [`useAsyncData`](/docs/4.x/api/composables/use-async-data) is a reserved function name transformed by the compiler, so you should not name your own function [`useAsyncData`](/docs/4.x/api/composables/use-async-data).
 ::
 
-:read-more{to="/docs/getting-started/data-fetching#useasyncdata"}
+:read-more{to="/docs/4.x/getting-started/data-fetching#useasyncdata"}
 
 ## Params
 
@@ -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.
@@ -107,7 +107,7 @@ The `handler` function should be **side-effect free** to ensure predictable beha
 Under the hood, `lazy: false` uses `<Suspense>` to block the loading of the route before the data has been fetched. Consider using `lazy: true` and implementing a loading state instead for a snappier user experience.
 ::
 
-::read-more{to="/docs/api/composables/use-lazy-async-data"}
+::read-more{to="/docs/4.x/api/composables/use-lazy-async-data"}
 You can use `useLazyAsyncData` to have the same behavior as `lazy: true` with `useAsyncData`.
 ::
 
@@ -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'
@@ -213,4 +213,4 @@ interface AsyncDataExecuteOptions {
 type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
 ```
 
-:read-more{to="/docs/getting-started/data-fetching"}
+:read-more{to="/docs/4.x/getting-started/data-fetching"}

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
 
@@ -172,4 +180,4 @@ export default defineEventHandler(event => {
 })
 ```
 
-:link-example{to="/docs/examples/advanced/use-cookie"}
+:link-example{to="/docs/4.x/examples/advanced/use-cookie"}

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()
 
@@ -52,4 +52,4 @@ if (error.value) {
 </script>
 ```
 
-:read-more{to="/docs/getting-started/error-handling"}
+:read-more{to="/docs/4.x/getting-started/error-handling"}