defineUseAsyncDataAddon v4.6

Source
Define a reusable addon that extends composables created with createUseAsyncData.

defineUseAsyncDataAddon defines a reusable extension for useAsyncData composables created with createUseAsyncData.

An addon can declare custom call-site options, wrap the handler with middleware, attach custom reactive logic or extend the returned object.

Read more in defineUseFetchAddon: Addons for useAsyncData work the same way as useFetch addons.

Usage

For example, an addon adding a pollEvery option that refreshes the data on an interval:

app/composables/usePolledAsyncData.ts
const polling = defineUseAsyncDataAddon({
  setup: (options: UseAsyncDataAddonOptions<{ pollEvery?: number }>) => {
    if (import.meta.server || !options.pollEvery) { return }
    return (asyncData) => {
      const interval = setInterval(() => asyncData.refresh(), options.pollEvery)
      onScopeDispose(() => clearInterval(interval))
    }
  },
})

export const usePolledAsyncData = createUseAsyncData({ addons: [polling] })
app/pages/index.vue
<script setup lang="ts">
// refreshes the data every 30 seconds
const { data } = await usePolledAsyncData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains'),
  { pollEvery: 30_000 },
)
</script>
Addons run in the order of the addons array, with middleware from the first addon as the outermost wrapper. Listing the same addon object more than once runs it only once.

Type

Signature
function defineUseAsyncDataAddon<Opts extends Record<string, any> = {}, Ext = {}> (addon: {
  setup: (options: UseAsyncDataAddonOptions<Opts>) => ((asyncData: AsyncDataAddonInstance) => Ext | void) | void
}): UseAsyncDataAddon<Opts, Ext>