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": "使用文档",
      "link": "/doc/start-doc.md"
    },
    {
      "text": "下载软件",
      "link": "/doc/download"
    }
  ],
  "logo": "/images/logo.png",
  "siteTitle": "PixStart",
  "sidebar": [
    {
      "text": "开始使用",
      "items": [
        {
          "text": "快速开始",
          "link": "/doc/start-doc.md"
        },
        {
          "text": "软件下载",
          "link": "/doc/download"
        },
        {
          "text": "更新日志",
          "link": "/doc/update/updateLog.md"
        }
      ]
    },
    {
      "text": "快速启动",
      "items": [
        {
          "text": "应用内快捷键",
          "link": "/doc/other/appfastkey.md"
        },
        {
          "text": "列表式视图",
          "link": "/doc/other/listView.md"
        },
        {
          "text": "浮空键盘(一键直达)",
          "link": "/doc/other/fastkeyboard.md"
        },
        {
          "text": "桌面悬浮球",
          "link": "/doc/other/globalBall.md"
        },
        {
          "text": "项目移动分类",
          "link": "/doc/other/move.md"
        },
        {
          "text": "自定义菜单",
          "link": "/doc/other/customMenu.md"
        },
        {
          "text": "更改项目图标",
          "link": "/doc/other/changIcon.md"
        },
        {
          "text": "树结构菜单",
          "link": "/doc/other/menuType.md"
        },
        {
          "text": "数据存储路径",
          "link": "/doc/other/dataPath.md"
        },
        {
          "text": "相对路径",
          "link": "/doc/other/relativePath.md"
        },
        {
          "text": "固定快速访问",
          "link": "/doc/other/quickAccess.md"
        }
      ]
    },
    {
      "text": "待办事项",
      "items": [
        {
          "text": "基本介绍",
          "link": "/doc/todo/basic.md"
        },
        {
          "text": "桌面小组件",
          "link": "/doc/todo/widget.md"
        },
        {
          "text": "快速创建事项",
          "link": "/doc/todo/createItem.md"
        },
        {
          "text": "思维导图专注模式",
          "link": "/doc/todo/mindtodo.md"
        }
      ]
    },
    {
      "text": "日程管理",
      "items": [
        {
          "text": "每日数据",
          "link": "/doc/calendar/day-data.md"
        }
      ]
    },
    {
      "text": "其他",
      "items": [
        {
          "text": "Pix脚本介绍",
          "link": "/doc/script/script.md"
        },
        {
          "text": "Pix脚本命令",
          "link": "/doc/script/cmd.md"
        },
        {
          "text": "PowerShell脚本介绍",
          "link": "/doc/script/powershell.md"
        },
        {
          "text": "自定义皮肤",
          "link": "/doc/other/customSkin.md"
        },
        {
          "text": "自定义菜单图标",
          "link": "/doc/other/customMenuIcon.md"
        }
      ]
    },
    {
      "text": "常见问题",
      "items": [
        {
          "text": "下载被拦截",
          "link": "/doc/safe/lanjie.md"
        },
        {
          "text": "1.2.6旧版下载",
          "link": "/doc/old-version.md"
        }
      ]
    }
  ],
  "returnToTopLabel": "Return to top",
  "sidebarMenuLabel": "Menu",
  "darkModeSwitchLabel": "Appearance",
  "footer": {
    "message": "",
    "copyright": "Copyright © 2026 PixStart. <a href=\"https://beian.miit.gov.cn/\" target=\"_blank\">皖ICP备19013259号-4</a>"
  },
  "detectBrowserLanguage": {
    "enable": true,
    "redirectWhenCookieNotSet": true
  }
}

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.