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