Vue - Data Provider Component Patterns

Data Provider Component Patterns

<script setup lang="ts">
import { getCurrentInstance, ref, useSlots  } from "vue";

const props = defineProps<{ url: string }>();
const slots = useSlots();
let res = ref("");
let loading = ref(true);

fetch(props.url)
  .then((response) => response.json())
  .then((response) => {
    res.value = response;
    loading.value = false;
  });
getCurrentInstance().render = () =>
  slots.default?.({ res: res.value, loading: loading.value });
</script>

<template>
  <FetchJson url="url">
    <template v-slot="{ res: response, loading }">
      <div v-if="loading">
        <h1>loading...</h1>
        {{ loading }}
      </div>
      <div v-if="response && response[0]">
        <img :src="response[0].url" alt="" srcset="" />
      </div>
    </template>
  </FetchJson>
</template>