[Community Plugin] vite-plugin-open-api-server — OpenAPI Mock Server with Vue DevTools Integration

[miguelramos]

Hi there! 👋

I'd like to share a plugin I've built that integrates with Vue DevTools: vite-plugin-open-api-server.

What it does

It's a Vite plugin that spins up a local mock API server directly from OpenAPI 2.0/3.x specs, so frontend developers can work independently of backend services. It uses Hono under the hood for a lightweight, fast HTTP server and generates realistic responses via Faker.js.

Core features:

• Automatic endpoint generation from OpenAPI specs
• Realistic fake data generation based on schemas (Faker.js)
• In-memory CRUD store per schema
• Custom handlers to override responses with custom logic
• Seed data for consistent, reproducible test scenarios
• Hot reload on handler/seed file changes
• Error/network simulation (slow 3G, 500s, 429s, timeouts, etc.)
• Full TypeScript support

Vue DevTools Integration

The plugin registers a custom tab in Vue DevTools (via @vue/devtools-api, v7-compatible) with a full SPA that includes four views:

View	Description
Routes	Lists all generated endpoints grouped by tags/schema
Timeline	Real-time request/response log for monitoring API traffic
Models	JSON editor to inspect and edit the in-memory store data
Simulator	Error simulation with presets (slow network, 500, 429, 401, timeouts, empty responses)

This gives developers full visibility into the mock layer without leaving the DevTools workflow.

Quick example

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { openApiServer } from '@websublime/vite-plugin-open-api-server';

export default defineConfig({
  plugins: [
    vue(),
    openApiServer({
      spec: './openapi/petstore.yaml',
      port: 4000,
      proxyPath: '/api/v3',
      devtools: true,
    }),
  ],
});

Links

• Repository: https://github.com/websublime/vite-open-api-server
• npm: https://www.npmjs.com/package/@websublime/vite-plugin-open-api-server
• License: MIT

Monorepo packages

Package	Role
@websublime/vite-plugin-open-api-core	Core server, store, router, data generator
@websublime/vite-plugin-open-api-devtools	Vue DevTools SPA client
@websublime/vite-plugin-open-api-server	Vite plugin (main entry point)

I'd love to hear your thoughts, and if the team finds it useful, it would be great to see it listed in the DevTools ecosystem or documentation as a community plugin example.

Thanks for the amazing work on Vue DevTools!