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

{
  "outline": {
    "label": "页面导航"
  },
  "docFooter": {
    "prev": "上一篇",
    "next": "下一篇"
  },
  "returnToTopLabel": "返回顶部",
  "sidebarMenuLabel": "导航菜单",
  "logo": "/logo.png",
  "siteTitle": "工作博客",
  "footer": {
    "message": "渝ICP备18004947号",
    "copyright": "Copyright © 2026 Tsan Yang"
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "技术方向",
      "items": [
        {
          "text": "视觉图像",
          "link": "/visual"
        },
        {
          "text": "人工智能",
          "link": "/ai"
        }
      ]
    },
    {
      "text": "管理方向",
      "items": [
        {
          "text": "技术管理",
          "link": "/tm"
        },
        {
          "text": "项目管理",
          "link": "/pm"
        },
        {
          "text": "首席执行官",
          "link": "/cto"
        },
        {
          "text": "首席信息官",
          "link": "/cio"
        }
      ]
    },
    {
      "text": "关于我",
      "link": "/about"
    }
  ],
  "sidebar": {
    "/visual/": [
      {
        "text": "Cvat",
        "link": "/visual/cvat"
      },
      {
        "text": "Cvat之自动标注",
        "link": "/visual/cvat-annotation"
      },
      {
        "text": "图像变换",
        "link": "/"
      },
      {
        "text": "图像局部与分割",
        "link": "/"
      },
      {
        "text": "轮廓",
        "link": "/"
      },
      {
        "text": "跟踪与运动",
        "link": "/"
      },
      {
        "text": "投影三维视觉",
        "link": "/"
      },
      {
        "text": "摄像机模型与标定",
        "link": "/"
      },
      {
        "text": "机器学习",
        "link": "/"
      }
    ],
    "/ai/": [
      {
        "text": "机器学习",
        "link": "/ai/ml-frame"
      },
      {
        "text": "机器学习之模型训练",
        "link": "/ai/ml-train"
      },
      {
        "text": "机器学习之模型评估与调优",
        "link": "/ai/ml-tuning"
      },
      {
        "text": "机器学习之容器化部署",
        "link": "/ai/ml-deploy"
      },
      {
        "text": "机器学习之训练运维",
        "link": "/ai/ml-ops"
      },
      {
        "text": "智能体框架",
        "link": "/ai/agent"
      }
    ],
    "/tm/": [
      {
        "text": "管理心法",
        "link": "/tm/manage"
      },
      {
        "text": "管理心法之看方向",
        "link": "/tm/manage-direction"
      },
      {
        "text": "管理心法之带人",
        "link": "/tm/manage-leadingPeople"
      },
      {
        "text": "管理心法之做事",
        "link": "/tm/manage-task"
      },
      {
        "text": "管理心法之沟通",
        "link": "/tm/manage-talk"
      },
      {
        "text": "研发效率",
        "link": "/tm/efficiency"
      },
      {
        "text": "研发效率之优化流程",
        "link": "/tm/optimize-process"
      },
      {
        "text": "研发效率之团队工程",
        "link": "/tm/efficiency-teams"
      },
      {
        "text": "研发效率之个人工程",
        "link": "/tm/efficiency-individual"
      },
      {
        "text": "研发效率之管理和文化",
        "link": "/tm/efficiency-culture"
      }
    ],
    "/pm/": [
      {
        "text": "立项管理",
        "link": "/"
      },
      {
        "text": "范围管理",
        "link": "/"
      },
      {
        "text": "进度管理",
        "link": "/"
      },
      {
        "text": "成本管理",
        "link": "/"
      },
      {
        "text": "质量管理",
        "link": "/"
      },
      {
        "text": "资源管理",
        "link": "/"
      },
      {
        "text": "沟通管理",
        "link": "/"
      },
      {
        "text": "采购管理",
        "link": "/"
      },
      {
        "text": "风险管理",
        "link": "/"
      },
      {
        "text": "干系人",
        "link": "/"
      },
      {
        "text": "整合管理",
        "link": "/"
      }
    ],
    "/cto/": [
      {
        "text": "打作团队战斗力",
        "link": "/"
      }
    ],
    "/officer/": [
      {
        "text": "领导力",
        "link": "/"
      },
      {
        "text": "人员管理",
        "link": "/"
      },
      {
        "text": "技术实力",
        "link": "/"
      },
      {
        "text": "体系搭建",
        "link": "/"
      },
      {
        "text": "文化构建",
        "link": "/"
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

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.