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">
async function confetti() {
(await import('https://esm.sh/canvas-confetti')).default()
}
</script>
<OAOperation operationId="getAllArtists">
<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
Get all artists
GET
/api/v1/artists
Server
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
Examples
102050format
int64default
10offset
The number of items to skip before starting to collect the result set
Typeinteger
Examples
123456format
int64default
0Responses
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"
}
}
GET
/api/v1/artists
Server