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

Prerequisites

The Setup and Basic usage sections below describe how to use openapi-typescript, which is a dependency of openapi-vue-query but maintained in a separate repository. These steps are required to generate the TypeScript types that openapi-vue-query uses.

This library requires the latest version of Node.js installed (20.x or higher recommended). With that present, run the following in your project:

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 a local type file by running npx openapi-typescript, first specifying your input schema (JSON or YAML), and where you’d like the --output (-o) to be saved:

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

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

Then in your TypeScript project, import types where needed:

src/my-project.ts

import type { paths, components } from "./my-openapi-3-schema"; // generated by openapi-typescript

// Schema Obj
type MyType = components["schemas"]["MyType"];

// Path params
type EndpointParams = paths["/my/endpoint"]["parameters"];

// Response obj
type SuccessResponse =
  paths["/my/endpoint"]["get"]["responses"][200]["content"]["application/json"]["schema"];
type ErrorResponse =
  paths["/my/endpoint"]["get"]["responses"][500]["content"]["application/json"]["schema"];

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