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": "/how-to-ask"
    },
    {
      "text": "面板功能",
      "link": "/how-to-use"
    },
    {
      "text": "常见问题",
      "link": "/faq"
    },
    {
      "text": "API 接入和调用",
      "link": "/api-docs"
    },
    {
      "text": "隐私政策与条款",
      "link": "/privacy"
    }
  ],
  "sidebar": [
    {
      "text": "如何正确提问",
      "link": "/how-to-ask",
      "items": []
    },
    {
      "text": "面板功能",
      "link": "/how-to-use/",
      "items": [
        {
          "text": "面板首页",
          "link": "/how-to-use/panel-main"
        },
        {
          "text": "用户信息",
          "link": "/how-to-use/user-info"
        }
      ]
    },
    {
      "text": "常见问题"
    },
    {
      "text": "API 接入和调用"
    },
    {
      "text": "隐私政策与条款",
      "link": "/privacy"
    }
  ],
  "logo": "/favicon.ico",
  "socialLinks": [
    {
      "icon": {
        "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" width=\"100\" height=\"100\" viewBox=\"0 0 24 24\"><path d=\"M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 12 L 19 12 L 19 19 L 5 19 L 5 5 L 12 5 L 12 3 L 5 3 z M 14 3 L 14 5 L 17.585938 5 L 8.2929688 14.292969 L 9.7070312 15.707031 L 19 6.4140625 L 19 10 L 21 10 L 21 3 L 14 3 z\"></path></svg>"
      },
      "link": "https://www.hayfrp.org"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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