Кастомный useFetch в Nuxt

Как сделать свой fetcher для вызова внешнего API в Nuxt.

При работе с внешним API часто нужны единые настройки запросов. Утилита $fetch (которую использует useFetch) намеренно не настраивается глобально — так поведение запросов остаётся предсказуемым для приложения и модулей. Nuxt позволяет создать свой экземпляр fetcher (или несколько для разных API).

Кастомный $fetch

Создайте экземпляр через плагин Nuxt. $fetch — настроенный экземпляр ofetch с поддержкой base URL сервера Nuxt и прямых вызовов при SSR (без HTTP-запросов).

Пример: API на https://api.nuxt.com, JWT в сессии (nuxt-auth-utils), при 401 — редирект на /login:

app/plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
  const { session } = useUserSession()

  const api = $fetch.create({
    baseURL: 'https://api.nuxt.com',
    onRequest ({ request, options, error }) {
      if (session.value?.token) {
        options.headers.set('Authorization', `Bearer ${session.value?.token}`)
      }
    },
    async onResponseError ({ response }) {
      if (response.status === 401) {
        await nuxtApp.runWithContext(() => navigateTo('/login'))
      }
    },
  })

  return {
    provide: {
      api,
    },
  }
})

Через useNuxtApp().$api можно вызывать API из компонентов. Оборачивайте вызов в useAsyncData, чтобы избежать двойного запроса при SSR и гидрации.

Кастомный useFetch / useAsyncData

Композабл useAPI с подставленным $api:

app/composables/useAPI.ts
import type { UseFetchOptions } from 'nuxt/app'

export function useAPI<T> (
  url: string | (() => string),
  options?: UseFetchOptions<T>,
) {
  return useFetch(url, {
    ...options,
    $fetch: useNuxtApp().$api as typeof $fetch,
  })
}

Тип ошибки можно уточнить через дженерик FetchError<CustomError>. Та же схема подходит для кастомного useAsyncData.

Прочитайте и отредактируйте живой пример в Docs > 4 X > Examples > Advanced > Use Custom Fetch Composable.