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>

This will render the following:

Custom description slot

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​

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

WIP ​