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 defaultSpec from './openapi.json'
import schemasSpec from './openapi-schemas.json'
</script>

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

<OAOperation operationId="getAllArtists" />

---

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

<OAOperation operationId="getCircularReference" :spec="schemasSpec" />

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. You can get one using the GETGet an artist endpoint.

Parameters​

Query Parameters

limit

The number of items to return

Typeinteger
Examples
102050
formatint64
default10
offset

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

Typeinteger
Examples
123456
formatint64
default0

Responses​

OK
application/json
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"
}
}

Playground​

Server
Variables
Key
Value

Samples​

Powered by VitePress OpenAPI

INFO

Using schemas spec

Get a parent​

GET
/circular-reference

Example of a JSON object with a circular reference.

Responses​

A parent with a child
application/json
JSON
{
"id": "string",
"child": {
"id": "string",
"parent": "[Circular Reference]"
}
}

Playground​

Samples​

cURL
JavaScript
PHP
Python
Powered by VitePress OpenAPI