composables/use-lazy-async-data

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useLazyAsyncData composable wrapper

useLazyAsyncData is a wrapper around useAsyncData that triggers navigation immediately by automatically setting the lazy option to true. By default, useAsyncData blocks navigation until its async handler is resolved. useLazyAsyncData allows navigation to occur immediately while data fetching continues in the background.

useLazyAsyncData signature and overloads

useLazyAsyncData has two function overloads: 1. export function useLazyAsyncData<ResT, DataE = unknown, DataT = ResT> (handler: AsyncDataHandler<ResT>, options?: AsyncDataOptions<ResT, DataT>): AsyncData<DataT, DataE> & Promise<AsyncData<DataT, DataE>> 2. export function useLazyAsyncData<ResT, DataE = unknown, DataT = ResT> (key: MaybeRefOrGetter<string>, handler: AsyncDataHandler<ResT>, options?: AsyncDataOptions<ResT, DataT>): AsyncData<DataT, DataE> & Promise<AsyncData<DataT, DataE>> Both return AsyncData<DataT, DataE> & Promise<AsyncData<DataT, DataE>>.

useLazyAsyncData accepts same parameters as useAsyncData

useLazyAsyncData accepts the same parameters as useAsyncData, with the lazy option automatically set to true. Refer to useAsyncData parameters documentation for full details.

useLazyAsyncData returns same values as useAsyncData

useLazyAsyncData returns the same values as useAsyncData. Refer to useAsyncData return values documentation for full details.

useLazyAsyncData compiler reserved function name

useLazyAsyncData is a reserved function name transformed by the compiler. You should not name your own function useLazyAsyncData.

useLazyAsyncData basic usage example

const { status, data: posts } = await useLazyAsyncData('posts', () => $fetch('/api/posts')) This example shows useLazyAsyncData fetching posts from an API endpoint. The composable returns status and data properties that should be checked in the template before rendering to handle loading and error states.

useLazyAsyncData with watch example

const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count')) watch(count, (newCount) => { // Because count might start out null, you won't have access // to its contents immediately, but you can watch it. }) This example demonstrates using watch with useLazyAsyncData. Since data might start null, watch can be used to respond to changes as the fetch completes.

useLazyAsyncData template pattern with status checks

When using useLazyAsyncData, always check status values in the template before accessing the data. Use status === 'pending' to show loading state, status === 'error' to show error state, and handle the successful data case when status is neither pending nor error.

Give your agent this brain