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": "后端",
      "activeMatch": "/backend/*",
      "items": [
        {
          "text": "PHP",
          "link": "/backend/PHP"
        },
        {
          "text": "Python",
          "link": "/backend/Python"
        },
        {
          "text": "MySQL",
          "link": "/backend/MySQL"
        },
        {
          "text": "Redis",
          "link": "/backend/Redis"
        }
      ]
    },
    {
      "text": "教程",
      "items": [
        {
          "text": "vitepress文档",
          "link": "https://vitepress.dev/zh/guide/"
        },
        {
          "text": "vitepress教程",
          "link": "https://vitepress.yiov.top/"
        }
      ]
    },
    {
      "text": "外站工具",
      "items": [
        {
          "text": "sojson",
          "link": "https://www.sojson.com"
        },
        {
          "text": "时间戳",
          "link": "https://tool.lu/timestamp/"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "search": {
    "provider": "local",
    "options": {
      "translations": {
        "button": {
          "buttonText": "搜索",
          "buttonAriaLabel": "搜索文档"
        },
        "modal": {
          "noResultsText": "无法找到相关结果",
          "resetButtonTitle": "清除查询结果",
          "footer": {
            "selectText": "选择",
            "navigateText": "切换",
            "closeText": "退出"
          }
        }
      }
    }
  },
  "lastUpdatedText": "上次更新",
  "returnToTopLabel": "返回顶部",
  "langMenuLabel": "选择语言",
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "sidebarMenuLabel": "菜单",
  "outline": {
    "label": "页面导航",
    "level": "deep"
  },
  "sidebar": {
    "/": {
      "base": "/",
      "items": [
        {
          "text": "Api-examples",
          "link": "api-examples"
        },
        {
          "text": "Backend",
          "items": [
            {
              "text": "MySQL",
              "items": [
                {
                  "text": "1.事务",
                  "link": "backend/MySQL/1.事务"
                },
                {
                  "text": "2.锁",
                  "link": "backend/MySQL/2.锁"
                },
                {
                  "text": "3.MVCC",
                  "link": "backend/MySQL/3.MVCC"
                }
              ],
              "collapsed": false
            },
            {
              "text": "PHP",
              "items": [
                {
                  "text": "PHP config",
                  "link": "backend/PHP/PHP config"
                }
              ],
              "collapsed": false
            },
            {
              "text": "Redis",
              "items": [
                {
                  "text": "1.命令",
                  "link": "backend/Redis/1.命令"
                },
                {
                  "text": "5.大key",
                  "link": "backend/Redis/5.大key"
                }
              ],
              "collapsed": false
            }
          ],
          "collapsed": false
        },
        {
          "text": "Markdown-examples",
          "link": "markdown-examples"
        }
      ]
    },
    "/backend/": {
      "base": "/backend/",
      "items": [
        {
          "text": "MySQL",
          "items": [
            {
              "text": "MySQL 事务",
              "link": "MySQL/1.事务"
            },
            {
              "text": "MySQL 锁",
              "link": "MySQL/2.锁"
            },
            {
              "text": "MVCC多版本并发控制",
              "link": "MySQL/3.MVCC"
            }
          ]
        },
        {
          "text": "PHP",
          "items": [
            {
              "text": "PHP config",
              "link": "PHP/PHP config"
            }
          ]
        },
        {
          "text": "Python"
        },
        {
          "text": "Redis",
          "items": [
            {
              "text": "常用命令",
              "link": "Redis/1.命令"
            },
            {
              "text": "大key问题",
              "link": "Redis/5.大key"
            }
          ]
        }
      ]
    },
    "/backend/PHP/": {
      "base": "/backend/PHP/",
      "items": [
        {
          "text": "PHP config",
          "link": "PHP config"
        }
      ]
    },
    "/backend/Python/": {
      "base": "/backend/Python/",
      "items": []
    },
    "/backend/Redis/": {
      "base": "/backend/Redis/",
      "items": [
        {
          "text": "常用命令",
          "link": "1.命令"
        },
        {
          "text": "大key问题",
          "link": "5.大key"
        }
      ]
    },
    "/backend/MySQL/": {
      "base": "/backend/MySQL/",
      "items": [
        {
          "text": "MySQL 事务",
          "link": "1.事务"
        },
        {
          "text": "MySQL 锁",
          "link": "2.锁"
        },
        {
          "text": "MVCC多版本并发控制",
          "link": "3.MVCC"
        }
      ]
    },
    "/nas/": {
      "base": "/nas/",
      "items": []
    }
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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