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": "/docs/tech/t01.md",
      "activeMatch": "/docs/tech"
    },
    {
      "text": "产品文档",
      "link": "/docs/rp/rbac.md",
      "activeMatch": "/docs/rp"
    },
    {
      "text": "通信小程序",
      "items": [
        {
          "text": "项目说明文档",
          "link": "/docs/TongXin/项目常用链接.md"
        },
        {
          "text": "UI原型更新日志",
          "link": "/docs/TongXin/更新日志.md"
        }
      ]
    },
    {
      "text": "接口文档",
      "link": "/docs/api/a01.md",
      "activeMatch": "/docs/api"
    },
    {
      "text": "公司站点",
      "link": "/docs/site/list.md"
    }
  ],
  "sidebar": {
    "/docs/tech/": [
      {
        "text": "技术架构",
        "items": [
          {
            "text": "技术选型",
            "link": "/docs/tech/t01.md"
          }
        ]
      }
    ],
    "/docs/rp/": [
      {
        "text": "产品文档",
        "items": [
          {
            "text": "设计准备工作",
            "link": "/docs/rp/设计准备工作.md"
          },
          {
            "text": "权限系统",
            "link": "/docs/rp/rbac.md"
          },
          {
            "text": "数据中心",
            "link": "/docs/rp/data.md"
          },
          {
            "text": "业务模块",
            "link": "/docs/rp/business.md"
          }
        ]
      }
    ],
    "/docs/api/": [
      {
        "text": "西游记-上卷",
        "items": [
          {
            "text": "灵根育孕源流出",
            "link": "/docs/api/t01.md"
          }
        ]
      },
      {
        "text": "西游记-中卷",
        "items": [
          {
            "text": "五行山下定心猿",
            "link": "/docs/api/t01.md"
          }
        ]
      },
      {
        "text": "西游记-下卷",
        "items": [
          {
            "text": "径回东土 五圣成真",
            "link": "/docs/api/t01.md"
          }
        ]
      }
    ],
    "/docs/TongXin": [
      {
        "text": "通信小程序",
        "items": [
          {
            "text": "项目常用链接",
            "link": "/docs/TongXin/项目常用链接.md"
          },
          {
            "text": "数据检索目标时间",
            "link": "/docs/TongXin/数据检索目标时间.md"
          },
          {
            "text": "授权场景说明",
            "link": "/docs/TongXin/授权场景说明.md"
          },
          {
            "text": "Ai择校",
            "link": "/docs/TongXin/Ai择校.md"
          },
          {
            "text": "国家线",
            "link": "/docs/TongXin/国家线板块说明.md"
          },
          {
            "text": "排名模块需求",
            "link": "/docs/TongXin/排名模块需求.md"
          },
          {
            "text": "学长学姐",
            "link": "/docs/TongXin/学长学姐.md"
          },
          {
            "text": "激活码激活",
            "link": "/docs/TongXin/激活码激活.md"
          },
          {
            "text": "刷题功能描述",
            "link": "/docs/TongXin/刷题功能描述.md"
          },
          {
            "text": "刷题题型说明",
            "link": "/docs/TongXin/刷题题型说明.md"
          },
          {
            "text": "后续需要做的事",
            "link": "/docs/TongXin/后续需要做的事.md"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "docs/api/a01.md",
  "filePath": "docs/api/a01.md"
}

Page Frontmatter

{
  "outline": "deep"
}

More

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