How to create your own useFetch?

Question

Vue.js

Hello! I use vue3 + vite

How in Vue you can create your own useFetch so that you can insert both fetch and axios

in NuxtJs it's implemented like this

import { VueConstructor } from 'vue'

declare type ComponentInstance = InstanceType<VueConstructor>

interface Fetch {
  (context: ComponentInstance): void | Promise<void>
}

    declare const useFetch: (callback: Fetch) => {
      fetch: () => void
      fetchState: {
        error: Error | null
        pending: boolean
        timestamp: number
      }
      $fetch: () => void
      $fetchState: {
        error: Error | null
        pending: boolean
        timestamp: number
      }
    }

using

useFetch(async () => {
      await $axios.$get(`/api/v1/admin/tariffs`).then((response: any) => {
        tariffs.value = response.data
      })
    })

Answer 1

useFetchused in nuxt to work coherently with state in SSR.
If you don't use SSR, you don't need it. And yes, as already noted, this hook has nothing to do with axios or fetch as such.