- Composables
- Components
- Utils
- Advanced
- Commands
- Configuration
useLazyAsyncData
useLazyAsyncData provides a wrapper arounduseAsyncData that triggers navigation before the handler is resolved by setting thelazy option totrue.
Description
By default,useAsyncData blocks navigation until its async handler is resolved.
useLazyAsyncDatahas the same signature asuseAsyncData.
Read more inDocs > API > Composables > Use Async Data.
Example
<template> <div> {{ pending ? 'Loading' : count }} </div></template><scriptsetup>/* Navigation will occur before fetching is complete. Handle pending and error states directly within your component's template*/const {pending,data:count }=useLazyAsyncData('count', ()=>$fetch('/api/count'))watch(count, (newCount)=> {// Because count starts out null, you won't have access// to its contents immediately, but you can watch it.})</script>useLazyAsyncData is a reserved function name transformed by the compiler, so you should not name your own functionuseLazyAsyncData.