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": "javascript",
"items": [
{
"text": "入门",
"link": "/column/javascript/base/index.md"
},
{
"text": "进阶",
"link": "/column/Growing/"
}
]
},
{
"text": "Vue",
"items": [
{
"text": "高德地图",
"link": "/column/vue/gdMap/"
}
]
},
{
"text": "微信小程序",
"items": [
{
"text": "基础",
"link": "/column/Travel/"
}
]
},
{
"text": "关于我",
"items": [
{
"text": "CSDN",
"link": "https://blog.csdn.net/qq_51055690?type=blog"
},
{
"text": "Github",
"link": "https://github.com/gbm2001"
},
{
"text": "gitee",
"link": "https://gitee.com/guo-bomin"
}
]
}
],
"sidebar": {
"/column/views/vite/": [
{
"text": "简介",
"link": "/column/views/vite/"
},
{
"text": "01-初始化项目",
"link": "/column/views/vite/01-初始化项目"
},
{
"text": "02-项目结构",
"link": "/column/views/vite/02-项目结构"
},
{
"text": "03-代码格式化prettier",
"link": "/column/views/vite/03-代码格式化prettier"
},
{
"text": "04-eslint规范",
"link": "/column/views/vite/04-eslint规范"
},
{
"text": "05-去除ref的value",
"link": "/column/views/vite/05-去除ref的value"
},
{
"text": "06-vite.config.js的配置项",
"link": "/column/views/vite/06-vite.config.js的配置项"
},
{
"text": "07-sass样式预渲染器",
"link": "/column/views/vite/07-sass样式预渲染器"
},
{
"text": "08-VueRouter路由集成",
"link": "/column/views/vite/08-VueRouter路由集成"
},
{
"text": "09-mixin混入",
"link": "/column/views/vite/09-mixin混入"
},
{
"text": "10-filters全局过滤器",
"link": "/column/views/vite/10-filters全局过滤器"
},
{
"text": "11-Element Plus集成",
"link": "/column/views/vite/11-Element Plus集成"
},
{
"text": "12-pinia缓存集成",
"link": "/column/views/vite/12-pinia缓存集成"
},
{
"text": "13-axios和api封装",
"link": "/column/views/vite/13-axios和api封装"
},
{
"text": "14-全局引入components组件",
"link": "/column/views/vite/14-全局引入components组件"
},
{
"text": "15-设置vscode的常用代码块",
"link": "/column/views/vite/15-设置vscode的常用代码块"
},
{
"text": "扩展",
"items": [
{
"text": "16-高德地图",
"link": "/column/vue/gdMap/"
}
]
}
],
"/column/javascript/base/": [
{
"text": "基础语法",
"items": [
{
"text": "简介",
"link": "/column/javascript/base/"
},
{
"text": "基础1",
"link": "/column/javascript/base/01"
}
]
}
],
"/column/vue/gdMap/": [
{
"text": "高德地图-入门",
"items": [
{
"text": "准备工作",
"link": "/column/vue/gdMap/"
},
{
"text": "01-简易实现页面展示",
"link": "/column/vue/gdMap/01-简易实现页面展示.md"
},
{
"text": "02-添加地图控件",
"link": "/column/vue/gdMap/02-添加地图控件.md"
},
{
"text": "03-添加点标记",
"link": "/column/vue/gdMap/03-添加点标记.md"
}
]
},
{
"text": "高德地图-进阶",
"items": [
{
"text": "04-添加信息窗体",
"link": "/column/vue/gdMap/04-添加信息窗体.md"
},
{
"text": "05-循环点标记并点击弹出窗体",
"link": "/column/vue/gdMap/05-循环点标记并点击弹出窗体.md"
},
{
"text": "06-折线",
"link": "/column/vue/gdMap/06-折线.md"
},
{
"text": "07-圆形绘制",
"link": "/column/vue/gdMap/07-圆形绘制.md"
}
]
}
],
"/column/views/project/": [
{
"text": "简介",
"link": "/column/views/project/"
},
{
"text": "移动端",
"items": [
{
"text": "湘易办",
"link": "/column/views/project/湘易办.md"
},
{
"text": "在星沙",
"link": "/column/views/project/在星沙.md"
}
]
},
{
"text": "pc端",
"items": [
{
"text": "乡村振兴",
"link": "/column/views/project/乡村振兴.md"
},
{
"text": "长沙县党员网",
"link": "/column/views/project/长沙县党员网.md"
},
{
"text": "城建档案查询系统",
"link": "/column/views/project/城建档案查询系统.md"
}
]
},
{
"text": "uniapp",
"items": [
{
"text": "考核考评路长制",
"link": "/column/views/project/考核考评路长制.md"
}
]
},
{
"text": "微信原生小程序",
"items": [
{
"text": "吊车秘书",
"link": "/column/views/project/吊车秘书.md"
}
]
}
],
"/column/questions/": [
{
"text": "基础",
"items": [
{
"text": "html5",
"link": "/column/questions/html5.md"
},
{
"text": "css3",
"link": "/column/questions/css3.md"
},
{
"text": "js",
"link": "/column/questions/js.md"
},
{
"text": "js算法",
"link": "/column/questions/js算法.md"
},
{
"text": "vue",
"link": "/column/questions/vue.md"
}
]
}
],
"/SignIn/": [
{
"text": "BiliBiliToolPro",
"link": "/SignIn/BiliBiliToolPro.md"
}
]
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/gbm2001/vitepress-notice"
}
],
"outline": {
"level": [
2,
6
],
"label": "目录"
},
"search": {
"provider": "local"
},
"i18nRouting": true,
"footer": {
"message": "Released under the MIT License.",
"copyright": "Copyright © 2022-2025 <a href=\"https://blog.csdn.net/qq_51055690?spm=1018.2226.3001.5343\" target=\"_blank\">GBM666</a>"
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "api-examples.md",
"filePath": "api-examples.md"
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.