@nuxt/docs 0.0.0 → 3.17.0

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

@@ -0,0 +1,212 @@
+---
+title: 'useAsyncData'
+description: useAsyncData provides access to data that resolves asynchronously in an SSR-friendly composable.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/asyncData.ts
+    size: xs
+---
+
+Within your pages, components, and plugins you can use useAsyncData to get access to data that resolves asynchronously.
+
+::note
+[`useAsyncData`](/docs/api/composables/use-async-data) is a composable meant to be called directly in the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context). It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client **without re-fetching the data on client side** when the page hydrates.
+::
+
+## Usage
+
+```vue [pages/index.vue]
+<script setup lang="ts">
+const { data, status, error, refresh, clear } = await useAsyncData(
+  'mountains',
+  () => $fetch('https://api.nuxtjs.dev/mountains')
+)
+</script>
+```
+
+::warning
+If you're using a custom useAsyncData wrapper, do not await it in the composable, as that can cause unexpected behavior. Please follow [this recipe](/docs/guide/recipes/custom-usefetch#custom-usefetch) for more information on how to make a custom async data fetcher.
+::
+
+::note
+`data`, `status` and `error` are Vue refs and they should be accessed with `.value` when used within the `<script setup>`, while `refresh`/`execute` and `clear` are plain functions.
+::
+
+### Watch Params
+
+The built-in `watch` option allows automatically rerunning the fetcher function when any changes are detected.
+
+```vue [pages/index.vue]
+<script setup lang="ts">
+const page = ref(1)
+const { data: posts } = await useAsyncData(
+  'posts',
+  () => $fetch('https://fakeApi.com/posts', {
+    params: {
+      page: page.value
+    }
+  }), {
+    watch: [page]
+  }
+)
+</script>
+```
+
+### Reactive Keys
+
+You can use a computed ref, plain ref or a getter function as the key, allowing for dynamic data fetching that automatically updates when the key changes:
+
+```vue [pages/[id\\].vue]
+<script setup lang="ts">
+const route = useRoute()
+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)
+)
+</script>
+```
+
+::warning
+[`useAsyncData`](/docs/api/composables/use-async-data) is a reserved function name transformed by the compiler, so you should not name your own function [`useAsyncData`](/docs/api/composables/use-async-data).
+::
+
+:read-more{to="/docs/getting-started/data-fetching#useasyncdata"}
+
+## Params
+
+- `key`: a unique key to ensure that data fetching can be properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you.
+- `handler`: an asynchronous function that must return a truthy value (for example, it should not be `undefined` or `null`) or the request may be duplicated on the client side.
+::warning
+The `handler` function should be **side-effect free** to ensure predictable behavior during SSR and CSR hydration. If you need to trigger side effects, use the [`callOnce`](/docs/api/utils/call-once) utility to do so.
+::
+- `options`:
+  - `server`: whether to fetch the data on the server (defaults to `true`)
+  - `lazy`: whether to resolve the async function after loading the route, instead of blocking client-side navigation (defaults to `false`)
+  - `immediate`: when set to `false`, will prevent the request from firing immediately. (defaults to `true`)
+  - `default`: a factory function to set the default value of the `data`, before the async function resolves - useful with the `lazy: true` or `immediate: false` option
+  - `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] 
+      : nuxtApp.static.data[key]
+    ```
+    Which only caches data when `experimental.payloadExtraction` of `nuxt.config` is enabled.
+  - `pick`: only pick specified keys in this array from the `handler` function result
+  - `watch`: watch reactive sources to auto-refresh
+  - `deep`: return data in a deep ref object (it is `true` by default). It can be set to `false` to return data in a shallow ref object, which can improve performance if your data does not need to be deeply reactive.
+  - `dedupe`: avoid fetching same key more than once at a time (defaults to `cancel`). Possible options:
+    - `cancel` - cancels existing requests when a new one is made
+    - `defer` - does not make new requests at all if there is a pending request
+
+::note
+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"}
+You can use `useLazyAsyncData` to have the same behavior as `lazy: true` with `useAsyncData`.
+::
+
+:video-accordion{title="Watch a video from Alexander Lichter about client-side caching with getCachedData" videoId="aQPR0xn-MMk"}
+
+### Shared State and Option Consistency
+
+When using the same key for multiple `useAsyncData` calls, they will share the same `data`, `error` and `status` refs. This ensures consistency across components but requires option consistency.
+
+The following options **must be consistent** across all calls with the same key:
+- `handler` function
+- `deep` option
+- `transform` function
+- `pick` array
+- `getCachedData` function
+- `default` value
+
+The following options **can differ** without triggering warnings:
+- `server`
+- `lazy`
+- `immediate`
+- `dedupe`
+- `watch`
+
+```ts
+// ❌ This will trigger a development warning
+const { data: users1 } = useAsyncData('users', () => $fetch('/api/users'), { deep: false })
+const { data: users2 } = useAsyncData('users', () => $fetch('/api/users'), { deep: true })
+
+// ✅ This is allowed
+const { data: users1 } = useAsyncData('users', () => $fetch('/api/users'), { immediate: true })
+const { data: users2 } = useAsyncData('users', () => $fetch('/api/users'), { immediate: false })
+```
+
+## Return Values
+
+- `data`: the result of the asynchronous function that is passed in.
+- `refresh`/`execute`: a function that can be used to refresh the data returned by the `handler` function.
+- `error`: an error object if the data fetching failed.
+- `status`: a string indicating the status of the data request:
+  - `idle`: when the request has not started, such as:
+    - when `execute` has not yet been called and `{ immediate: false }` is set
+    - when rendering HTML on the server and `{ server: false }` is set
+  - `pending`: the request is in progress
+  - `success`: the request has completed successfully
+  - `error`: the request has failed
+- `clear`: a function which will set `data` to `undefined`, set `error` to `null`, set `status` to `'idle'`, and mark any currently pending requests as cancelled.
+
+By default, Nuxt waits until a `refresh` is finished before it can be executed again.
+
+::note
+If you have not fetched data on the server (for example, with `server: false`), then the data _will not_ be fetched until hydration completes. This means even if you await [`useAsyncData`](/docs/api/composables/use-async-data) on the client side, `data` will remain `null` within `<script setup>`.
+::
+
+## Type
+
+```ts [Signature]
+function useAsyncData<DataT, DataE>(
+  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
+  options?: AsyncDataOptions<DataT>
+): AsyncData<DataT, DataE>
+function useAsyncData<DataT, DataE>(
+  key: string | Ref<string> | ComputedRef<string>,
+  handler: (nuxtApp?: NuxtApp) => Promise<DataT>,
+  options?: AsyncDataOptions<DataT>
+): Promise<AsyncData<DataT, DataE>>
+
+type AsyncDataOptions<DataT> = {
+  server?: boolean
+  lazy?: boolean
+  immediate?: boolean
+  deep?: boolean
+  dedupe?: 'cancel' | 'defer'
+  default?: () => DataT | Ref<DataT> | null
+  transform?: (input: DataT) => DataT | Promise<DataT>
+  pick?: string[]
+  watch?: WatchSource[] | false
+  getCachedData?: (key: string, nuxtApp: NuxtApp, ctx: AsyncDataRequestContext) => DataT | undefined
+}
+
+type AsyncDataRequestContext = {
+  /** The reason for this data request */
+  cause: 'initial' | 'refresh:manual' | 'refresh:hook' | 'watch'
+}
+
+type AsyncData<DataT, ErrorT> = {
+  data: Ref<DataT | null>
+  refresh: (opts?: AsyncDataExecuteOptions) => Promise<void>
+  execute: (opts?: AsyncDataExecuteOptions) => Promise<void>
+  clear: () => void
+  error: Ref<ErrorT | null>
+  status: Ref<AsyncDataRequestStatus>
+};
+
+interface AsyncDataExecuteOptions {
+  dedupe?: 'cancel' | 'defer'
+}
+
+type AsyncDataRequestStatus = 'idle' | 'pending' | 'success' | 'error'
+```
+
+:read-more{to="/docs/getting-started/data-fetching"}

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

@@ -0,0 +1,233 @@
+---
+title: 'useCookie'
+description: useCookie is an SSR-friendly composable to read and write cookies.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/cookie.ts
+    size: xs
+---
+
+Within your pages, components and plugins you can use `useCookie`, an SSR-friendly composable to read and write cookies.
+
+```ts
+const cookie = useCookie(name, options)
+```
+
+::note
+`useCookie` only works in the [Nuxt context](/docs/guide/going-further/nuxt-app#the-nuxt-context).
+::
+
+::tip
+`useCookie` ref will automatically serialize and deserialize cookie value to JSON.
+::
+
+## Example
+
+The example below creates a cookie called `counter`. If the cookie doesn't exist, it is initially set to a random value. Whenever we update the `counter` variable, the cookie will be updated accordingly.
+
+```vue [app.vue]
+<script setup lang="ts">
+const counter = useCookie('counter')
+
+counter.value = 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>
+  </div>
+</template>
+```
+
+:link-example{to="/docs/examples/advanced/use-cookie"}
+
+::note
+Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/api/utils/refresh-cookie).
+::
+
+## Options
+
+Cookie composable accepts several options which let you modify the behavior of cookies.
+
+Most of the options will be directly passed to the [cookie](https://github.com/jshttp/cookie) package.
+
+### `maxAge` / `expires`
+
+Use these options to set the expiration of the cookie.
+
+`maxAge`: Specifies the `number` (in seconds) to be the value for the [`Max-Age` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.2).
+The given number will be converted to an integer by rounding down. By default, no maximum age is set.
+
+`expires`: Specifies the `Date` object to be the value for the [`Expires` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.1).
+By default, no expiration is set. Most clients will consider this a "non-persistent cookie" and will delete it on a condition like exiting a web browser application.
+
+::note
+The [cookie storage model specification](https://tools.ietf.org/html/rfc6265#section-5.3) states that if both `expires` and `maxAge` is set, then `maxAge` takes precedence, but not all clients may obey this, so if both are set, they should point to the same date and time!
+::
+
+::note
+If neither of `expires` and `maxAge` is set, the cookie will be session-only and removed when the user closes their browser.
+::
+
+### `httpOnly`
+
+Specifies the `boolean` value for the [`HttpOnly` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.6). When truthy, the `HttpOnly` attribute is set; otherwise it is not. By default, the `HttpOnly` attribute is not set.
+
+::warning
+Be careful when setting this to `true`, as compliant clients will not allow client-side JavaScript to see the cookie in `document.cookie`.
+::
+
+### `secure`
+
+Specifies the `boolean` value for the [`Secure` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.5). When truthy, the `Secure` attribute is set; otherwise it is not. By default, the `Secure` attribute is not set.
+
+::warning
+Be careful when setting this to `true`, as compliant clients will not send the cookie back to the server in the future if the browser does not have an HTTPS connection. This can lead to hydration errors.
+::
+
+### `partitioned`
+
+Specifies the `boolean` value for the [`Partitioned` `Set-Cookie`](https://datatracker.ietf.org/doc/html/draft-cutler-httpbis-partitioned-cookies#section-2.1) attribute. When truthy, the `Partitioned` attribute is set, otherwise it is not. By default, the `Partitioned` attribute is not set.
+
+::note
+This is an attribute that has not yet been fully standardized, and may change in the future.
+This also means many clients may ignore this attribute until they understand it.
+
+More information can be found in the [proposal](https://github.com/privacycg/CHIPS).
+::
+
+### `domain`
+
+Specifies the value for the [`Domain` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.3). By default, no domain is set, and most clients will consider applying the cookie only to the current domain.
+
+### `path`
+
+Specifies the value for the [`Path` `Set-Cookie` attribute](https://tools.ietf.org/html/rfc6265#section-5.2.4). By default, the path is considered the ["default path"](https://tools.ietf.org/html/rfc6265#section-5.1.4).
+
+### `sameSite`
+
+Specifies the `boolean` or `string` value for the [`SameSite` `Set-Cookie` attribute](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1.2.7).
+
+- `true` will set the `SameSite` attribute to `Strict` for strict same-site enforcement.
+- `false` will not set the `SameSite` attribute.
+- `'lax'` will set the `SameSite` attribute to `Lax` for lax same-site enforcement.
+- `'none'` will set the `SameSite` attribute to `None` for an explicit cross-site cookie.
+- `'strict'` will set the `SameSite` attribute to `Strict` for strict same-site enforcement.
+
+More information about the different enforcement levels can be found in [the specification](https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-03#section-4.1.2.7).
+
+### `encode`
+
+Specifies a function that will be used to encode a cookie's value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to encode a value into a string suited for a cookie's value.
+
+The default encoder is the `JSON.stringify` + `encodeURIComponent`.
+
+### `decode`
+
+Specifies a function that will be used to decode a cookie's value. Since the value of a cookie has a limited character set (and must be a simple string), this function can be used to decode a previously encoded cookie value into a JavaScript string or other object.
+
+The default decoder is `decodeURIComponent` + [destr](https://github.com/unjs/destr).
+
+::note
+If an error is thrown from this function, the original, non-decoded cookie value will be returned as the cookie's value.
+::
+
+### `default`
+
+Specifies a function that returns the cookie's default value. The function can also return a `Ref`.
+
+### `readonly`
+
+Allows _accessing_ a cookie value without the ability to set it.
+
+### `watch`
+
+Specifies the `boolean` or `string` value for [watch](https://vuejs.org/api/reactivity-core.html#watch) cookie ref data.
+
+- `true` - Will watch cookie ref data changes and its nested properties (default).
+- `shallow` - Will watch cookie ref data changes for only top level properties
+- `false` - Will not watch cookie ref data changes.
+
+::note
+Refresh `useCookie` values manually when a cookie has changed with [`refreshCookie`](/docs/api/utils/refresh-cookie).
+::
+
+**Example 1:**
+
+```vue
+<script setup lang="ts">
+const user = useCookie(
+  'userInfo',
+  {
+    default: () => ({ score: -1 }),
+    watch: false
+  }
+)
+
+if (user.value && user.value !== null) {
+  user.value.score++; // userInfo cookie not update with this change
+}
+</script>
+
+<template>
+  <div>User score: {{ user?.score }}</div>
+</template>
+```
+
+**Example 2:**
+
+```vue
+<script setup lang="ts">
+const list = useCookie(
+  'list',
+  {
+    default: () => [],
+    watch: 'shallow'
+  }
+)
+
+function add() {
+  list.value?.push(Math.round(Math.random() * 1000))
+  // list cookie not update with this change
+}
+
+function save() {
+  if (list.value && list.value !== null) {
+    list.value = [...list.value]
+    // list cookie update with this change
+  }
+}
+</script>
+
+<template>
+  <div>
+    <h1>List</h1>
+    <pre>{{ list }}</pre>
+    <button @click="add">Add</button>
+    <button @click="save">Save</button>
+  </div>
+</template>
+```
+
+## Cookies in API Routes
+
+You can use `getCookie` and `setCookie` from [`h3`](https://github.com/unjs/h3) package to set cookies in server API routes.
+
+```ts [server/api/counter.ts]
+export default defineEventHandler(event => {
+  // Read counter cookie
+  let counter = getCookie(event, 'counter') || 0
+
+  // Increase counter cookie by 1
+  setCookie(event, 'counter', ++counter)
+
+  // Send JSON response
+  return { counter }
+})
+```
+
+:link-example{to="/docs/examples/advanced/use-cookie"}

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

@@ -0,0 +1,32 @@
+---
+title: "useError"
+description: useError composable returns the global Nuxt error that is being handled.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/error.ts
+    size: xs
+---
+
+The composable returns the global Nuxt error that is being handled and it is available on both client and server.
+
+```ts
+const error = useError()
+```
+
+`useError` sets an error in the state and creates a reactive as well as SSR-friendly global Nuxt error across components.
+
+Nuxt errors have the following properties:
+
+```ts
+interface {
+  //  HTTP response status code
+  statusCode: number
+  // HTTP response status message
+  statusMessage: string
+  // Error message
+  message: string
+}
+```
+
+:read-more{to="/docs/getting-started/error-handling"}