<template>
<div>
<LoadingState v-if="pending" /> <!-- shows a loading spinner -->
<div v-else>
<BlankSlate v-if="!items.length" /> <!-- shows "no items found" -->
<div v-else>
<!-- list items... -->
</div>
</div>
</div>
</template>
<script setup>
const { pending, data: items } = useLazyFetch('/api/items');
</script>
<template>
<div>
<LoadingState v-if="pending" /> <!-- shows a loading spinner -->
<div v-else>
<BlankSlate v-if="!items.length" /> <!-- shows "no items found" -->
<div v-else>
<!-- list items... -->
</div>
</div>
</div>
</template>
<script setup>
const { pending, data: items } = useLazyFetch('/api/items');
</script>