Setup
Quick start
100% typed OpenAPI fetch for Nuxt
NuxtOpenFetch creates zero-overhead wrappers around $fetch and useFetch, with types generated from your OpenAPI schema.
It uses awesome openapi-typescript generator under the hood.
Installation
Add nuxt-open-fetch to your project's dev dependencies:
pnpm add nuxt-open-fetch -D
yarn add --dev nuxt-open-fetch
npm install nuxt-open-fetch -D
bun add -d nuxt-open-fetch
Configuration
Then, add nuxt-open-fetch to the modules section of your Nuxt configuration:
nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-open-fetch'],
openFetch: {
clients: {
pets: {
baseURL: 'https://petstore3.swagger.io/api/v3'
}
}
}
})
By default NuxtOpenFetch will search for OpenAPI schemas in /openapi directory.
openapi/
pets/
openapi.yaml
nuxt.config.ts
Usage
That's it! Run the project, NuxtOpenFetch will generate fully typed and preconfigured OpenAPI clients for you:
<script setup lang="ts">
const { data, error } = await usePets('/pet/{petId}', {
path: {
petId: 1
}
})
</script>
<template>
<div>
...
</div>
</template>
NuxtOpenFetch infers types from the URL. Prefer static string values over dynamic runtime values, e.g.:
Correct: /pets/{petId}
Incorrect: [...pathParts].join("/") + "{petId}"