$[client]

Clients are generated for each OpenAPI client specified in the openFetch section of Nuxt config and provide a convenient wrapper around $fetch.

Usage

You can access clients from the Vue context using useNuxtApp().

It has the same API as Nuxt's $fetch util with an additional path option, which is used to replace params in the pathname. For other options, see additional parameters.

<script setup lang="ts">
const { $pets } = useNuxtApp()

const data = await $pets('/pet/{petId}', {
  path: {
    petId: 12
  }
})
</script>

<template>
  <h1>{{ data?.name }}</h1>
</template>

or inside a Nitro handler:

export default defineEventHandler(async () => {
  const { $pets } = useNitroApp()

  return await $pets('/pet/{petId}', {
    path: {
      petId: 12
    }
  })
})

Additional parameters

In addition to the $fetch options, the client accepts the following additional parameters:

path

• Type: Record<string, string | number>

The exact type of the path is generated from the OpenAPI schema for type safety and autocompletion. This option lets you replace the path parameters in the endpoint URL with the actual values.

accept

• Type: MediaType | MediaType[]

The exact type of the accept option is generated from the available response types in the OpenAPI schema. This option allows you to set the Accept header for the request and typeset the result type accordingly.

For more examples, see Response types.

bodySerializer

• Type: (body: RequestBody) => any

Allows modifying the body before it gets used in the request. Mostly needed when working with multipart/form-data:

const { $pets } = useNuxtApp()

const data = await $pets('/pet', {
  method: 'POST',
  body: {
    name: 'Doggie',
    photoUrls: []
  },
  bodySerializer(body) {
    const formData = new FormData()
    for (const [key, value] of Object.entries(body)) {
      formData.append(key, String(value))
    }
    return formData
  }
})