useFetch

Reactive Fetch API provides the ability to abort requests, intercept requests before they are fired, automatically refetch requests when the url changes, and create your own useFetch with predefined options.

useFetch.vue
<script setup>
  import { useFetch } from '@vueuse/core'
  const { data, isFetching } = useFetch('https://pokeapi.co/api/v2/pokemon/pikachu')
  const name = computed(() => JSON.parse(data.value)?.name)
</script>

<template>
  <span v-if="isFetching">
    Loading Data...
  </span>
  <span v-else>
    {{ name }}
  </span>
<template>