Vue API PlaygroundShip runnable APIs in your docs.

Install ​

npm install vue-api-playground

Register once ​

// docs/.vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import { Playground } from 'vue-api-playground'
import 'vue-api-playground/styles'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('VueApiPlayground', Playground)
  },
}

Drop it anywhere ​

<VueApiPlayground
  url="https://api.example.com/posts/{id}"
  method="get"
  :data="[{ name: 'id', value: '1', type: 'number' }]"
/>

Why ​

Traditional API docs are static. Readers leave the page to test anything — Postman, curl, a scratch file. Vue API Playground collapses that loop: readers execute requests, edit parameters, and inspect responses without leaving your documentation.

It's the successor to vuepress-api-playground, rebuilt for Vue 3 and modern VitePress sites.