Runtime API Examples

This page demonstrates usage of some of the runtime APIs provided by VitePress.

The main useData() API can be used to access site, theme, and page data for the current page. It works in both .md and .vue files:

<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>

Results

Theme Data

{
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "使用指南",
      "link": "/guide/register-account"
    },
    {
      "text": "工具接入",
      "link": "/tools/cursor"
    },
    {
      "text": "支持与FQA",
      "link": "/support/pre-sales-after-sales"
    }
  ],
  "sidebar": {
    "/quick-start/": [
      {
        "text": "快速开始",
        "items": [
          {
            "text": "欢迎使用",
            "link": "/quick-start/welcome"
          },
          {
            "text": "中转站是什么",
            "link": "/quick-start/what-is-relay"
          }
        ]
      },
      {
        "text": "使用指南",
        "items": [
          {
            "text": "注册账号",
            "link": "/guide/register-account"
          },
          {
            "text": "创建 API Key",
            "link": "/guide/create-api-key"
          },
          {
            "text": "计费与额度",
            "link": "/guide/billing-quota"
          },
          {
            "text": "模型与定价",
            "link": "/guide/models-pricing"
          }
        ]
      }
    ],
    "/guide/": [
      {
        "text": "快速开始",
        "items": [
          {
            "text": "欢迎使用",
            "link": "/quick-start/welcome"
          },
          {
            "text": "中转站是什么",
            "link": "/quick-start/what-is-relay"
          }
        ]
      },
      {
        "text": "使用指南",
        "items": [
          {
            "text": "注册账号",
            "link": "/guide/register-account"
          },
          {
            "text": "创建 API Key",
            "link": "/guide/create-api-key"
          },
          {
            "text": "计费与额度",
            "link": "/guide/billing-quota"
          },
          {
            "text": "模型与定价",
            "link": "/guide/models-pricing"
          }
        ]
      }
    ],
    "/tools/": [
      {
        "text": "AI IDE（集成开发环境）",
        "items": [
          {
            "text": "Cursor",
            "link": "/tools/cursor"
          },
          {
            "text": "Trae",
            "link": "/tools/trae"
          },
          {
            "text": "Codex",
            "link": "/tools/codex"
          }
        ]
      },
      {
        "text": "Coding Agent（命令行 / Terminal）",
        "items": [
          {
            "text": "Claude Code",
            "link": "/tools/claude-code"
          },
          {
            "text": "Codex CLI",
            "link": "/tools/codex-cli"
          },
          {
            "text": "CodeBuddy",
            "link": "/tools/codebuddy"
          }
        ]
      },
      {
        "text": "AI 客户端（Chat Client）",
        "items": [
          {
            "text": "Cherry Studio",
            "link": "/tools/cherry-studio"
          },
          {
            "text": "Chatbox",
            "link": "/tools/chatbox"
          },
          {
            "text": "Open WebUI",
            "link": "/tools/open-webui"
          }
        ]
      },
      {
        "text": "Agent 框架 / SDK",
        "items": [
          {
            "text": "LangChain",
            "link": "/tools/langchain"
          }
        ]
      },
      {
        "text": "Agent 生态工具（扩展 / 管理）",
        "items": [
          {
            "text": "CC Switch",
            "link": "/tools/cc-switch"
          },
          {
            "text": "Hermes",
            "link": "/tools/hermes"
          },
          {
            "text": "Claude Code Hub (CCH)",
            "link": "/tools/claude-code-hub"
          }
        ]
      },
      {
        "text": "开源 AI 开发工具",
        "items": [
          {
            "text": "OpenClaw",
            "link": "/tools/openclaw"
          },
          {
            "text": "OpenCode",
            "link": "/tools/opencode"
          }
        ]
      }
    ],
    "/support/": [
      {
        "text": "支持与FQA",
        "items": [
          {
            "text": "售前售后",
            "link": "/support/pre-sales-after-sales"
          },
          {
            "text": "常见问题",
            "link": "/support/faq"
          },
          {
            "text": "疑难杂症",
            "link": "/support/troubleshooting"
          },
          {
            "text": "法律条款",
            "link": "/support/legal-terms"
          },
          {
            "text": "隐私政策",
            "link": "/support/privacy-policy"
          },
          {
            "text": "联系方式与群组",
            "link": "/support/contact-groups"
          }
        ]
      }
    ]
  },
  "logo": "/logo.png",
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md"
}

Page Frontmatter

{
  "outline": "deep"
}

More

Check out the documentation for the full list of runtime APIs.