BrowserDevTools

OpenAPI → Vue 3 程式碼產生器

貼上規格（JSON 或 YAML），一次得到四樣東西：TypeScript 型別、有型別的 fetch 客戶端、帶 loading 與 error 狀態的 Vue 3 composable，以及列表與建立表單用的 SFC 元件。不上傳、不安裝。

選項

規格只留在這個分頁：解析、$ref 解析與產生全部在本機完成。不上傳、不產生分享連結、不需要 CLI。

產出

Pet StoreAPI v1.2.3OpenAPI 3.0.33 個操作2 個 schema6 個檔案 · 9.2 KB

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

  • ⚠ GET /pets 沒有 operationId；名稱「getPets」是由路徑推導而來。
  • ⚠ POST /pets 沒有 operationId；名稱「postPets」是由路徑推導而來。

自我檢查通過：每個產出檔案都非空，且沒有未替換的佔位符。

// 由 Pet Store v1.2.3 產生——上線前請先審閱。
// 型別：元件 schema，以及各操作的請求／回應型別。

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;

為什麼要產生 Vue 程式碼，而不只產生型別

搜尋「openapi to typescript」，第一頁是一整排 CLI 與單檔轉換器：openapi-typescript、orval，以及幾個只做到型別就停住的瀏覽器工具。改搜「openapi to vue component」，得到的卻是官方文件、GitHub 樣板、一個 VS Code 擴充功能，以及一個已封存的倉庫——沒有任何能在分頁裡直接打開的工具。這個落差就是這個頁面存在的原因。

只有型別並不會生出畫面。Vue 專案裡真正花時間的是上面那一層：把路徑與查詢參數接好的 fetch 呼叫、追蹤 loading 與 error 狀態的 composable，以及與 schema 對得上的表格或表單。所以這個產生器一次把這些全部產出：

所有事情都在你的分頁裡完成：規格解析、$ref 解析與檔案組裝都在本機進行，因此不上傳、也不會產生分享連結。這件事比聽起來重要——OpenAPI 文件往往是某個 API 現存最完整的描述，甚至包含還沒上線的端點。請把產出當成起點而不是完成品：先審閱、再把元件接到你的 router 或 store，並讓規格繼續當唯一事實來源。

常見問題

我的規格會被上傳嗎？
不會。解析、$ref 解析與程式碼產生全部在瀏覽器內完成。沒有接收規格的後端端點、不會記錄內容、也不會產生分享連結——你可以在 Network 面板自行確認。
支援 YAML 還是 JSON？
兩者都支援。JSON 立即可用；YAML 支援是隨選載入的，好讓頁面保持輕量。把 .yaml 或 .yml 檔拖進來，就會用 js-yaml 在本機解析。
會解析外部 $ref 嗎？
刻意不解析。從你的規格去抓取 URL，等於把 API 描述的一部分送給第三方，因此外部參照會以警告列出並輸出成 unknown——其餘產出仍然可以編譯。
產生的客戶端可以直接上線嗎？
它是起點：有型別、零依賴、體積小。錯誤會以帶狀態碼的 Error 拋出，沒有重試或 token 更新邏輯，元件也沒有任何樣式。請用審 PR 的標準看它。
那 React 或 Svelte 呢？
這個產生器只做 Vue 3——那正是它要補的缺口。types.ts 與 api.ts 與框架無關，可以拿到別處用，但 composable 與 SFC 是 Vue 專屬。