VitePress OpenAPI

Appearance

Multiple specs ​

You can use multiple OpenAPI specs on the same page by importing them and passing them as spec prop to the OAOperation component.

Example ​

In this example, we are using two different specs to render the same operation.

markdown
---
aside: false
outline: false
title: vitepress-openapi
---

<script setup lang="ts">
import { useData } from 'vitepress'
import spec from '../public/openapi.json'
import specV2 from '../public/openapi-v2.json'

const { isDark } = useData()
</script>

::: info
Using [default spec](../public/openapi.json)
:::

<OAOperation operationId="getAllArtists" :spec="spec" :isDark="isDark" />

---

::: info
Using [v2 spec](../public/openapi-v2.json)
:::

<OAOperation operationId="buyMuseumTickets" :spec="specV2" :isDark="isDark" />

INFO

Using default spec

ID: getAllArtists

Get all artists​

GET
/api/v1/artists

Get a list of all legendary Argentine Rock artists and explore their contributions to the music scene.

Parameters​

Query Parameters

limit

The number of items to return

Typeinteger
offset

The number of items to skip before starting to collect the result set

Typeinteger

Responses​

OK
JSON
{
"data": [
{
"id": 1,
"name": "Charly García",
"description": "One of the most influential rock musicians in Argentine history.",
"image": "https://cdn.rock-legends.com/photos/charly.jpg",
"band": "Sui Generis"
}
],
"meta": {
"limit": 10,
"offset": 0,
"total": 100,
"next": "/artists?limit=10&offset=10"
}
}

Samples​

Bruno
get {
  url: https://stoplight.io/mocks/enzonotario/argentine-rock/122547792/api/v1/artists
}

headers {
  Content-Type: application/json
}
Bruno
get {
  url: https://stoplight.io/mocks/enzonotario/argentine-rock/122547792/api/v1/artists
}

headers {
  Content-Type: application/json
}
cURL
curl -X GET \
'https://stoplight.io/mocks/enzonotario/argentine-rock/122547792/api/v1/artists' \
 -H "Content-Type: application/json"
JavaScript
fetch('https://stoplight.io/mocks/enzonotario/argentine-rock/122547792/api/v1/artists', {headers:{'Content-Type':'application/json'}})
  .then(response => response.json())
  .then(data => console.log(data));
PHP
<?php
$url = 'https://stoplight.io/mocks/enzonotario/argentine-rock/122547792/api/v1/artists';
$method = 'GET';
$headers = [
    'Content-Type' => 'application/json',
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$response = curl_exec($ch);
curl_close($ch);

echo $response;
?>
Python
import requests

url = 'https://stoplight.io/mocks/enzonotario/argentine-rock/122547792/api/v1/artists'

headers = {
    'Content-Type': 'application/json'
}

response = requests.get(url, headers=headers)
print(response.json())
Powered by VitePress OpenAPI

INFO

Using v2 spec

ID: buyMuseumTickets

[v2] Buy museum tickets​

POST
/v2/tickets

Purchase museum tickets for general entry or special events.

Request Body​

JSON
{
"ticketType": "event",
"eventId": "3be6453c-03eb-4357-ae5a-984a0e574a54",
"ticketDate": "2023-10-29",
"email": "museum-lover@example.com",
"phone": "+1(234)-567-8910"
}

Responses​

Created.
JSON
{
"message": "Museum general entry ticket purchased",
"eventName": "Pirate Coding Workshop",
"ticketId": "a54a57ca-36f8-421b-a6b4-2e8f26858a4c",
"ticketType": "event",
"ticketDate": "2023-10-29",
"confirmationCode": "ticket-event-a98c8f-7eb12"
}

Samples​

Bruno
post {
  url: https://redocly.com/_mock/docs/openapi/museum-api/v2/tickets
}

headers {
  Content-Type: application/json
}

body {
  {
    "ticketType": "event",
    "eventId": "3be6453c-03eb-4357-ae5a-984a0e574a54",
    "ticketDate": "2023-10-29",
    "email": "museum-lover@example.com",
    "phone": "+1(234)-567-8910"
  }
}
Bruno
post {
  url: https://redocly.com/_mock/docs/openapi/museum-api/v2/tickets
}

headers {
  Content-Type: application/json
}

body {
  {
    "ticketType": "event",
    "eventId": "3be6453c-03eb-4357-ae5a-984a0e574a54",
    "ticketDate": "2023-10-29",
    "email": "museum-lover@example.com",
    "phone": "+1(234)-567-8910"
  }
}
cURL
curl -X POST \
'https://redocly.com/_mock/docs/openapi/museum-api/v2/tickets' \
 -H "Content-Type: application/json" \
 --data '{
  "ticketType": "event",
  "eventId": "3be6453c-03eb-4357-ae5a-984a0e574a54",
  "ticketDate": "2023-10-29",
  "email": "museum-lover@example.com",
  "phone": "+1(234)-567-8910"
}'
JavaScript
fetch('https://redocly.com/_mock/docs/openapi/museum-api/v2/tickets', {method:'POST',headers:{'Content-Type':'application/json'},body:'{"ticketType":"event","eventId":"3be6453c-03eb-4357-ae5a-984a0e574a54","ticketDate":"2023-10-29","email":"museum-lover@example.com","phone":"+1(234)-567-8910"}'})
  .then(response => response.json())
  .then(data => console.log(data));
PHP
<?php
$url = 'https://redocly.com/_mock/docs/openapi/museum-api/v2/tickets';
$method = 'POST';
$headers = [
    'Content-Type' => 'application/json',
];
$body = json_encode({"ticketType":"event","eventId":"3be6453c-03eb-4357-ae5a-984a0e574a54","ticketDate":"2023-10-29","email":"museum-lover@example.com","phone":"+1(234)-567-8910"});

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, $body);

$response = curl_exec($ch);
curl_close($ch);

echo $response;
?>
Python
import requests

url = 'https://redocly.com/_mock/docs/openapi/museum-api/v2/tickets'

headers = {
    'Content-Type': 'application/json'
}
data = {
    'ticketType': 'event',
    'eventId': '3be6453c-03eb-4357-ae5a-984a0e574a54',
    'ticketDate': '2023-10-29',
    'email': 'museum-lover@example.com',
    'phone': '+1(234)-567-8910'
}

response = requests.post(url, headers=headers, json=data)
print(response.json())
Powered by VitePress OpenAPI