VitePress OpenAPI

Appearance

Custom Slots ​

The OAOperation component provides several slots for customizing the operation layout.

Description ​

The description slot allows you to customize the operation description.

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

<script setup lang="ts">
import { useData } from 'vitepress'

const { isDark } = useData()

async function confetti() {
  (await import('https://esm.sh/canvas-confetti')).default()
}
</script>

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

<template #description="description">

#### Custom description slot

All slots *can* contain ~~tons of text~~ **Markdown**. [If GitHub supports the syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax), chances are we’re supporting it, too. You can even create [internal links to reference endpoints](#responses).

You can also include custom Vue components or HTML elements:

<button @click="confetti()" class="p-2 bg-muted rounded" aria-label="Trigger celebration confetti">:tada: Celebrate :tada:</button>

</template>

</OAOperation>
Example
ID: getAllArtists

Get all artists​

GET
/api/v1/artists

Custom description slot ​

All slots can contain tons of text Markdown. If GitHub supports the syntax, chances are we’re supporting it, too. You can even create internal links to reference endpoints.

You can also include custom Vue components or HTML elements:

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

WIP ​