VuePress API Playground

# Examples

# Method GET

# Code

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

# Demo

Data:

# Method GET with Query Parameters

# Code

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

# Demo

Data:

# Method GET with showMethod Property

# Code

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

# Demo

Method: GET

Data:

# Method GET with showURL Property

# Code

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

# Demo

URL: https://jsonplaceholder.typicode.com/posts/{id}

Data:

# Method POST

# Code

<template>
  <div>
    <VuepressApiPlayground url="https://jsonplaceholder.typicode.com/posts"
      method="post"
      :data="[
        {
          name: 'title',
          value: 'Title',
          type: 'text',
        },
        {
          name: 'body',
          value: 'Body',
          type: 'text',
        },
        {
          name: 'userId',
          value: '1',
          type: 'number',
        },
      ]"
    />
  </div>
</template>

# Demo

Data:

# Method POST with headers Property

# Code

<template>
  <div>
    <VuepressApiPlayground
      url="https://jsonplaceholder.typicode.com/posts"
      method="post"
      :headers="{
        'Content-Type': 'application/json',
      }"
      :data="[
        {
          name: 'title',
          value: 'Title',
          type: 'text',
        },
        {
          name: 'body',
          value: 'Body',
          type: 'text',
        },
        {
          name: 'userId',
          value: '1',
          type: 'number',
        },
      ]"
    />
  </div>
</template>

# Demo

Headers:

Key Value
Content-Type

Data:

# Method PUT

# Code

<template>
  <div>
    <VuepressApiPlayground
      url="https://jsonplaceholder.typicode.com/posts/{id}"
      method="put"
      :data="[
        {
          name: 'id',
          value: '1',
          type: 'number',
        },
        {
          name: 'title',
          value: 'Title',
          type: 'text',
        },
        {
          name: 'body',
          value: 'Body',
          type: 'text',
        },
        {
          name: 'userId',
          value: '1',
          type: 'number',
        },
      ]"
    />
  </div>
</template>

# Demo

Data:

# Method DELETE

# Code

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

# Demo

Data: