Advanced
Custom client
NuxtOpenFetch uses Nuxt/Nitro plugins to provide fetch clients to the app/server
If you need to add non-serializable fetch options which can't be specified in the Nuxt config, such as signal etc, you can create custom Nuxt plugin (and Nitro plugin if you use client inside the server handler).
If you need to hook into the request/response lifecycle, you can use the provided Nuxt hooks instead.
First you need to disable the default plugin:
nuxt.config.ts
export default defineNuxtConfig({
openFetch: {
disableNuxtPlugin: true,
// ...
},
})
For example if you need to add an Abort Signal to the fetch client, you can create a Nuxt plugin like this:
plugins/openFetch.ts
export default defineNuxtPlugin({
enforce: 'pre', // clients will be ready to use by other plugins, Pinia stores etc.
setup(nuxtApp) {
const clients = useRuntimeConfig().public.openFetch
const localFetch = useRequestFetch()
const abortController = new AbortController()
return {
provide: Object.entries(clients).reduce((acc, [name, options]) => ({
...acc,
[name]: createOpenFetch(localOptions => ({
...options,
...localOptions,
signal: abortController.signal,
}), localFetch, name, nuxtApp.hooks)
}), {
abortController
})
}
}
})
Same way you can disable the Nitro plugin and provide your own fetch client:
nuxt.config.ts
export default defineNuxtConfig({
openFetch: {
disableNitroPlugin: true,
// ...
},
})
server/plugins/openFetch.ts
import { defineNitroPlugin, useRuntimeConfig } from '#imports'
import { createOpenFetch } from './fetch'
export default defineNitroPlugin((nitroApp) => {
const clients = useRuntimeConfig().public.openFetch
Object.entries(clients).forEach(([name, client]) => {
nitroApp[`$${name}`] = createOpenFetch(client, nitroApp.localFetch, name, nitroApp.hooks)
})
})