createUseFetch with custom $fetch doesn't work

[harsh falcon]

Hi @weak whale. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

This is a known bug in Nuxt 4.4.2. The createUseFetch with a custom $fetch instance doesn't correctly apply the baseURL from the custom fetch instance. [GitHub issue]

According to a Nuxt team member, the fix has been merged but not yet released in 4.4.2. You can either:

1. Use the pre-release fix:

   npm i <https://pkg.pr.new/nuxt@34568>
   

   Or use the Nuxt nightly version.

2. Wait for the 4.4.3 patch release.

Also note that the correct syntax for combining createUseFetch with a custom $fetch is to use the function (override) mode — not a plain object — so that useNuxtApp() is called in the setup context rather than at module scope:

export const useAPI = createUseFetch(callerOptions => ({
  $fetch: useNuxtApp().$api as typeof $fetch,
  ...callerOptions,
}))

[createUseFetch docs]

Using a plain object like createUseFetch({ $fetch: useNuxtApp().$api }) would call useNuxtApp() outside of a setup context and throw an error. The function signature ensures it's called at the composable call site instead.

Your previous manual wrapper approach was valid and should still work as a temporary workaround until 4.4.3 is released.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: