composables/create-use-async-data

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

createUseAsyncData factory function signature

createUseAsyncData is a factory function that creates a custom useAsyncData composable with pre-defined options. It has two overloads: one accepting a plain object of partial AsyncDataOptions, and one accepting a function that receives callerOptions and returns partial AsyncDataOptions. Both return a composable that works exactly like useAsyncData.

createUseAsyncData compiler macro requirement

createUseAsyncData is a compiler macro and must be used as an exported declaration in the composables/ directory or any directory scanned by the Nuxt compiler. Nuxt automatically injects de-duplication keys at build time.

createUseAsyncData plain object mode behavior

When createUseAsyncData receives a plain object with options, those options act as defaults. Callers can override any option by passing their own options when calling the resulting composable.

createUseAsyncData function mode behavior

When createUseAsyncData receives a function, that function receives the caller's options as its argument and its return value overrides the caller's options. This enforces strict options that cannot be overridden by the caller.

createUseAsyncData supported options

createUseAsyncData accepts all the same options as useAsyncData: server, lazy, immediate, default, transform, pick, getCachedData, deep, dedupe, timeout, and watch.

createUseAsyncData with getCachedData example

Example showing createUseAsyncData factory: export const useCachedData = createUseAsyncData({ getCachedData (key, nuxtApp) { return nuxtApp.payload.data[key] ?? nuxtApp.static.data[key] }, }). The resulting composable is used as: const { data: mountains } = await useCachedData('mountains', () => $fetch('https://api.nuxtjs.dev/mountains')).

createUseAsyncData with lazy and server override example

Example of plain object mode: export const useLazyData = createUseAsyncData({ lazy: true, server: false }). Usage: const { data } = await useLazyData('key', () => fetchSomeData()) uses defaults, and const { data } = await useLazyData('key', () => fetchSomeData(), { server: true }) overrides server to true.

createUseAsyncData with function mode override example

Example of function mode: export const useStrictData = createUseAsyncData(callerOptions => ({ deep: false })). This enforces deep: false and cannot be overridden by callers.

createUseAsyncData minimal version requirement

createUseAsyncData requires Nuxt version 4.2 or higher.

createUseAsyncData for custom composables

createUseAsyncData can be used to create a fully typed custom composable with pre-defined defaults, providing an alternative to using useAsyncData directly.

Give your agent this brain