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

{
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/xiexin12138"
    }
  ],
  "search": {
    "provider": "local",
    "options": {
      "locales": {
        "root": {
          "translations": {
            "button": {
              "buttonText": "搜索",
              "buttonAriaLabel": "搜索"
            },
            "modal": {
              "displayDetails": "显示详细列表",
              "resetButtonTitle": "重置搜索",
              "backButtonTitle": "关闭搜索",
              "noResultsText": "没有结果",
              "footer": {
                "selectText": "选择",
                "selectKeyAriaLabel": "输入",
                "navigateText": "导航",
                "navigateUpKeyAriaLabel": "上箭头",
                "navigateDownKeyAriaLabel": "下箭头",
                "closeText": "关闭",
                "closeKeyAriaLabel": "esc"
              }
            }
          }
        }
      }
    }
  },
  "logo": "/images/me-gray.jpg",
  "outline": {
    "level": [
      2,
      4
    ],
    "label": "目录"
  },
  "footer": {
    "message": "非商业用途，允许转载，需注明出处",
    "copyright": "Copyright © 2024-2026 Jia him"
  },
  "nav": [
    {
      "text": "主页",
      "link": "/"
    }
  ],
  "langMenuLabel": "多语言",
  "returnToTopLabel": "回到顶部",
  "sidebarMenuLabel": "菜单",
  "darkModeSwitchLabel": "主题",
  "lightModeSwitchTitle": "切换到浅色模式",
  "darkModeSwitchTitle": "切换到深色模式",
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "sidebar": [
    {
      "text": "目录",
      "items": [
        {
          "text": "读书笔记",
          "items": [
            {
              "text": "Vue.js技术揭秘",
              "collapsed": false,
              "items": [
                {
                  "text": "Vue2.x 版本",
                  "collapsed": false,
                  "items": [
                    {
                      "text": "`src/core/instance/lifecycle.js` 中的 `mountComponent`",
                      "link": "/zh/book/Vue.js技术揭秘/Vue2.x 版本/what-happen-when-mount"
                    },
                    {
                      "text": "组件化中的 `patch`",
                      "link": "/zh/book/Vue.js技术揭秘/Vue2.x 版本/patch"
                    }
                  ]
                },
                {
                  "text": "说明",
                  "link": "/zh/book/Vue.js技术揭秘/info"
                }
              ]
            },
            {
              "text": "领域驱动设计：软件核心复杂性应对之道",
              "link": "/zh/book/2025-01-04"
            }
          ]
        },
        {
          "text": "技术文章",
          "items": [
            {
              "text": "vitepress 踩坑记录",
              "link": "/zh/skill/vitepress-record"
            },
            {
              "text": "Vercel 踩坑记录",
              "link": "/zh/skill/vercel-record"
            },
            {
              "text": "NPM 报错集锦",
              "link": "/zh/skill/npm"
            },
            {
              "text": "ES6细节备忘录",
              "link": "/zh/skill/es6"
            },
            {
              "text": "chat-bot 踩坑指南",
              "link": "/zh/skill/chat-bot-record"
            },
            {
              "text": "Python 踩坑记录",
              "link": "/zh/skill/2025-08-18-python"
            },
            {
              "text": "高德地图官方转坐标失败",
              "link": "/zh/skill/2025-07-31-gaode-map"
            }
          ]
        },
        {
          "text": "随笔",
          "items": [
            {
              "text": "用 MacBook Air M4 32G 跑 z-image-turbo 生成 NSFW 的图",
              "link": "/zh/essay/2026-03-06"
            },
            {
              "text": "大语言模型基于数据自动生成PPT的方案",
              "link": "/zh/essay/2025-05-23"
            },
            {
              "text": "为什么我自己开发一个能发送请求的网页，无法保存到本地直接使用？",
              "link": "/zh/essay/2025-01-28"
            }
          ]
        },
        {
          "text": "经验之谈",
          "items": [
            {
              "text": "在谷歌 colab 上，使用 yolov7 进行车牌检测试验",
              "link": "/zh/work/2024-12-18"
            },
            {
              "text": "重复请执行查询求导致关联方异常",
              "link": "/zh/work/2024-10-21"
            },
            {
              "text": "将旧项目的 babel6 升级到 babel7",
              "link": "/zh/work/2024-06-03"
            },
            {
              "text": "优化 Vue2 旧项目的 Eslint 配置",
              "link": "/zh/work/2024-05-13"
            },
            {
              "text": "vue2 老项目改造使用 tailwindcss 踩坑记录",
              "link": "/zh/work/2024-05-11"
            },
            {
              "text": "时间段内不重叠配置处理",
              "link": "/zh/work/2024-04-29-02"
            },
            {
              "text": "在接手的项目中，发现开发环境使用了压缩版本的 vue",
              "link": "/zh/work/2024-04-29-01"
            }
          ]
        },
        {
          "text": "网站数据",
          "link": "/my-site"
        }
      ]
    }
  ]
}

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.