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": "Home",
      "link": "/"
    },
    {
      "text": "组件",
      "link": "/components/"
    }
  ],
  "sidebar": {
    "/components/": [
      {
        "text": "基础",
        "items": [
          {
            "text": "Button 按钮",
            "link": "/components/button"
          },
          {
            "text": "ButtonGroup 按钮组",
            "link": "/components/buttonGroup"
          },
          {
            "text": "Input 输入框",
            "link": "/components/input"
          },
          {
            "text": "Textarea 文本域",
            "link": "/components/textarea"
          },
          {
            "text": "Form 表单",
            "link": "/components/form"
          },
          {
            "text": "Grid 栅格",
            "link": "/components/grid"
          },
          {
            "text": "Container 容器",
            "link": "/components/container"
          },
          {
            "text": "Checkbox 复选框",
            "link": "/components/checkbox"
          },
          {
            "text": "Message 全局提示",
            "link": "/components/message"
          },
          {
            "text": "Modal 对话框",
            "link": "/components/modal"
          },
          {
            "text": "ModalBox 确认弹窗",
            "link": "/components/modalBox"
          },
          {
            "text": "Switch 开关",
            "link": "/components/switch"
          },
          {
            "text": "Drawer 抽屉",
            "link": "/components/drawer"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/EmmaLu-ux/ui-element-vue3"
    }
  ]
}

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.