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"
},
"nav": [
{
"text": "主页",
"link": "/"
},
{
"text": "前端开发",
"items": [
{
"text": "HTML",
"link": "/front-end/html/"
},
{
"text": "CSS",
"link": "/front-end/css/"
},
{
"text": "Emmet",
"link": "/front-end/emmet/"
},
{
"text": "JavaScript",
"link": "/front-end/javascript/"
},
{
"text": "ES 6",
"link": "/front-end/es6/"
}
]
}
],
"sidebar": {
"/front-end/": [
{
"text": "HTML 教程",
"collapsed": false,
"items": [
{
"text": "HTML 简介",
"link": "/front-end/html/intro"
},
{
"text": "URL 简介",
"link": "/front-end/html/url"
},
{
"text": "元素的属性",
"link": "/front-end/html/attribute"
},
{
"text": "字符编码",
"link": "/front-end/html/encode"
},
{
"text": "语义结构",
"link": "/front-end/html/semantic"
},
{
"text": "文本标签",
"link": "/front-end/html/text"
},
{
"text": "列表标签",
"link": "/front-end/html/list"
},
{
"text": "图像标签",
"link": "/front-end/html/image"
},
{
"text": "<a>",
"link": "/front-end/html/a"
},
{
"text": "<link>",
"link": "/front-end/html/link"
},
{
"text": "<script>，<noscript>",
"link": "/front-end/html/script"
},
{
"text": "多媒体标签",
"link": "/front-end/html/multimedia"
},
{
"text": "iframe",
"link": "/front-end/html/iframe"
},
{
"text": "表格",
"link": "/front-end/html/table"
},
{
"text": "表单",
"link": "/front-end/html/form"
},
{
"text": "其他标签",
"link": "/front-end/html/elements"
}
]
},
{
"text": "CSS 教程",
"items": [
{
"text": "快速上手",
"collapsed": true,
"items": [
{
"text": "快速上手",
"link": "/front-end/css/guide/"
},
{
"text": "选择器简介",
"link": "/front-end/css/guide/selector"
},
{
"text": "CSS 声明",
"link": "/front-end/css/guide/declaration"
},
{
"text": "引入 CSS",
"link": "/front-end/css/guide/import"
},
{
"text": "优先级和继承",
"link": "/front-end/css/guide/cascade"
},
{
"text": "盒模型简介",
"link": "/front-end/css/guide/box"
},
{
"text": "常见属性说明",
"link": "/front-end/css/guide/common"
}
]
},
{
"text": "CSS 介绍",
"collapsed": true,
"items": [
{
"text": "选择器",
"link": "/front-end/css/intro/selector"
},
{
"text": "盒模型",
"link": "/front-end/css/intro/box"
},
{
"text": "背景与边框",
"link": "/front-end/css/intro/background-and-border"
},
{
"text": "文字样式",
"link": "/front-end/css/intro/font"
},
{
"text": "文本方向",
"link": "/front-end/css/intro/text-direction"
},
{
"text": "溢出",
"link": "/front-end/css/intro/overflow"
},
{
"text": "值与单位",
"link": "/front-end/css/intro/value"
},
{
"text": "调整大小",
"link": "/front-end/css/intro/sizing"
},
{
"text": "可替换元素",
"link": "/front-end/css/intro/replaced"
},
{
"text": "媒体查询",
"link": "/front-end/css/intro/media"
}
]
},
{
"text": "CSS 布局",
"collapsed": true,
"items": [
{
"text": "排版介绍",
"link": "/front-end/css/layout/intro"
},
{
"text": "正常布局流",
"link": "/front-end/css/layout/flow"
},
{
"text": "浮动",
"link": "/front-end/css/layout/float"
},
{
"text": "弹性模型",
"link": "/front-end/css/layout/flex"
},
{
"text": "网格布局",
"link": "/front-end/css/layout/grid"
},
{
"text": "布局实战",
"link": "/front-end/css/layout/exercise"
}
]
}
]
},
{
"text": "Emmet",
"items": [
{
"text": "Emmet 语法",
"link": "/front-end/emmet/"
},
{
"text": "HTML Emmet",
"link": "/front-end/emmet/html"
},
{
"text": "CSS Emmet",
"link": "/front-end/emmet/css"
}
]
}
],
"/front-end/javascript/": [
{
"text": "JavaScript 教程",
"items": [
{
"text": "入门篇",
"collapsed": true,
"items": [
{
"text": "导论",
"link": "/front-end/javascript/basic/introduction"
},
{
"text": "历史",
"link": "/front-end/javascript/basic/history"
},
{
"text": "基本语法",
"link": "/front-end/javascript/basic/grammar"
}
]
},
{
"text": "数据类型",
"collapsed": true,
"items": [
{
"text": "概述",
"link": "/front-end/javascript/types/general"
},
{
"text": "null，undefined 和布尔值",
"link": "/front-end/javascript/types/null-undefined-boolean"
},
{
"text": "数值",
"link": "/front-end/javascript/types/number"
},
{
"text": "字符串",
"link": "/front-end/javascript/types/string"
},
{
"text": "对象",
"link": "/front-end/javascript/types/object"
},
{
"text": "函数",
"link": "/front-end/javascript/types/function"
},
{
"text": "数组",
"link": "/front-end/javascript/types/array"
}
]
},
{
"text": "运算符",
"collapsed": true,
"items": [
{
"text": "算术运算符",
"link": "/front-end/javascript/operators/arithmetic"
},
{
"text": "比较运算符",
"link": "/front-end/javascript/operators/comparison"
},
{
"text": "布尔运算符",
"link": "/front-end/javascript/operators/boolean"
},
{
"text": "二进制位运算符",
"link": "/front-end/javascript/operators/bit"
},
{
"text": "其他运算符，运算顺序",
"link": "/front-end/javascript/operators/priority"
}
]
},
{
"text": "语法专题",
"collapsed": true,
"items": [
{
"text": "数据类型的转换",
"link": "/front-end/javascript/features/conversion"
},
{
"text": "错误处理机制",
"link": "/front-end/javascript/features/error"
},
{
"text": "编程风格",
"link": "/front-end/javascript/features/style"
},
{
"text": "console 对象与控制台",
"link": "/front-end/javascript/features/console"
}
]
},
{
"text": "标准库",
"collapsed": true,
"items": [
{
"text": "Object 对象",
"link": "/front-end/javascript/stdlib/object"
},
{
"text": "属性描述对象",
"link": "/front-end/javascript/stdlib/attributes"
},
{
"text": "Array 对象",
"link": "/front-end/javascript/stdlib/array"
},
{
"text": "包装对象",
"link": "/front-end/javascript/stdlib/wrapper"
},
{
"text": "Boolean 对象",
"link": "/front-end/javascript/stdlib/boolean"
},
{
"text": "Number 对象",
"link": "/front-end/javascript/stdlib/number"
},
{
"text": "String 对象",
"link": "/front-end/javascript/stdlib/string"
},
{
"text": "Math 对象",
"link": "/front-end/javascript/stdlib/math"
},
{
"text": "Date 对象",
"link": "/front-end/javascript/stdlib/date"
},
{
"text": "RegExp 对象",
"link": "/front-end/javascript/stdlib/regexp"
},
{
"text": "JSON 对象",
"link": "/front-end/javascript/stdlib/json"
}
]
},
{
"text": "面向对象编程",
"collapsed": true,
"items": [
{
"text": "实例对象与 new 命令",
"link": "/front-end/javascript/oop/new"
},
{
"text": "this 关键字",
"link": "/front-end/javascript/oop/this"
},
{
"text": "对象的继承",
"link": "/front-end/javascript/oop/prototype"
},
{
"text": "Object 对象的相关方法",
"link": "/front-end/javascript/oop/object"
},
{
"text": "严格模式",
"link": "/front-end/javascript/oop/strict"
}
]
},
{
"text": "异步操作",
"collapsed": true,
"items": [
{
"text": "概述",
"link": "/front-end/javascript/async/general"
},
{
"text": "定时器",
"link": "/front-end/javascript/async/timer"
},
{
"text": "Promise 对象",
"link": "/front-end/javascript/async/promise"
}
]
},
{
"text": "DOM",
"collapsed": true,
"items": [
{
"text": "概述",
"link": "/front-end/javascript/dom/general"
},
{
"text": "Node 接口",
"link": "/front-end/javascript/dom/node"
},
{
"text": "NodeList 接口，HTMLCollection 接口",
"link": "/front-end/javascript/dom/nodelist"
},
{
"text": "ParentNode 接口，ChildNode 接口",
"link": "/front-end/javascript/dom/parentnode"
},
{
"text": "Document 节点",
"link": "/front-end/javascript/dom/document"
},
{
"text": "Element 节点",
"link": "/front-end/javascript/dom/element"
},
{
"text": "属性的操作",
"link": "/front-end/javascript/dom/attributes"
},
{
"text": "Text 节点和 DocumentFragment 节点",
"link": "/front-end/javascript/dom/text"
},
{
"text": "CSS 操作",
"link": "/front-end/javascript/dom/css"
},
{
"text": "Mutation Observer API",
"link": "/front-end/javascript/dom/mutationobserver"
}
]
},
{
"text": "事件",
"collapsed": true,
"items": [
{
"text": "EventTarget 接口",
"link": "/front-end/javascript/events/eventtarget"
},
{
"text": "事件模型",
"link": "/front-end/javascript/events/model"
},
{
"text": "Event 对象",
"link": "/front-end/javascript/events/event"
},
{
"text": "鼠标事件",
"link": "/front-end/javascript/events/mouse"
},
{
"text": "键盘事件",
"link": "/front-end/javascript/events/keyboard"
},
{
"text": "进度事件",
"link": "/front-end/javascript/events/progress"
},
{
"text": "表单事件",
"link": "/front-end/javascript/events/form"
},
{
"text": "触摸事件",
"link": "/front-end/javascript/events/touch"
},
{
"text": "拖拉事件",
"link": "/front-end/javascript/events/drag"
},
{
"text": "其他常见事件",
"link": "/front-end/javascript/events/common"
},
{
"text": "GlobalEventHandlers 接口",
"link": "/front-end/javascript/events/globaleventhandlers"
}
]
},
{
"text": "浏览器模型",
"collapsed": true,
"items": [
{
"text": "浏览器模型概述",
"link": "/front-end/javascript/bom/engine"
},
{
"text": "window 对象",
"link": "/front-end/javascript/bom/window"
},
{
"text": "Navigator 对象，Screen 对象",
"link": "/front-end/javascript/bom/navigator"
},
{
"text": "Cookie",
"link": "/front-end/javascript/bom/cookie"
},
{
"text": "XMLHttpRequest 对象",
"link": "/front-end/javascript/bom/xmlhttprequest"
},
{
"text": "同源限制",
"link": "/front-end/javascript/bom/same-origin"
},
{
"text": "CORS 通信",
"link": "/front-end/javascript/bom/cors"
},
{
"text": "Storage 接口",
"link": "/front-end/javascript/bom/storage"
},
{
"text": "History 对象",
"link": "/front-end/javascript/bom/history"
},
{
"text": "Location 对象，URL 对象，URLSearchParams 对象",
"link": "/front-end/javascript/bom/location"
},
{
"text": "ArrayBuffer 对象，Blob 对象",
"link": "/front-end/javascript/bom/arraybuffer"
},
{
"text": "File 对象，FileList 对象，FileReader 对象",
"link": "/front-end/javascript/bom/file"
},
{
"text": "表单，FormData 对象",
"link": "/front-end/javascript/bom/form"
},
{
"text": "IndexedDB API",
"link": "/front-end/javascript/bom/indexeddb"
},
{
"text": "Web Worker",
"link": "/front-end/javascript/bom/webworker"
}
]
},
{
"text": "附录：网页元素接口",
"collapsed": true,
"items": [
{
"text": "<a>",
"link": "/front-end/javascript/elements/a"
},
{
"text": "<img>",
"link": "/front-end/javascript/elements/image"
},
{
"text": "<form>",
"link": "/front-end/javascript/elements/form"
},
{
"text": "<input>",
"link": "/front-end/javascript/elements/input"
},
{
"text": "<button>",
"link": "/front-end/javascript/elements/button"
},
{
"text": "<option>",
"link": "/front-end/javascript/elements/option"
},
{
"text": "<video>, <audio>",
"link": "/front-end/javascript/elements/video"
}
]
}
]
}
],
"/front-end/es6/": [
{
"text": "ES6 教程",
"items": [
{
"text": "ECMAScript 6 简介",
"link": "/front-end/es6/intro"
},
{
"text": "let 和 const 命令",
"link": "/front-end/es6/let"
},
{
"text": "变量的解构赋值",
"link": "/front-end/es6/destructuring"
},
{
"text": "字符串的扩展",
"link": "/front-end/es6/string"
},
{
"text": "字符串的新增方法",
"link": "/front-end/es6/string-methods"
},
{
"text": "正则的扩展",
"link": "/front-end/es6/regex"
},
{
"text": "数值的扩展",
"link": "/front-end/es6/number"
},
{
"text": "函数的扩展",
"link": "/front-end/es6/function"
},
{
"text": "数组的扩展",
"link": "/front-end/es6/array"
},
{
"text": "对象的扩展",
"link": "/front-end/es6/object"
},
{
"text": "对象的新增方法",
"link": "/front-end/es6/object-methods"
},
{
"text": "运算符的扩展",
"link": "/front-end/es6/operator"
},
{
"text": "Symbol",
"link": "/front-end/es6/symbol"
},
{
"text": "Set 和 Map 数据结构",
"link": "/front-end/es6/set-map"
},
{
"text": "Proxy",
"link": "/front-end/es6/proxy"
},
{
"text": "Reflect",
"link": "/front-end/es6/reflect"
},
{
"text": "Promise 对象",
"link": "/front-end/es6/promise"
},
{
"text": "Iterator 和 for...of 循环",
"link": "/front-end/es6/iterator"
},
{
"text": "Generator 函数的语法",
"link": "/front-end/es6/generator"
},
{
"text": "Generator 函数的异步应用",
"link": "/front-end/es6/generator-async"
},
{
"text": "async 函数",
"link": "/front-end/es6/async"
},
{
"text": "Class 的基本语法",
"link": "/front-end/es6/class"
},
{
"text": "Class 的继承",
"link": "/front-end/es6/class-extends"
},
{
"text": "Module 的语法",
"link": "/front-end/es6/module"
},
{
"text": "Module 的加载实现",
"link": "/front-end/es6/module-loader"
},
{
"text": "编程风格",
"link": "/front-end/es6/style"
},
{
"text": "读懂规格",
"link": "/front-end/es6/spec"
},
{
"text": "异步遍历器",
"link": "/front-end/es6/async-iterator"
},
{
"text": "ArrayBuffer",
"link": "/front-end/es6/arraybuffer"
},
{
"text": "最新提案",
"link": "/front-end/es6/proposals"
},
{
"text": "Decorator",
"link": "/front-end/es6/decorator"
},
{
"text": "参考链接",
"link": "/front-end/es6/reference"
}
]
}
]
},
"docFooter": {
"prev": "上一页",
"next": "下一页"
},
"outline": {
"label": "页面导航"
},
"lastUpdated": {
"text": "最后更新于",
"formatOptions": {
"dateStyle": "short",
"timeStyle": "medium"
}
},
"langMenuLabel": "多语言",
"returnToTopLabel": "回到顶部",
"sidebarMenuLabel": "菜单",
"darkModeSwitchLabel": "主题",
"lightModeSwitchTitle": "切换到浅色模式",
"darkModeSwitchTitle": "切换到深色模式",
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/vuejs/vitepress"
}
]
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "api-examples.md",
"filePath": "api-examples.md",
"lastUpdated": 1725066019000
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.