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": "/images/hero.png",
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "说明文档",
      "link": "/guide/markdown-examples"
    },
    {
      "text": "公共组件",
      "link": "/coms/index"
    },
    {
      "text": "项目集成",
      "items": [
        {
          "text": "BS平台集成",
          "link": "/integrate/pt/index"
        },
        {
          "text": "网盘集成",
          "link": "/integrate/network/index"
        }
      ]
    },
    {
      "text": "更新日志",
      "link": "/other/logs"
    }
  ],
  "outline": "deep",
  "outlineTitle": "目录",
  "sidebar": {
    "/guide/": [
      {
        "text": "页面列表",
        "items": [
          {
            "text": "登录界面",
            "link": "/guide/login"
          },
          {
            "text": "单位管理",
            "link": "/guide/sysunit"
          },
          {
            "text": "Markdown Examples",
            "link": "/guide/markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "/guide/api-examples"
          },
          {
            "text": "日志管理",
            "link": "/guide/syslog"
          },
          {
            "text": "数据库管理",
            "link": "/guide/sysdbconfig"
          },
          {
            "text": "特殊用户管理",
            "link": "/guide/sysuserfilter"
          },
          {
            "text": "角色管理",
            "link": "/guide/sysrole"
          },
          {
            "text": "IP绑定配置",
            "link": "/guide/sysipconfig"
          },
          {
            "text": "用户管理",
            "link": "/guide/sysuser"
          },
          {
            "text": "业务场景配置",
            "link": "/guide/sysmoduleconfig"
          }
        ]
      }
    ],
    "/coms/": [
      {
        "text": "组件说明",
        "items": [
          {
            "text": "数据访问层(必)",
            "link": "/coms/1-auth"
          },
          {
            "text": "通用函数库",
            "link": "/coms/2-utils"
          },
          {
            "text": "UI组件",
            "link": "/coms/elementui",
            "items": [
              {
                "text": "element-plus(必)",
                "link": "/coms/element"
              },
              {
                "text": "布局组件",
                "link": "/coms/layout"
              },
              {
                "text": "菜单Bar组件",
                "link": "/coms/bar"
              },
              {
                "text": "圆点组件",
                "link": "/coms/badge"
              },
              {
                "text": "空页面组件",
                "link": "/coms/empty"
              }
            ]
          },
          {
            "text": "Tree树组件",
            "link": "/coms/tree"
          },
          {
            "text": "登录组件",
            "link": "/coms/login"
          },
          {
            "text": "图表组件",
            "link": "/coms/chart/chart",
            "items": [
              {
                "text": "饼图组件",
                "link": "/coms/chart/pie"
              },
              {
                "text": "点线组件",
                "link": "/coms/chart/line"
              }
            ]
          },
          {
            "text": "富文本组件",
            "link": "/coms/weditor"
          },
          {
            "text": "测试组件",
            "link": "/coms/markdown-examples"
          },
          {
            "text": "角色管理",
            "link": "/coms/index"
          }
        ]
      }
    ]
  },
  "lastUpdated": {
    "text": "最近更新",
    "formatOptions": {
      "dateStyle": "full",
      "timeStyle": "medium"
    }
  },
  "search": {
    "provider": "local"
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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