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": "01审题方法——找点",
"link": "/titles/2025/01审题方法——找点"
},
{
"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": "生活句子",
"link": "/titles/2025/生活句子"
},
{
"text": "经典句子",
"link": "/titles/2025/经典句子"
}
]
},
{
"text": "热评总结",
"items": [
{
"text": "开创人民城市建设新局面",
"link": "/titles/热评总结/开创人民城市建设新局面"
},
{
"text": "每日一句",
"link": "/titles/热评总结/每日一句"
},
{
"text": "法治聚焦",
"link": "/titles/热评总结/法治聚焦"
}
]
},
{
"text": "题目类型",
"items": [
{
"text": "对策",
"link": "/titles/题目类型/对策"
},
{
"text": "综合题",
"link": "/titles/题目类型/综合题"
}
]
},
{
"text": "规范词",
"items": [
{
"text": "乡村振兴",
"link": "/titles/规范词/乡村振兴"
}
]
},
{
"text": "单一题",
"items": [
{
"text": "6+1提对策",
"link": "/titles/单一题/6+1提对策"
},
{
"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": "比重和平均数",
"link": "/titles/资料分析/比重和平均数"
}
]
},
{
"text": "言语理解",
"items": [
{
"text": "700词",
"link": "/titles/言语理解/700词"
},
{
"text": "大懒猫25省刷",
"link": "/titles/言语理解/大懒猫25省刷"
},
{
"text": "大懒猫言语",
"link": "/titles/言语理解/大懒猫言语"
},
{
"text": "开始",
"link": "/titles/言语理解/开始"
},
{
"text": "成语积累",
"link": "/titles/言语理解/成语积累"
},
{
"text": "模考答疑——言语",
"link": "/titles/言语理解/模考答疑——言语"
},
{
"text": "逻辑填空",
"link": "/titles/言语理解/逻辑填空"
}
]
},
{
"text": "判断推理",
"items": [
{
"text": "花生600",
"link": "/titles/判断推理/花生600"
}
]
},
{
"text": "数量关系",
"items": [
{
"text": "01倍数",
"link": "/titles/数量关系/01倍数"
}
]
},
{
"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.