Interceptors

Here you can find the details about the usage of custom interceptors for the fetch client used for API calls.

Interceptors allow you to define custom functions that the Echo client will use during API calls. Here are some examples of what you can do with it:

• Add custom headers to all requests (e.g. X-Localization, Accept-Language, etc)

• Use telemetry or logging for requests/responses

• Modify the request payload before sending

If you are not familiar with ofetch interceptors, check this documentation first.

Configuration

Since nuxt.config.ts does not support complex TypeScript types like functions due to hydration, you have to use app.config.ts file to define your interceptors.

Here is an example of the configuration that writes a log entry for each request and response:

import type { FetchContext } from 'ofetch'
import type { ConsolaInstance } from 'consola'

export default defineAppConfig({
  echo: {
    interceptors: {
      onRequest: async (
        app: NuxtApp,
        ctx: FetchContext,
        logger: ConsolaInstance,
      ) => {
        ctx
          .options
          .headers
          .set('X-Custom-Headers', 'custom-value')

        logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
      },

      onResponse: async (
        app: NuxtApp,
        ctx: FetchContext,
        logger: ConsolaInstance,
      ) => {
        logger.debug(`[onResponse] custom interceptor (${ctx.request})`)
      },
    },
  },
})

Each interceptor receives 3 arguments:

1. app - an instance of the current NuxtApp

2. ctx - FetchContext instance for the current operation with access to request, response, and options (query, headers, etc)

3. logger - an instance of a Consola logger used by the module (will be prefixed with nuxt-laravel-echo)