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

Type
integer
Examples
102050
Format
"int64"
Default
10
offset

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

Type
integer
Examples
123456
Format
"int64"
Default
0

Responses​

Success Response

The request was successful and returns a list of artists.

Response Format

The response includes:

  • A data array containing artist objects
  • Pagination information

Note: You can use the pagination parameters to navigate through large result sets.

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​

Powered by VitePress OpenAPI