Losing type inference when using custom fetch

[Amar-Gill]

Describe the bug The autocompletion provided for endpoints when using useFetch is missing when using a custom useFetch, following the example given in Nuxt Docs.

Expected behavior Autocompleted endpoints when typing the url for the custom fetch composable, just as for the base composable.

Screenshots Custom fetch, no autocomplete:

Environnement infos

• Operating System: Darwin
• Node Version: v20.3.0
• Nuxt Version: 3.8.1
• CLI Version: 3.9.1
• Nitro Version: 2.7.2
• Package Manager: pnpm@8.5.0
• Builder: -
• User Config: devtools, modules, runtimeConfig, ui
• Runtime Modules: @nuxt/ui@2.10.0, nuxt-prepare@0.2.1, nuxt-typed-router@3.3.3, @vueuse/nuxt@10.6.0
• Build Modules: -

Your pages folder structure

pages
├── index.vue
├── login.vue
├── profile.vue
├── proj
│   ├── [project-id]
│   │   ├── reports.vue
│   │   └── summary.vue
│   └── new.vue
└── report
    └── [report-id].vue

4 directories, 7 files

Your nuxt.config.ts

  modules: ['@nuxt/ui', 'nuxt-prepare', 'nuxt-typed-router', '@vueuse/nuxt'],

My Specific Custom useFetch Implementation (based on official nuxt.com example)

import type { UseFetchOptions } from 'nuxt/app';
import { defu } from 'defu';

export function useProtectedFetch<T>(
  url: string | (() => string),
  options: UseFetchOptions<T> = {}
) {
  const auth = useAuthState();

  const defaults: UseFetchOptions<T> = {
    headers: {
      ...options?.headers,
      Authorization: `Bearer ${auth.value?.accessToken}`,
    },

    async onResponseError(_ctx) {
      const status = _ctx.response.status;

      if (status === 401) {
        await navigateTo('/login');
      }
    },
  };

  // for nice deep defaults, please use unjs/defu
  const params = defu(options, defaults);

  return useFetch(url, params);
}

[Amar-Gill]

Um apologies this is not in the scope of typed-router 😅