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": "B站教程配套",
      "link": "/tutorials/"
    },
    {
      "text": "B站主页",
      "link": "https://space.bilibili.com/你的B站UID"
    }
  ],
  "sidebar": {
    "/tutorials/": [
      {
        "text": "入门基础系列",
        "items": [
          {
            "text": "P1：环境搭建与配置",
            "link": "/tutorials/p1-setup"
          },
          {
            "text": "P2：核心语法与实战",
            "link": "/tutorials/p2-syntax"
          }
        ]
      },
      {
        "text": "进阶实战系列",
        "items": [
          {
            "text": "P3：项目部署上线",
            "link": "/tutorials/p3-deploy"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/msjjacky-byte/JQ-blog"
    }
  ]
}

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.