useLazyFetch
useLazyFetch provides a wrapper around useFetch that triggers navigation before the handler is resolved by setting the lazy option to true.
Description
By default, useFetch blocks navigation until its async handler is resolved.
useLazyFetchhas the same signature asuseFetch.
Read more in Docs > Api > Composables > Use Fetch.
Example
<template> <div v-if="pending"> Loading ... </div> <div v-else> <div v-for="post in posts"> <!-- do something --> </div> </div></template><script setup>/* Navigation will occur before fetching is complete. Handle pending and error states directly within your component's template*/const { pending, data: posts } = useLazyFetch('/api/posts')watch(posts, (newPosts) => { // Because posts starts out null, you won't have access // to its contents immediately, but you can watch it.})</script> Read more in Docs > Getting Started > Data Fetching #uselazyfetch.