BrowserDevTools

OpenAPI → Vue 3 code generator

Paste a spec (JSON or YAML) and get four things at once: TypeScript types, a typed fetch client, Vue 3 composables with loading and error state, and SFC components for list and create screens. Nothing is uploaded and nothing is installed.

Options

The spec stays in this tab: parsing, $ref resolution and generation all happen locally. No upload, no share link, no CLI.

Output

Pet StoreAPI v1.2.3OpenAPI 3.0.33 operations2 schemas6 files · 9.2 KB

Base URL: https://api.petstore.dev/v1

  • ⚠ GET /pets has no operationId; the name "getPets" was derived from the path.
  • ⚠ POST /pets has no operationId; the name "postPets" was derived from the path.

Self-check passed: every generated file is non-empty and free of unreplaced placeholders.

// Generated from Pet Store v1.2.3 — review before shipping.
// Types: component schemas, plus request/response types per operation.

export interface Pet {
  id: string;
  name: string;
  status?: "available" | "pending" | "sold";
  tags?: string[];
}

export type NewPet = { name: string; age?: number; } & Pet;

export interface GetPetsParams {
  limit?: number;
  status?: "available" | "pending" | "sold";
}

export type GetPetsResponse = Pet[];

export type PostPetsRequest = NewPet;

export type PostPetsResponse = Pet;

export interface GetPetByIdParams {
  petId: string;
}

export type GetPetByIdResponse = Pet;

Why generate Vue code, not just types

Search for “openapi to typescript” and you get a wall of CLIs and single-file converters: openapi-typescript, orval, and a few browser tools that stop at types. Search for “openapi to vue component” and you get official documentation, a GitHub template, a VS Code extension and an archived repository — no tool you can open in a tab. That gap is why this page exists.

Types alone do not give you a screen. The part that actually costs time in a Vue project is the layer above: a fetch call with path and query parameters wired up, a composable that tracks loading and error state, and a table or form that matches the schema. So this generator emits all of it in one pass:

Everything runs in your tab: the spec is parsed, $refs resolved and files assembled locally, so nothing is uploaded and no share link is created. That matters more than it sounds — an OpenAPI document is often the most complete description of an API that exists, including endpoints that have not shipped yet. Treat the output as a starting point rather than a finished app: review it, wire the components to your router or store, and keep the spec as the source of truth.

FAQ

Is my spec uploaded?
No. Parsing, $ref resolution and code generation all happen in the browser. There is no backend endpoint for the spec, no logging of its contents and no share link — you can confirm that in the Network panel.
YAML or JSON?
Both. JSON works immediately; YAML support is fetched on demand so the page stays light. Drop a .yaml or .yml file and it is parsed locally with js-yaml.
Does it resolve external $refs?
No, deliberately. Fetching a URL out of your spec would mean sending part of your API description to a third party, so external references are reported as warnings and emitted as unknown — the rest of the output still compiles.
Is the generated client production ready?
It is a starting point: typed, dependency-free and small. Errors are thrown as an Error carrying the status code, there is no retry or token-refresh logic, and the components carry no styling. Review the output the way you would review a pull request.
What about React or Svelte?
This generator is Vue 3 only — that is the gap it exists to fill. types.ts and api.ts are framework-agnostic, so you could reuse them elsewhere, but the composables and SFCs are Vue-specific.