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.svg",
"outlineTitle": "本页导航",
"outline": [
2,
6
],
"nav": [
{
"text": "Home",
"link": "/"
},
{
"text": "Docs",
"activeMatch": "/docs/",
"items": [
{
"text": "快速开始",
"link": "/docs/quickstart"
},
{
"text": "我的组件",
"link": "/comps/elements/button"
},
{
"text": "我的hooks",
"link": "/hooks/useClickOutSide"
}
]
},
{
"text": "Examples",
"link": "/examples/markdown-examples"
}
],
"sidebar": {
"/docs/": [
{
"text": "Document",
"items": [
{
"text": "快速开始",
"link": "/docs/quickstart"
},
{
"text": "Prettierrc 配置",
"link": "/docs/prettierrc"
},
{
"text": "主题切换",
"link": "/docs/theme"
}
]
}
],
"/comps/": [
{
"text": "Elements",
"collapsed": false,
"items": [
{
"text": "Button 按钮",
"link": "/comps/elements/button"
},
{
"text": "Card3D 3D卡片",
"link": "/comps/elements/card3d"
},
{
"text": "Checkbox 多选框",
"link": "/comps/elements/checkbox"
},
{
"text": "MenuButton 菜单按钮",
"link": "/comps/elements/menuButton"
},
{
"text": "Radio 单选框",
"link": "/comps/elements/radio"
},
{
"text": "Switch 开关",
"link": "/comps/elements/switch"
}
]
},
{
"text": "Modules",
"collapsed": false,
"items": [
{
"text": "Avatar Crop 头像裁剪",
"link": "/comps/modules/avatarCrop"
},
{
"text": "VirtualList 虚拟列表",
"link": "/comps/modules/virtualList"
},
{
"text": "Waterfall 瀑布流",
"link": "/comps/modules/waterfall"
}
]
},
{
"text": "Tools",
"collapsed": false,
"items": [
{
"text": "AutoSliderList 自动滑块",
"link": "/comps/tools/autoSliderList"
},
{
"text": "AwaitList 异步列表循环",
"link": "/comps/tools/awaitList"
},
{
"text": "List 列表循环",
"link": "/comps/tools/list"
},
{
"text": "Message 消息提示",
"link": "/comps/tools/message"
},
{
"text": "Modal 弹窗",
"link": "/comps/tools/modal"
},
{
"text": "Pagination 分页",
"link": "/comps/tools/pagination"
},
{
"text": "Popover 气泡卡片",
"link": "/comps/tools/popover"
},
{
"text": "Popconfirm 气泡确认框",
"link": "/comps/tools/popconfirm"
},
{
"text": "PortalRenderer 命令式Dom",
"link": "/comps/tools/portalRenderer"
},
{
"text": "TemplateDialog 模版对话框",
"link": "/comps/tools/templateDialog"
},
{
"text": "Xscroll 滚动组件",
"link": "/comps/tools/xscroll"
}
]
}
],
"/hooks/": [
{
"text": "Hooks",
"items": [
{
"text": "useClickOutSide",
"link": "/hooks/useClickOutSide"
},
{
"text": "useCountdown",
"link": "/hooks/useCountdown"
},
{
"text": "useDefer",
"link": "/hooks/useDefer"
},
{
"text": "useEventListener",
"link": "/hooks/useEventListener"
},
{
"text": "useFullScreen",
"link": "/hooks/useFullScreen"
},
{
"text": "useGetElementSize",
"link": "/hooks/useGetElementSize"
},
{
"text": "useGlobalData",
"link": "/hooks/useGlobalData"
},
{
"text": "useKeypress",
"link": "/hooks/useKeypress"
},
{
"text": "useReactive",
"link": "/hooks/useReactive"
},
{
"text": "useTheme",
"link": "/hooks/useTheme"
},
{
"text": "useThemePro",
"link": "/hooks/useThemePro"
}
]
}
],
"/utils/": [
{
"text": "Utils",
"items": [
{
"text": "colorUtils",
"link": "/utils/colorUtils"
},
{
"text": "themeUtils",
"link": "/utils/themeUtils"
},
{
"text": "fullScreen",
"link": "/utils/fullScreen"
}
]
}
],
"/examples/": [
{
"text": "Examples",
"items": [
{
"text": "Markdown Examples",
"link": "/examples/markdown-examples"
},
{
"text": "Runtime API Examples",
"link": "/examples/api-examples"
}
]
}
]
},
"socialLinks": [
{
"icon": {
"svg": "<svg t=\"1724080930363\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5092\" width=\"512\" height=\"512\"><path d=\"M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z\" fill=\"#C71D23\" p-id=\"5093\"></path></svg>"
},
"link": "https://gitee.com/onoxm"
},
{
"icon": "github",
"link": "https://github.com/onoxm"
}
],
"footer": {
"copyright": "Copyright © 2024-present ONO"
},
"search": {
"provider": "local",
"options": {
"translations": {
"button": {
"buttonText": "搜索",
"buttonAriaLabel": "搜索文档"
},
"modal": {
"noResultsText": "没有找到结果",
"resetButtonTitle": "重置搜索条件",
"footer": {
"selectText": "选择",
"navigateText": "切换",
"closeText": "关闭"
}
}
}
}
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "examples/api-examples.md",
"filePath": "examples/api-examples.md"
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.