- Composables
- Components
- Utils
- Advanced
- Commands
- Configuration
useLazyFetch
useLazyFetch provides a wrapper arounduseFetch that triggers navigation before the handler is resolved by setting thelazy option totrue.
Description
By default,useFetch blocks navigation until its async handler is resolved.
useLazyFetchhas the same signature asuseFetch.
👉
Read more inDocs > API > Composables > Use Fetch.
Example
<template> <divv-if="pending"> Loading ... </div> <divv-else> <divv-for="post in posts"><!-- do something --> </div> </div></template><scriptsetup>/* Navigation will occur before fetching is complete. Handle pending and error states directly within your component's template*/const {pending,data:posts }=awaituseLazyFetch('/api/posts')watch(posts, (newPosts)=> {// Because posts might start out null, you won't have access// to its contents immediately, but you can watch it.})</script>useLazyFetch is a reserved function name transformed by the compiler, so you should not name your own functionuseLazyFetch.
👉
Read more inDocs > Getting Started > Data Fetching #uselazyfetch.

