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="getAllData" :spec="spec" :isDark="isDark" />

---

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

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

INFO

Using default spec

Operation ID: getAllData

Get all planets​

GET
/planets

It’s easy to say you know them all, but do you really? Retrieve all the planets and check whether you missed one.

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": 0,
"name": "string",
"description": null,
"image": "string",
"creator": {
"id": 0,
"name": "string",
"email": "string"
}
}
],
"meta": {
"limit": 0,
"offset": 0,
"total": 0,
"next": null
}
}

Samples​

cURL
curl -X GET https://galaxy.scalar.com/planets
JavaScript
fetch("https://galaxy.scalar.com/planets")
  .then(response => response.json())
  .then(data => console.log(data));
PHP
file_get_contents("https://galaxy.scalar.com/planets");
Python
import requests
response = requests.get("https://galaxy.scalar.com/planets")
print(response.json())
Powered by VitePress OpenAPI

INFO

Using v2 spec

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

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