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": "/favicon.png",
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "分类",
      "items": [
        {
          "text": "前端",
          "link": "/frontend/index"
        },
        {
          "text": "服务端",
          "link": "/backend/index"
        },
        {
          "text": "数据结构与算法",
          "link": "/algorithm/index"
        },
        {
          "text": "科学上网",
          "link": "/vpn/index"
        }
      ]
    },
    {
      "text": "其他",
      "link": "/markdown-examples"
    }
  ],
  "sidebar": {
    "/frontend/": [
      {
        "text": "前端",
        "collapsed": false,
        "items": [
          {
            "text": "webpack 配置优化攻略（一）",
            "link": "/frontend/build/webpack-optimize"
          },
          {
            "text": "封装一个多级表头的Table组件",
            "link": "/frontend/component/dynamic-table"
          },
          {
            "text": "前端文件上传",
            "link": "/frontend/file-upload/normal"
          },
          {
            "text": "大文件切片上传",
            "link": "/frontend/file-upload/slice"
          },
          {
            "text": "修改iframe内部元素的样式",
            "link": "/frontend/iframe"
          },
          {
            "text": "Flex 布局",
            "link": "/frontend/layout/Flexbox-layout"
          }
        ]
      }
    ],
    "/backend/": [
      {
        "text": "服务端",
        "collapsed": false,
        "items": [
          {
            "text": "JWT",
            "link": "/backend/jwt"
          },
          {
            "text": "refresh token",
            "link": "/backend/refresh-token"
          }
        ]
      }
    ],
    "/algorithm/": [
      {
        "text": "数组",
        "collapsed": false,
        "items": [
          {
            "text": "数组扁平化",
            "link": "/algorithm/flattenArray"
          }
        ]
      },
      {
        "text": "链表",
        "collapsed": false,
        "items": []
      }
    ],
    "/vpn/": [
      {
        "text": "自由上网",
        "collapsed": false,
        "items": [
          {
            "text": "小白也能搭建v2ray机场教程",
            "link": "/vpn/v2ray"
          },
          {
            "text": "脚本一键搭建OpenVPN服务器",
            "link": "/vpn/open-vpn"
          },
          {
            "text": "IKEv2 自建VPN教程",
            "link": "/vpn/IKEv2"
          },
          {
            "text": "vultr vps注册登录保姆级攻略",
            "link": "/vpn/vultr"
          }
        ]
      }
    ],
    "/interview/": [
      {
        "text": "前端面试",
        "collapsed": true,
        "items": [
          {
            "text": "当你在浏览器中输入网址后发生了什么",
            "link": "/interview/put-url-in-browser"
          },
          {
            "text": "一篇搞定面试中的跨域问题",
            "link": "/interview/cors"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/iicoom"
    }
  ],
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2025-present IICOOM. All rights reserved."
  },
  "lastUpdated": {
    "text": "最后更新于",
    "formatOptions": {
      "dateStyle": "short",
      "timeStyle": "short"
    }
  },
  "search": {
    "provider": "local"
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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