useLazyAsyncData

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

참고) Nuxt-Composable > useAsyncData

 

<!--
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: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))

watch(count, (newCount) => {
  // Because count might start out null, you won't have access
  // to its contents immediately, but you can watch it.
})
</script>

<template>
  <div>
    {{ pending ? 'Loading' : count }}
  </div>
</template>