$[client] - Nuxt Open Fetch

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

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

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

<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 the Nitro handler:

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

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

useLazy[Client]

Generated fetch composable

Custom client

NuxtOpenFetch uses Nuxt/Nitro plugins to provide fetch clients to the app/server