VitePress OpenAPI

Appearance

Operation Badges ​

Each operation can have different badges that indicate its state, for example if it is deprecated, the operation id, etc. The available badges are:

  • deprecated
  • operationId

By default, only the deprecated badge is shown, as appropriate. You can customize the operation badges using the useTheme().setOperationBadges() method. The order in which you set the badges is the order in which they will be displayed.

For example:

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

<script setup lang="ts">
import { useData } from 'vitepress'
import { useTheme } from 'vitepress-openapi'
import spec from '../public/openapi.json'

const { isDark } = useData()

const themeConfig = useTheme()
themeConfig.setOperationBadges(['deprecated', 'operationId'])
</script>

<OAOperation :spec="spec" operationId="getAllData" :isDark="isDark" />

You can also customize the prefix of the badges by setting the operation.badgePrefix.{badgeName} key in the i18n messages. For example, in your .vitepress/theme/index.ts, before calling theme.enhanceApp({ app }), you can set the following:

typescript
import { locales, theme, useTheme } from 'vitepress-openapi'
import DefaultTheme from 'vitepress/theme'
import 'vitepress-openapi/dist/style.css'

export default {
    ...DefaultTheme,
    enhanceApp({ app }) {
        // Optionally, set the i18n configuration.
        const themeConfig = useTheme()
        themeConfig.setI18nConfig({
            messages: {
                en: {
                    ...locales.en,
                    'operation.badgePrefix.operationId': 'Operation ID: ',
                },
                es: {
                    ...locales.es,
                    'operation.badgePrefix.operationId': 'ID de operación: ',
                },
            },
        })

        // Use the theme.
        theme.enhanceApp({ app })
    },
}

Example ​

Operation ID: getAllData

Get all planets​

GET
/planets

It’s easy to say you know them all, but do you really? Retrieve all the planets and check whether you missed one.

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": 0,
"name": "string",
"description": null,
"image": "string",
"creator": {
"id": 0,
"name": "string",
"email": "string"
}
}
],
"meta": {
"limit": 0,
"offset": 0,
"total": 0,
"next": null
}
}

Samples​

cURL
curl -X GET https://galaxy.scalar.com/planets
JavaScript
fetch("https://galaxy.scalar.com/planets")
  .then(response => response.json())
  .then(data => console.log(data));
PHP
file_get_contents("https://galaxy.scalar.com/planets");
Python
import requests
response = requests.get("https://galaxy.scalar.com/planets")
print(response.json())
Powered by VitePress OpenAPI