useLazyFetch

useFetch 는 기본적으로 비동기 처리기가 해결될 때까지 탐색을 차단한다. lazy 옵션을 true 로 설정하여 핸들러가 리졸브되기 전에 탐색을 시도할 수 있는 useFetch 래퍼를 제공한다.

참고) Nuxt-Composable > useFetch

 

Example

<!--
pages/index.vue
-->

<script setup lang="ts">
/* Navigation will occur before fetching is complete.
  Handle pending and error states directly within your component's template
*/
const { pending, data: posts } = await useLazyFetch('/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>

<template>
  <div v-if="pending">
    Loading ...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- do something -->
    </div>
  </div>
</template>

참고) Nuxt-개요 > 데이터 가져오기