Custom useFetch wrapper for Nuxt

Published: Mar 27, 2024

I am working on an automated web scraping project, originally for my class project but keeping it open-source. It’s called Scraps.

I decided to use Nuxt because I am doing server-side work. Nuxt’s useFetch composable is pretty cool. One great feature it has is that it’s able to autocomplete your API calls from Nitro (it’s backend framework) and automatically infer the type of the response. If you want to write a custom wrapper for it, however, you lose that feature, which is a bummer.

This has come up before. One provided solution was to replicating the type of useFetch like:

- export function useCustomFetch<T> (url: 
+ export const useCustomFetch: typeof useFetch = function useCustomFetch<T> (url: 

However, now you can’t customize the parameters given to useFetch like options. In my case, I wanted to add alert and suppress properties to the options. I spent a bit of time looking into how Nuxt types are defined and found a solution that works well. I wish it was a bit cleaner and had less type gymnastics, but I believe this is close to lowest amount of changes to make it work.

You probably want to take the type declarations out and put them in a separate .d.ts file, but I will keep them in the same file here so you can easily copy.

Cheers!