httpLink is a terminating link that sends a tRPC operation to a tRPC procedure over HTTP.

httpLink supports both POST and GET requests.

httpLink imported from trpc-nuxt/client is a convenience wrapper around the original httpLink that replaces regular fetch with a $fetch from Nuxt. It also sets the default headers using useRequestHeaders.


You can import and add the httpLink to the links array as such:

import { createTRPCNuxtClient, httpLink } from 'trpc-nuxt/client'
import type { AppRouter } from '~/server/trpc/routers'

const client = createTRPCNuxtClient<AppRouter>({
  links: [
      url: '/api/trpc',

The httpLink function takes an options object that has the HTTPLinkOptions shape.

export interface HTTPLinkOptions {
  url: string;
   * Select headers to pass to `useRequestHeaders`.
  pickHeaders?: string[];
   * Add ponyfill for fetch.
  fetch?: typeof fetch;
   * Add ponyfill for AbortController
  AbortController?: typeof AbortController | null;
   * Headers to be set on outgoing requests or a callback that of said headers
   * @link
  headers?: HTTPHeaders | (() => HTTPHeaders | Promise<HTTPHeaders>);
Table of Contents