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": "示例",
      "link": "/markdown-examples"
    },
    {
      "text": "新闻",
      "link": "/news/"
    },
    {
      "text": "packages示例",
      "link": "/packages/"
    }
  ],
  "sidebar": {
    "/": {
      "base": "/",
      "items": [
        {
          "text": "Api-examples",
          "link": "/api-examples"
        },
        {
          "text": "Demo",
          "link": "/demo"
        },
        {
          "text": "Git教程",
          "items": [
            {
              "text": "Git版本控制工具详解笔记",
              "link": "/git教程/Git版本控制工具详解笔记"
            },
            {
              "text": "Git常用操作",
              "link": "/git教程/git常用操作"
            },
            {
              "text": "Git常用操作2-demo",
              "link": "/git教程/git常用操作2-demo"
            }
          ],
          "collapsed": true
        },
        {
          "text": "Markdown-examples",
          "link": "/markdown-examples"
        },
        {
          "text": "News",
          "items": [
            {
              "text": "华为新麒麟CPU9100性能曝光",
              "link": "/news/华为新麒麟CPU9100性能曝光"
            },
            {
              "text": "梦回1999！诺基亚3210-4G发布：349元-支持支付宝",
              "link": "/news/梦回1999！诺基亚3210-4G发布：349元-支持支付宝"
            },
            {
              "text": "英特尔发布N系列处理器",
              "link": "/news/英特尔发布N系列处理器"
            },
            {
              "text": "英特尔赛扬处理器介绍",
              "link": "/news/英特尔赛扬处理器介绍"
            }
          ],
          "collapsed": true
        },
        {
          "text": "Packages",
          "items": [
            {
              "text": "[pkg]",
              "link": "/packages/[pkg]"
            },
            {
              "text": "华为新麒麟CPU9100性能曝光",
              "link": "/packages/华为新麒麟CPU9100性能曝光"
            }
          ],
          "collapsed": true
        },
        {
          "text": "学习总结",
          "items": [
            {
              "text": "Python3.11安装scrapy出错的解决方法",
              "link": "/学习总结/python3.11安装scrapy出错的解决方法"
            },
            {
              "text": "前端",
              "items": [
                {
                  "text": "VUE3+TS项目打包和自动化部署",
                  "link": "/学习总结/前端/VUE3+TS项目打包和自动化部署"
                },
                {
                  "text": "Vue3+ts项目搭建",
                  "link": "/学习总结/前端/vue3+ts项目搭建"
                }
              ],
              "collapsed": true
            }
          ],
          "collapsed": true
        },
        {
          "text": "数学公式，KaTeX 語法",
          "link": "/数学公式，KaTeX 語法"
        },
        {
          "text": "英特尔发布N系列处理器",
          "link": "/英特尔发布N系列处理器"
        },
        {
          "text": "链接收藏",
          "items": [
            {
              "text": "JavaScript的24个循环遍历方法",
              "link": "/链接收藏/JavaScript的24个循环遍历方法"
            },
            {
              "text": "MarkDown添加图片的三种方式",
              "link": "/链接收藏/MarkDown添加图片的三种方式"
            },
            {
              "text": "Windows-11-10正式版官方原版镜像",
              "link": "/链接收藏/Windows-11-10正式版官方原版镜像"
            },
            {
              "text": "一款轻量级的虚拟机Multipass",
              "link": "/链接收藏/一款轻量级的虚拟机Multipass"
            }
          ],
          "collapsed": true
        }
      ]
    },
    "/news/": {
      "base": "/news/",
      "items": [
        {
          "text": "华为新麒麟CPU9100性能曝光",
          "link": "华为新麒麟CPU9100性能曝光"
        },
        {
          "text": "梦回1999！诺基亚3210-4G发布：349元-支持支付宝",
          "link": "梦回1999！诺基亚3210-4G发布：349元-支持支付宝"
        },
        {
          "text": "Img: images/intel-n.webp",
          "link": "英特尔发布N系列处理器"
        },
        {
          "text": "英特尔赛扬处理器介绍",
          "link": "英特尔赛扬处理器介绍"
        }
      ]
    }
  }
}

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.