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

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​

cURL
curl -X GET https://stoplight.io/mocks/enzonotario/argentine-rock/122547792/api/v1/artists
JavaScript
fetch("https://stoplight.io/mocks/enzonotario/argentine-rock/122547792/api/v1/artists")
  .then(response => response.json())
  .then(data => console.log(data));
PHP
file_get_contents("https://stoplight.io/mocks/enzonotario/argentine-rock/122547792/api/v1/artists");
Python
import requests
response = requests.get("https://stoplight.io/mocks/enzonotario/argentine-rock/122547792/api/v1/artists")
print(response.json())
Powered by VitePress OpenAPI

INFO

Using v2 spec

[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​

cURL
curl -X POST https://redocly.com/_mock/docs/openapi/museum-api/v2/tickets
JavaScript
fetch("https://redocly.com/_mock/docs/openapi/museum-api/v2/tickets", { method: "POST" })
  .then(response => response.json())
  .then(data => console.log(data));
PHP
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://redocly.com/_mock/docs/openapi/museum-api/v2/tickets");
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
echo $response;
Python
import requests
response = requests.post("https://redocly.com/_mock/docs/openapi/museum-api/v2/tickets")
print(response.json())
Powered by VitePress OpenAPI