openapi-typescript-vue provides Vue.js ecosystem packages that work seamlessly with OpenAPI 3.0 & 3.1 schemas. Build type-safe Vue applications with reactive queries, mutations, and fully typed API clients.

This project complements openapi-typescript with Vue.js-specific packages, including openapi-vue-query for TanStack Query integration, that are not available in the original distribution.

TIP

New to OpenAPI? Speakeasy's Intro to OpenAPI is an accessible guide to newcomers that explains the "why" and "how" of OpenAPI.

Features

• ✅ Vue Query Integration - Built-in support for @tanstack/vue-query with reactive queries and mutations
• ✅ 100% Type Safety - Every endpoint, parameter, and response is fully typed
• ✅ Zero Runtime Cost - Static TypeScript types provide zero runtime overhead
• ✅ Auto-completion - Full IntelliSense support for all your API endpoints
• ✅ Supports OpenAPI 3.0 and 3.1 - Including advanced features like discriminators
• ✅ Works Everywhere - Vue 3, Nuxt, Vite - works with any Vue setup

Examples

👀 See Vue examples

Setup

This library requires the latest version of Node.js installed (20.x or higher recommended). For Vue.js projects, install the following packages:

npm i openapi-vue-query openapi-fetch
npm i -D openapi-typescript typescript

And in your tsconfig.json, to load the types properly:

tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext", // or "NodeNext"
    "moduleResolution": "Bundler" // or "NodeNext"
  }
}

Highly recommended

Also adding the following can boost type safety:

tsconfig.json

{
  "compilerOptions": {
    "noUncheckedIndexedAccess": true
  }
}

Basic usage

First, generate TypeScript types from your OpenAPI schema:

# Local schema
npx openapi-typescript ./path/to/my/schema.yaml -o ./src/lib/api/v1.d.ts
# 🚀 ./path/to/my/schema.yaml -> ./src/lib/api/v1.d.ts [7ms]

# Remote schema
npx openapi-typescript https://myapi.dev/api/v1/openapi.yaml -o ./src/lib/api/v1.d.ts
# 🚀 https://myapi.dev/api/v1/openapi.yaml -> ./src/lib/api/v1.d.ts [250ms]

Then use in your Vue components with reactive queries:

src/components/BlogPost.vue

<script setup lang="ts">
import createFetchClient from "openapi-fetch";
import createClient from "openapi-vue-query";
import type { paths } from "../lib/api/v1"; // generated by openapi-typescript

const fetchClient = createFetchClient<paths>({
  baseUrl: "https://myapi.dev/v1/",
});
const $api = createClient(fetchClient);

// Reactive query with full type safety
const { data, error, isPending } = $api.useQuery(
  "get",
  "/blogposts/{post_id}",
  {
    params: {
      path: { post_id: 5 },
    },
  }
);
</script>

<template>
  <div>
    <template v-if="isPending">
      Loading...
    </template>
    <template v-else-if="error">
      Error: {{ error.message }}
    </template>
    <template v-else>
      <h1>{{ data.title }}</h1>
      <p>{{ data.content }}</p>
    </template>
  </div>
</template>

From here, you can also use the generated types for:

• Vue Query integration with reactive queries and mutations
• Using openapi-fetch for direct API calls
• Building core business logic based on API types
• Validating mock test data is up-to-date with the current schema
• Type-safe API client development