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:
md
<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": "/logo.png",
"nav": [
{
"text": "首页",
"link": "/"
},
{
"text": "学习笔记",
"link": "/learnRecord/",
"activeMatch": "^/learnRecord/"
},
{
"text": "面试手册",
"link": "/interviewBook/",
"activeMatch": "^/interviewBook/"
},
{
"text": "看看文采哇",
"link": "/titles/",
"activeMatch": "^/titles/"
}
],
"outline": {
"level": [
2,
3
],
"label": "本页内容"
},
"sidebar": {
"/titles/": [
{
"text": "概述",
"link": "/titles/"
},
{
"text": "2025",
"items": [
{
"text": "哪吒",
"link": "/titles/2025/哪吒"
},
{
"text": "把流动的时间变成灵动的历史",
"link": "/titles/2025/把流动的时间变成灵动的历史"
},
{
"text": "数字经济是高质量发展的新动能",
"link": "/titles/2025/数字经济是高质量发展的新动能"
},
{
"text": "生活句子",
"link": "/titles/2025/生活句子"
},
{
"text": "用心用情下基层",
"link": "/titles/2025/用心用情下基层"
},
{
"text": "经典句子",
"link": "/titles/2025/经典句子"
}
]
},
{
"text": "热评总结",
"items": [
{
"text": "每日一句",
"link": "/titles/热评总结/每日一句"
},
{
"text": "法治聚焦",
"link": "/titles/热评总结/法治聚焦"
}
]
},
{
"text": "类型",
"items": [
{
"text": "对策",
"link": "/titles/类型/对策"
},
{
"text": "综合题",
"link": "/titles/类型/综合题"
}
]
},
{
"text": "资料分析",
"items": [
{
"text": "分数比较",
"link": "/titles/资料分析/分数比较"
},
{
"text": "十三姨",
"link": "/titles/资料分析/十三姨"
},
{
"text": "基期量与现期量",
"link": "/titles/资料分析/基期量与现期量"
},
{
"text": "增长率",
"link": "/titles/资料分析/增长率"
},
{
"text": "截位直除",
"link": "/titles/资料分析/截位直除"
},
{
"text": "比重和平均数",
"link": "/titles/资料分析/比重和平均数"
}
]
},
{
"text": "常见成语",
"items": [
{
"text": "传统文化",
"link": "/titles/常见成语/传统文化"
}
]
}
],
"/interviewBook/": [
{
"items": [
{
"text": "面试手册",
"link": "/interviewBook/",
"items": [
{
"text": "高频基础面试题",
"link": "/interviewBook/fundamental"
},
{
"text": "高频手写面试题",
"link": "/interviewBook/write"
},
{
"text": "高频框架面试题",
"link": "/interviewBook/framework"
},
{
"text": "高频CSS面试题",
"link": "/interviewBook/css"
},
{
"text": "面试",
"link": "/interviewBook/面试"
}
]
}
]
}
],
"/": [
{
"text": "Examples",
"items": [
{
"text": "Markdown Examples",
"link": "/markdownExamples"
},
{
"text": "Runtime API Examples",
"link": "/apiExamples"
},
{
"text": "React Template",
"link": "/studyReact"
}
]
},
{
"text": "Locks",
"items": [
{
"text": "Lock Comp Examples",
"link": "/locks/demo01"
}
]
},
{
"text": "软考",
"items": [
{
"text": "上午",
"items": [
{
"text": "知识版权相关",
"link": "/software/am/知识版权相关"
},
{
"text": "数据库相关",
"link": "/software/am/数据库相关"
},
{
"text": "UML图相关",
"link": "/software/am/UML图相关"
}
]
},
{
"text": "下午",
"items": [
{
"text": "下午第一题",
"link": "/software/pm/1"
}
]
}
]
},
{
"text": "MySQL",
"items": [
{
"text": "基础入门",
"link": "/sql/1"
},
{
"text": "语法展示",
"link": "/sql/2"
},
{
"text": "运算符",
"link": "/sql/3"
},
{
"text": "常见操作",
"link": "/sql/4"
}
]
},
{
"text": "学习笔记",
"link": "/learnRecord/",
"items": [
{
"text": "基础篇",
"items": [
{
"text": "模块化知识",
"link": "/learnRecord/l1"
},
{
"text": "基础知识",
"link": "/learnRecord/basic"
},
{
"text": "常见手写",
"link": "/learnRecord/handlingWriting"
}
]
},
{
"text": "浏览器相关知识",
"items": [
{
"text": "渲染流程",
"link": "/browser/l1"
},
{
"text": "渲染优化",
"link": "/browser/l2"
}
]
},
{
"text": "框架篇",
"items": [
{
"text": "Vue",
"link": "/framework/vue",
"items": [
{
"text": "Vue 组件通信",
"link": "/framework/vueComponent"
},
{
"text": "Vue 生命周期",
"link": "/framework/vueLifestyle"
},
{
"text": "Vue生态工具篇",
"items": [
{
"text": "Vue-Router",
"link": "/framework/vueRouter"
},
{
"text": "Vuex",
"link": "/framework/vuex"
},
{
"text": "Pinia",
"link": "/framework/pinia"
}
]
},
{
"text": "Vue2 源码",
"link": "/framework/vue2Source",
"items": [
{
"text": "数据挂载",
"link": "/framework/Vue2/vue2data"
},
{
"text": "组件化基础",
"link": "/framework/Vue2/component"
},
{
"text": "响应式",
"link": "/framework/Vue2/reactive"
}
]
},
{
"text": "Vue3 源码",
"link": "/framework/vue3Source",
"items": [
{
"text": "第5章",
"link": "/Vue3/lesson5"
}
]
}
]
},
{
"text": "Nuxt",
"items": [
{
"text": "项目初始化",
"link": "/framework/Nuxt/Nuxt项目初始化.md"
}
]
},
{
"text": "React",
"link": "/framework/react",
"items": [
{
"text": "React生态工具篇",
"items": [
{
"text": "React-Router",
"link": "/framework/reactRouter"
},
{
"text": "Redux",
"link": "/framework/redux"
}
]
}
]
}
]
},
{
"text": "打包工具篇",
"items": [
{
"text": "Vite Webpack",
"link": "/framework/ViteAndWebpack"
}
]
}
]
},
{
"text": "Node学习",
"items": [
{
"text": "基础部分",
"link": "/nodejs/basic/lesson1"
},
{
"text": "进阶部分",
"link": "/nodejs/other/lesson1"
},
{
"text": "Koa",
"link": "/nodejs/Koa/koa"
},
{
"text": "NestJS",
"items": [
{
"text": "概述",
"link": "/nodejs/nestjs/overview"
},
{
"text": "创建一个NestJS应用",
"link": "/nodejs/nestjs/record"
}
]
}
]
}
]
},
"footer": {
"copyright": "Copyright © 2019-present ErHang",
"message": " <a href=\"https://beian.miit.gov.cn/\" target=\"_blank\">辽ICP备2023008348号-3 </a>"
},
"docFooter": {
"prev": "上一页",
"next": "下一页"
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/masterjiyuhang"
}
]
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "apiExamples.md",
"filePath": "apiExamples.md",
"lastUpdated": 1737337954000
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.