A composable wrapper around Nuxt $fetch that centralizes API configuration, authentication headers, and error handling.

use-api.ts

export function useApi() {
  const config = useRuntimeConfig()
  const token = useCookie('token')

  return async function apiFetch<T>(url: string, opts: any = {}): Promise<T> {
    try {
      return await $fetch<T>(url, {
        baseURL: config.public.apiBase,
        headers: {
          Authorization: token.value ? `Bearer ${token.value}` : undefined,
        },
        ...opts,
      })
    } catch (err: any) {
      throw {
        status: err?.response?.status,
        message: err?.response?._data?.message || err.message,
      }
    }
  }
}