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": "/cloud-capabilities"
    },
    {
      "text": "学习路径",
      "link": "/front/knowledge/学习路径与里程碑"
    },
    {
      "text": "更新记录",
      "link": "/updates"
    },
    {
      "text": "Front",
      "items": [
        {
          "text": "知识矩阵",
          "link": "/front/knowledge"
        },
        {
          "text": "组件库文档",
          "link": "/front/components"
        }
      ]
    }
  ],
  "outline": {
    "level": [
      2,
      4
    ],
    "label": "本页目录"
  },
  "lastUpdated": {
    "text": "最后更新",
    "formatOptions": {
      "dateStyle": "short",
      "timeStyle": "short"
    }
  },
  "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": "var / let / const 区别详解",
            "link": "/front/knowledge/var-let-const对比"
          },
          {
            "text": "Promise 链路与错误处理",
            "link": "/front/knowledge/Promise链路与错误处理"
          },
          {
            "text": "TypeScript 类型推断实战",
            "link": "/front/knowledge/TypeScript类型推断实战"
          },
          {
            "text": "HTTP 请求生命周期详解",
            "link": "/front/knowledge/HTTP请求生命周期详解"
          },
          {
            "text": "浏览器缓存策略实战",
            "link": "/front/knowledge/浏览器缓存策略实战"
          },
          {
            "text": "深拷贝与浅拷贝实战",
            "link": "/front/knowledge/深拷贝与浅拷贝实战"
          },
          {
            "text": "前端性能预算与监控清单",
            "link": "/front/knowledge/前端性能预算与监控清单"
          },
          {
            "text": "学习路径与里程碑",
            "link": "/front/knowledge/学习路径与里程碑"
          },
          {
            "text": "发布自回归检查手册",
            "link": "/front/knowledge/发布自回归检查手册"
          }
        ]
      },
      {
        "text": "组件库文档",
        "link": "/front/components",
        "items": [
          {
            "text": "Button",
            "link": "/front/components/Button"
          },
          {
            "text": "Select 选择器",
            "link": "/front/components/Select"
          },
          {
            "text": "Form 表单",
            "link": "/front/components/Form"
          }
        ]
      }
    ]
  },
  "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": "docs/guide/api-examples.md",
  "filePath": "docs/guide/api-examples.md",
  "lastUpdated": 1773374344000
}

Page Frontmatter

{
  "outline": "deep"
}

More

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