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

{
  "logo": "/logo.svg",
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/OptLTD/superuser.im"
    }
  ],
  "nav": [
    {
      "text": "指南",
      "link": "/guide/introduction",
      "activeMatch": "/guide/"
    },
    {
      "text": "在线体验",
      "link": "http://app.opt.ltd:8080"
    }
  ],
  "footer": {
    "message": "基于 MIT 许可发布",
    "copyright": "版权所有 © 2024-2026 SuperUser.IM"
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "outline": {
    "label": "页面导航"
  },
  "lastUpdated": {
    "text": "最后更新于",
    "formatOptions": {
      "dateStyle": "short",
      "timeStyle": "medium"
    }
  },
  "langMenuLabel": "多语言",
  "returnToTopLabel": "回到顶部",
  "sidebarMenuLabel": "菜单",
  "darkModeSwitchLabel": "主题",
  "lightModeSwitchTitle": "切换到浅色模式",
  "darkModeSwitchTitle": "切换到深色模式",
  "sidebar": {
    "/guide/": {
      "base": "/guide/",
      "items": [
        {
          "text": "简介",
          "collapsed": false,
          "items": [
            {
              "text": "系统简介",
              "link": "introduction"
            },
            {
              "text": "快速开始",
              "link": "quick-start"
            },
            {
              "text": "安装部署",
              "link": "installation"
            },
            {
              "text": "基础概念",
              "link": "basic-concept"
            },
            {
              "text": "成员管理",
              "link": "team-manage"
            },
            {
              "text": "角色配置",
              "link": "config-roles"
            },
            {
              "text": "模型配置",
              "link": "config-model"
            },
            {
              "text": "页面配置",
              "link": "config-menus"
            }
          ]
        },
        {
          "text": "写作",
          "collapsed": false,
          "items": [
            {
              "text": "Markdown 扩展",
              "link": "markdown"
            },
            {
              "text": "资源处理",
              "link": "asset-handling"
            },
            {
              "text": "frontmatter",
              "link": "frontmatter"
            },
            {
              "text": "在 Markdown 使用 Vue",
              "link": "using-vue"
            },
            {
              "text": "国际化",
              "link": "i18n"
            }
          ]
        },
        {
          "text": "实验性功能",
          "collapsed": false,
          "items": [
            {
              "text": "MPA 模式",
              "link": "mpa-mode"
            },
            {
              "text": "sitemap 生成",
              "link": "sitemap-generation"
            }
          ]
        },
        {
          "text": "配置和 API 参考",
          "base": "/reference/",
          "link": "site-config"
        }
      ]
    }
  }
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "webapi/examples.md",
  "filePath": "zh-CN/webapi/examples.md",
  "lastUpdated": 1767871813000
}

Page Frontmatter

{
  "outline": "deep"
}

More

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