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": "首页 (Home)",
      "link": "/"
    },
    {
      "text": "产品手册 (Docs)",
      "link": "/products/blood-pressure"
    },
    {
      "text": "门店反馈 (Support)",
      "link": "/feedback"
    }
  ],
  "sidebar": [
    {
      "text": "📦 核心产品线 (Products)",
      "items": [
        {
          "text": "血压计系列",
          "link": "/products/blood-pressure"
        },
        {
          "text": "制氧机系列",
          "link": "/products/oxygen"
        },
        {
          "text": "轮椅系列",
          "link": "/products/wheelchair"
        }
      ]
    },
    {
      "text": "🛠️ 门店工具 (Tools)",
      "items": [
        {
          "text": "缺货与异常上报",
          "link": "/feedback"
        }
      ]
    }
  ],
  "outline": {
    "label": "本页索引",
    "level": [
      2,
      3
    ]
  },
  "search": {
    "provider": "local"
  }
}

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.