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
{
"search": {
"provider": "local",
"options": {
"locales": {
"root": {
"translations": {
"button": {
"buttonText": "搜索文档",
"buttonAriaLabel": "搜索文档"
},
"modal": {
"noResultsText": "无法找到相关结果",
"resetButtonTitle": "清除查询条件",
"footer": {
"selectText": "选择",
"navigateText": "切换",
"closeText": "关闭"
}
}
}
}
},
"detailedView": true,
"miniSearch": {
"searchOptions": {
"fuzzy": true,
"prefix": true,
"boost": {
"title": 2,
"content": 1
}
}
}
}
},
"footer": {
"message": "基于 MIT 许可发布",
"copyright": "版权所有 © 2010-至今 upidea.com"
},
"docFooter": {
"prev": "上一页",
"next": "下一页"
},
"outline": {
"level": [
2,
6
],
"label": "页面导航"
},
"lastUpdated": {
"text": "最后更新于",
"formatOptions": {
"dateStyle": "short",
"timeStyle": "short"
}
},
"langMenuLabel": "多语言",
"returnToTopLabel": "回到顶部",
"sidebarMenuLabel": "菜单",
"skipToContentLabel": "跳转到内容",
"nav": [
{
"text": "项目清单",
"link": "/projects"
},
{
"text": "更新纪要",
"link": "/changelog"
},
{
"text": "开发随记",
"link": "/development/"
}
],
"sidebar": {
"/development/": [
{
"text": "development",
"items": [
{
"text": "vcpkg",
"items": [
{
"text": "01-basics",
"link": "/development/vcpkg/01-basics.md"
},
{
"text": "02-cmake-integration",
"link": "/development/vcpkg/02-cmake-integration.md"
},
{
"text": "03-baseline",
"link": "/development/vcpkg/03-baseline.md"
},
{
"text": "04-maintainer-mode",
"link": "/development/vcpkg/04-maintainer-mode.md"
},
{
"text": "05-overlay",
"link": "/development/vcpkg/05-overlay.md"
},
{
"text": "06-advanced",
"link": "/development/vcpkg/06-advanced.md"
},
{
"text": "07-troubleshooting",
"link": "/development/vcpkg/07-troubleshooting.md"
},
{
"text": "appendix",
"link": "/development/vcpkg/appendix.md"
}
],
"collapsed": true
},
{
"text": "rmlui",
"items": [
{
"text": "04-animation-effects",
"items": [
{
"text": "01-transitions",
"link": "/development/rmlui/04-animation-effects/01-transitions.md"
},
{
"text": "02-keyframe-animation",
"link": "/development/rmlui/04-animation-effects/02-keyframe-animation.md"
},
{
"text": "03-transforms",
"link": "/development/rmlui/04-animation-effects/03-transforms.md"
},
{
"text": "04-filters",
"link": "/development/rmlui/04-animation-effects/04-filters.md"
},
{
"text": "05-gradients-shadows",
"link": "/development/rmlui/04-animation-effects/05-gradients-shadows.md"
},
{
"text": "06-particle-effects",
"link": "/development/rmlui/04-animation-effects/06-particle-effects.md"
},
{
"text": "README",
"link": "/development/rmlui/04-animation-effects/README.md"
}
],
"collapsed": true
},
{
"text": "05-advanced-custom",
"items": [
{
"text": "01-custom-elements",
"link": "/development/rmlui/05-advanced-custom/01-custom-elements.md"
},
{
"text": "02-custom-decorators",
"link": "/development/rmlui/05-advanced-custom/02-custom-decorators.md"
},
{
"text": "03-event-handlers",
"link": "/development/rmlui/05-advanced-custom/03-event-handlers.md"
},
{
"text": "04-plugin-development",
"link": "/development/rmlui/05-advanced-custom/04-plugin-development.md"
},
{
"text": "05-svg-integration",
"link": "/development/rmlui/05-advanced-custom/05-svg-integration.md"
},
{
"text": "06-lottie-animation",
"link": "/development/rmlui/05-advanced-custom/06-lottie-animation.md"
},
{
"text": "README",
"link": "/development/rmlui/05-advanced-custom/README.md"
}
],
"collapsed": true
},
{
"text": "06-architecture",
"items": [
{
"text": "01-ui-architecture",
"link": "/development/rmlui/06-architecture/01-ui-architecture.md"
},
{
"text": "02-interface-management",
"link": "/development/rmlui/06-architecture/02-interface-management.md"
},
{
"text": "03-localization",
"link": "/development/rmlui/06-architecture/03-localization.md"
},
{
"text": "04-theme-system",
"link": "/development/rmlui/06-architecture/04-theme-system.md"
},
{
"text": "05-performance-optimization",
"link": "/development/rmlui/06-architecture/05-performance-optimization.md"
},
{
"text": "06-debugging-tips",
"link": "/development/rmlui/06-architecture/06-debugging-tips.md"
},
{
"text": "README",
"link": "/development/rmlui/06-architecture/README.md"
}
],
"collapsed": true
},
{
"text": "01-basics",
"items": [
{
"text": "01-environment-setup",
"link": "/development/rmlui/01-basics/01-environment-setup.md"
},
{
"text": "02-core-concepts",
"link": "/development/rmlui/01-basics/02-core-concepts.md"
},
{
"text": "03-rml-basics",
"link": "/development/rmlui/01-basics/03-rml-basics.md"
},
{
"text": "04-rcss-basics",
"link": "/development/rmlui/01-basics/04-rcss-basics.md"
},
{
"text": "05-first-integration",
"link": "/development/rmlui/01-basics/05-first-integration.md"
},
{
"text": "README",
"link": "/development/rmlui/01-basics/README.md"
}
],
"collapsed": true
},
{
"text": "02-layout-style",
"items": [
{
"text": "01-layout-system",
"link": "/development/rmlui/02-layout-style/01-layout-system.md"
},
{
"text": "02-advanced-style",
"link": "/development/rmlui/02-layout-style/02-advanced-style.md"
},
{
"text": "03-built-in-controls",
"link": "/development/rmlui/02-layout-style/03-built-in-controls.md"
},
{
"text": "04-template-system",
"link": "/development/rmlui/02-layout-style/04-template-system.md"
},
{
"text": "05-resource-management",
"link": "/development/rmlui/02-layout-style/05-resource-management.md"
},
{
"text": "06-responsive-design",
"link": "/development/rmlui/02-layout-style/06-responsive-design.md"
},
{
"text": "README",
"link": "/development/rmlui/02-layout-style/README.md"
}
],
"collapsed": true
},
{
"text": "03-interaction-data",
"items": [
{
"text": "01-event-system",
"link": "/development/rmlui/03-interaction-data/01-event-system.md"
},
{
"text": "02-data-binding-basics",
"link": "/development/rmlui/03-interaction-data/02-data-binding-basics.md"
},
{
"text": "03-data-binding-advanced",
"link": "/development/rmlui/03-interaction-data/03-data-binding-advanced.md"
},
{
"text": "04-custom-data-views",
"link": "/development/rmlui/03-interaction-data/04-custom-data-views.md"
},
{
"text": "05-two-way-binding",
"link": "/development/rmlui/03-interaction-data/05-two-way-binding.md"
},
{
"text": "06-dom-manipulation",
"link": "/development/rmlui/03-interaction-data/06-dom-manipulation.md"
},
{
"text": "README",
"link": "/development/rmlui/03-interaction-data/README.md"
}
],
"collapsed": true
},
{
"text": "README",
"link": "/development/rmlui/README.md"
},
{
"text": "real-project-example-editor-ui",
"link": "/development/rmlui/real-project-example-editor-ui.md"
},
{
"text": "real-project-example-game-ui",
"link": "/development/rmlui/real-project-example-game-ui.md"
}
],
"collapsed": true
},
{
"text": "game",
"items": [
{
"text": "相对鼠标模式",
"link": "/development/game/相对鼠标模式.md"
}
],
"collapsed": true
},
{
"text": "c++",
"items": [
{
"text": "vector-list",
"link": "/development/c++/vector-list.md"
}
],
"collapsed": true
},
{
"text": "vitepress",
"link": "/development/vitepress.md"
},
{
"text": "tmxlite",
"link": "/development/tmxlite.md"
},
{
"text": "markdown-examples",
"link": "/development/markdown-examples.md"
},
{
"text": "plantuml",
"link": "/development/plantuml.md"
},
{
"text": "git场景纪要",
"link": "/development/git场景纪要.md"
},
{
"text": "development",
"link": "/development/development.md"
},
{
"text": "WebAssembly_Porting_Tutorial",
"link": "/development/WebAssembly_Porting_Tutorial.md"
},
{
"text": "api-examples",
"link": "/development/api-examples.md"
},
{
"text": "Entt中ECS的用法",
"link": "/development/Entt中ECS的用法.md"
},
{
"text": "ImGui基础",
"link": "/development/ImGui基础.md"
},
{
"text": "Tiled地图解析思路",
"link": "/development/Tiled地图解析思路.md"
}
],
"collapsed": false
}
]
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/upidea/"
}
]
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep",
"hide": true
},
"headers": [],
"relativePath": "development/api-examples.md",
"filePath": "development/api-examples.md",
"lastUpdated": 1771662137000
}Page Frontmatter
{
"outline": "deep",
"hide": true
}More
Check out the documentation for the full list of runtime APIs.