useFetch Composables

useFetch wrappers are the default choice for most generated endpoints. They keep Nuxt's useFetch ergonomics and add the runtime features generated by this module.

What you get

• Typed request params from the OpenAPI operation
• Typed response data
• Local lifecycle callbacks
• Optional global callback rules
• Global headers and runtime base URL support
• pick and transform
• Optional pagination helpers
• Nuxt-native return values such as data, pending, error, refresh, execute, and status

Nuxt reference

For the full behavior of native useFetch options and return values, see the Nuxt docs:

Nuxt useFetch Documentation

Typical usage

<script setup lang="ts">
const { data: pet, pending, error, refresh } = useFetchGetPetById({
  path: { petId: 123 },
})
</script>

<template>
  <div>
    <p v-if="pending">Loading...</p>
    <p v-else-if="error">{{ error.message }}</p>
    <div v-else>
      {{ pet?.name }}
      <button @click="refresh()">Reload</button>
    </div>
  </div>
</template>

When to use it

Prefer useFetch when:

• You only need the response body
• You want the simplest API for list and detail pages
• You are building straightforward create, update, or delete flows
• You want pagination helpers without switching away from useFetch

Reach for useAsyncData instead when:

• You need headers or status codes from a Raw variant
• You want cache-key control through cacheKey
• Your flow benefits more from useAsyncData semantics than from useFetch

Request lifecycle

The generated wrapper can intercept the request and then react to the result:

useFetchGetPets({}, {
  onRequest: ({ headers, query }) => ({
    headers: {
      ...headers,
      Authorization: `Bearer ${token.value}`,
    },
    query: {
      ...query,
      locale: 'en',
    },
  }),
  onSuccess: (pets) => {
    console.log(`Loaded ${pets.length} pets`)
  },
  onError: (error) => {
    console.error(error)
  },
})

Pagination shape

With useFetch, pagination state is exposed as pagination, and navigation helpers are returned at the top level:

const { data, pagination, nextPage, prevPage, goToPage, setPerPage } = useFetchGetPets({}, {
  paginated: true,
})

This is slightly different from useAsyncData, where the navigation helpers live inside pagination.

The generated useFetch wrappers also preserve native Nuxt useFetch return values such as execute, refresh, clear, status, and error.

Related guides

• Basic usage
• Configuration options
• Shared features
• useAsyncData vs useFetch