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

{
  "logo": "/favicon.ico",
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "笔记",
      "link": "/notes/index.md"
    },
    {
      "text": "实战",
      "link": "/projects/index.md"
    },
    {
      "text": "面试",
      "link": "/interview/index.md"
    },
    {
      "text": "成长",
      "link": "/growth/index.md"
    }
  ],
  "outline": {
    "level": [
      2,
      4
    ],
    "label": "页面导航"
  },
  "docFooter": {
    "prev": "⬅️ 上一篇",
    "next": "下一篇 ➡️"
  },
  "lastUpdatedText": "最后更新于",
  "returnToTopLabel": "返回顶部",
  "sidebarMenuLabel": "目录",
  "darkModeSwitchLabel": "切换主题",
  "darkModeSwitchTitle": "切换到深色主题",
  "lightModeSwitchTitle": "切换到浅色主题",
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/HelloCris/CrisWiki"
    }
  ],
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2026-present HelloCris"
  },
  "sidebar": [
    {
      "text": "👩‍💻简介",
      "collapsed": false,
      "items": [
        {
          "text": "Cris是谁?",
          "link": "/profile/who-is-cris"
        },
        {
          "text": "笔记说明",
          "link": "/profile/disclaimer"
        }
      ]
    },
    {
      "text": "📝 笔记",
      "collapsed": false,
      "items": [
        {
          "text": "目录",
          "link": "/notes/index.md"
        },
        {
          "text": "HTML",
          "collapsed": true,
          "items": [
            {
              "text": "HTML基础",
              "link": "/notes/html/base.md"
            },
            {
              "text": "HTML5",
              "link": "/notes/html/html5.md"
            },
            {
              "text": "无障碍(a11y)",
              "link": "/notes/html/a11y.md"
            }
          ]
        },
        {
          "text": "CSS",
          "collapsed": true,
          "items": [
            {
              "text": "CSS基础",
              "link": "/notes/css/base.md"
            },
            {
              "text": "CSS属性",
              "link": "/notes/css/property.md"
            },
            {
              "text": "CSS3",
              "link": "/notes/css/css3.md"
            }
          ]
        },
        {
          "text": "JavaScript",
          "collapsed": true,
          "items": [
            {
              "text": "JavaScript基础",
              "link": "/notes/js/base.md"
            },
            {
              "text": "DOM",
              "link": "/notes/js/dom.md"
            },
            {
              "text": "JavaScript高级",
              "link": "/notes/js/advanced.md"
            },
            {
              "text": "js模块化",
              "link": "/notes/js/module.md"
            },
            {
              "text": "正则表达式",
              "link": "/notes/js/regex.md"
            }
          ]
        },
        {
          "text": "TypeScript",
          "collapsed": true,
          "items": [
            {
              "text": "TypeScript基础",
              "link": "/notes/ts/base.md"
            },
            {
              "text": "TypeScript高级类型",
              "link": "/notes/ts/advancedTypes.md"
            }
          ]
        },
        {
          "text": "Node.js",
          "collapsed": true,
          "items": [
            {
              "text": "Node.js基础",
              "link": "/notes/nodejs/base.md"
            },
            {
              "text": "Express",
              "link": "/notes/nodejs/express.md"
            },
            {
              "text": "数据库",
              "link": "/notes/nodejs/database.md"
            }
          ]
        },
        {
          "text": "IT基础知识",
          "collapsed": true,
          "items": [
            {
              "text": "Linux",
              "link": "/notes/others/linux.md"
            },
            {
              "text": "Git",
              "link": "/notes/others/git.md"
            },
            {
              "text": "网络",
              "link": "/notes/others/network.md"
            }
          ]
        }
      ]
    },
    {
      "text": "🛠️ 实战（待排期）",
      "collapsed": false,
      "items": [
        {
          "text": "目录",
          "link": "/projects/index.md"
        },
        {
          "text": "课题一",
          "items": [
            {
              "text": "第一节",
              "link": ""
            }
          ]
        }
      ]
    },
    {
      "text": "🎯 面试（待排期）",
      "collapsed": false,
      "items": [
        {
          "text": "目录",
          "link": "/interview/index.md"
        },
        {
          "text": "课题一",
          "items": [
            {
              "text": "第一节",
              "link": ""
            }
          ]
        }
      ]
    },
    {
      "text": "📈 成长（预留）",
      "collapsed": false,
      "items": [
        {
          "text": "目录",
          "link": "/growth/index.md"
        },
        {
          "text": "课题一",
          "items": [
            {
              "text": "第一节",
              "link": ""
            }
          ]
        }
      ]
    },
    {
      "text": "Examples",
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/markdown-examples"
        },
        {
          "text": "Runtime API Examples",
          "link": "/api-examples"
        }
      ]
    }
  ],
  "search": {
    "provider": "local",
    "options": {
      "locales": {
        "root": {
          "translations": {
            "button": {
              "buttonText": "搜索文档",
              "buttonAriaLabel": "搜索文档"
            },
            "modal": {
              "displayDetails": "显示详情",
              "resetButtonTitle": "清除搜索条件",
              "backButtonTitle": "返回搜索结果",
              "noResultsText": "没有找到相关结果",
              "footer": {
                "selectText": "选择",
                "navigateText": "切换",
                "closeText": "关闭"
              }
            }
          }
        }
      }
    }
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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