Vue API Playground

Interactive API playground component for Vue 3. Plug-and-play with VitePress or any Vue 3 app — automatically inherits host theme styles.

Successor to vuepress-api-playground.

Features

• Plug & play theming — CSS custom properties cascade from VitePress or your own theme
• All HTTP methods — GET, POST, PUT, PATCH, DELETE with URL path parameters
• Response time & headers — performance metrics and collapsible response headers
• Copy response — one-click copy to clipboard
• TypeScript — fully typed props and exports
• Lightweight — zero runtime dependencies, ~3 KB gzipped

Install

npm install vue-api-playground

Quick Start

VitePress

// 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)
  },
}

Then in any .md file:

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

Vue 3 App

import { createApp } from 'vue'
import { Playground } from 'vue-api-playground'
import 'vue-api-playground/styles'

// Register globally
app.component('VueApiPlayground', Playground)

// Or import directly in a component

<script setup>
import { Playground } from 'vue-api-playground'
</script>

<template>
  <Playground
    url="https://jsonplaceholder.typicode.com/posts/{id}"
    method="get"
    :data="[{ name: 'id', value: '1', type: 'number' }]"
  />
</template>

Props

| Prop | Type | Default | Description | | ---------------- | ------------------------ | ------------------ | ----------------------------------------------------------------------- | | url | string | — | API endpoint. Supports {param} and <param> path parameters | | method | string | — | HTTP method: get, post, put, patch, delete | | data | PlaygroundDataItem[] | [] | Input fields for the request | | headers | Record<string, string> | — | Custom HTTP headers (editable) | | showMethod | boolean | false | Show method badge | | showUrl | boolean | false | Show URL | | headingTag | string | 'h4' | HTML tag for section headings | | servers | string[] | — | Server URLs. When more than one, a selector is rendered | | contentType | PlaygroundContentType | — | Body serialization: json, urlencoded, multipart, text/plain, xml | | body | string | — | Preset request body (JSON/text/XML). User edits take precedence | | v-model:auth | AuthConfig | {type:'none'} | Declarative auth: none, bearer, basic, or apiKey (header/query) | | v-model:server | string | first of servers | Currently selected base URL |

Events

| Event | Payload | Description | | ----------------- | --------------------------------------- | ------------------------------ | | before-send | { url, init } | Mutate envelope before fetch | | request-start | { url, method, headers, body } | Fires just before fetch() | | request-success | { status, headers, body, durationMs } | Fires on successful response | | request-error | { error, durationMs } | Fires on network / abort error |

Custom Theming

Override --vap-* CSS variables to match your design:

:root {
  --vap-brand: #6366f1;
  --vap-text: #1a1a1a;
  --vap-border: #e5e7eb;
  --vap-radius: 8px;
}

For dark mode, override under your dark class:

.dark {
  --vap-text: #e5e7eb;
  --vap-bg: #1a1a2e;
  --vap-border: #334155;
  --vap-code-bg: #0f172a;
}

When no --vap-* variables are set, the component falls back to VitePress theme variables, then hardcoded defaults. See the full variable reference for all 14 customizable properties.

You can also skip the default styles entirely and write your own — the component renders semantic HTML with vap- prefixed classes.

Documentation

Full documentation with live examples: rodindev.github.io/vue-api-playground

Contributing

See CONTRIBUTING.md.

License

MIT