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": "/get-started.md"
    },
    {
      "text": "组件",
      "link": "/components/button"
    }
  ],
  "sidebar": [
    {
      "text": "V Element 组件列表",
      "items": [
        {
          "text": "安装与使用",
          "link": "/get-started.md"
        },
        {
          "text": "Button 按钮",
          "link": "/components/button"
        },
        {
          "text": "Alert 警告",
          "link": "/components/alert"
        },
        {
          "text": "Collapse 折叠面板",
          "link": "/components/collapse"
        },
        {
          "text": "Tooltip 文字提示",
          "link": "/components/tooltip"
        },
        {
          "text": "Dropdown 下拉菜单",
          "link": "/components/dropdown"
        },
        {
          "text": "Message 消息",
          "link": "/components/message"
        },
        {
          "text": "Notification 提示",
          "link": "/components/notification"
        },
        {
          "text": "Input 文字输入",
          "link": "/components/input"
        },
        {
          "text": "Switch 开关",
          "link": "/components/switch"
        },
        {
          "text": "Select 选择器",
          "link": "/components/select"
        },
        {
          "text": "Form 表单",
          "link": "/components/form"
        }
      ]
    }
  ],
  "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.