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

{
  "siteTitle": "cmwrun",
  "logo": {
    "light": "/lightIcon/android-chrome-512x512.png",
    "dark": "/darkIcon/android-chrome-512x512.png"
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "更新记录",
      "link": "/updates"
    },
    {
      "text": "Front",
      "items": [
        {
          "text": "知识矩阵",
          "link": "/front/knowledge"
        },
        {
          "text": "组件库文档",
          "link": "/front/components"
        }
      ]
    }
  ],
  "outline": {
    "level": [
      2,
      4
    ],
    "label": "本页目录"
  },
  "lastUpdatedText": "最后更新",
  "docFooter": {
    "prev": "上一篇",
    "next": "下一篇"
  },
  "returnToTopLabel": "回到顶部",
  "sidebar": {
    "/front/": [
      {
        "text": "前端知识",
        "link": "/front/knowledge",
        "items": [
          {
            "text": "CORS",
            "link": "/front/knowledge/CORS"
          },
          {
            "text": "KMP 算法详解",
            "link": "/front/knowledge/KMP算法详解"
          },
          {
            "text": "React Diff 算法详解",
            "link": "/front/knowledge/React-Diff算法详解"
          },
          {
            "text": "Event Loop 事件循环详解",
            "link": "/front/knowledge/Event-Loop详解"
          },
          {
            "text": "浏览器渲染流水线与重排重绘",
            "link": "/front/knowledge/浏览器渲染流水线与重排重绘"
          },
          {
            "text": "CSS 堆叠上下文（Stacking Context）详解",
            "link": "/front/knowledge/CSS-Stacking-Context详解"
          },
          {
            "text": "Virtual DOM 与 Fiber 入门",
            "link": "/front/knowledge/Virtual-DOM与Fiber入门"
          },
          {
            "text": "防抖与节流",
            "link": "/front/knowledge/防抖与节流"
          }
        ]
      },
      {
        "text": "组件库文档",
        "link": "/front/components",
        "items": [
          {
            "text": "Button",
            "link": "/front/components/Button"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/cmw-big/vitePress"
    }
  ],
  "editLink": {
    "pattern": "https://github.com/cmw-big/vitePress/edit/master/:path",
    "text": "在 GitHub 上编辑此页"
  },
  "footer": {
    "message": "内容仅供学习参考，如有错误欢迎指正与 PR",
    "copyright": "Copyright © 2024-present cmwrun"
  },
  "search": {
    "provider": "algolia",
    "options": {
      "appId": "4DL7AT9ZB4",
      "apiKey": "73065b4c341778173db3361555d74351",
      "indexName": "cmwrunindex"
    }
  }
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md",
  "lastUpdated": 1745228055000
}

Page Frontmatter

{
  "outline": "deep"
}

More

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