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": "202501",
"items": [
{
"text": "01",
"link": "/titles/202501/01"
},
{
"text": "04",
"link": "/titles/202501/04"
},
{
"text": "把流动的时间变成灵动的历史",
"link": "/titles/202501/把流动的时间变成灵动的历史"
},
{
"text": "数字经济是高质量发展的新动能",
"link": "/titles/202501/数字经济是高质量发展的新动能"
}
]
}
],
"/interviewBook/": [
{
"items": [
{
"text": "面试手册",
"link": "/interviewBook/",
"items": [
{
"text": "高频基础面试题",
"link": "/interviewBook/fundamental"
},
{
"text": "高频手写面试题",
"link": "/interviewBook/write"
},
{
"text": "高频框架面试题",
"link": "/interviewBook/framework"
},
{
"text": "高频CSS面试题",
"link": "/interviewBook/css"
}
]
}
]
}
],
"/": [
{
"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": 1709193456000
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.