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
{
"nav": [
{
"text": "部落格",
"link": "https://minilabmemo.github.io/"
},
{
"text": "前端",
"link": "/f2e/"
},
{
"text": "Vue",
"link": "/vue/"
},
{
"text": "隨手記",
"items": [
{
"text": "技術相關",
"link": "/tech/"
}
]
}
],
"sidebar": {
"/f2e/": {
"base": "/f2e/",
"items": [
{
"text": "css",
"items": [
{
"text": "bootstrap + vue 使用筆記",
"link": "css/bootstrap"
},
{
"text": "center",
"link": "css/center"
},
{
"text": "css 使用",
"link": "css/css_note"
},
{
"text": "flex 彈性盒子排版",
"link": "css/flex"
},
{
"text": "flex 卡片排列問題",
"link": "css/flex_bs_items"
},
{
"text": "flex 與自動邊界排版",
"link": "css/flex_margin"
},
{
"text": "flexbox 與 bootstrap 格線系統",
"link": "css/flex_row"
},
{
"text": "grid",
"link": "css/grid"
},
{
"text": "html",
"link": "css/html"
},
{
"text": "inline＿block",
"link": "css/inline_block"
},
{
"text": "rwd",
"link": "css/rwd"
},
{
"text": "width 寬度",
"link": "css/width"
}
],
"collapsed": false
},
{
"text": "js",
"items": [
{
"text": "事件迴圈（Event Loop）。",
"link": "js/event_loop"
},
{
"text": "javascript to typescript",
"link": "js/js_to_ts"
},
{
"text": "oop",
"link": "js/oop"
}
],
"collapsed": false
},
{
"text": "others",
"items": [
{
"text": "設計靈感/素材網站",
"link": "others/design_inspire"
},
{
"text": "設計工具",
"link": "others/design_tools"
},
{
"text": "待研究或整理清單",
"link": "others/fe_todo"
},
{
"text": "Lottie",
"link": "others/lottie"
},
{
"text": "NVM",
"link": "others/node_nvm"
},
{
"text": "seo",
"link": "others/seo"
}
],
"collapsed": false
},
{
"text": "test",
"items": [
{
"text": "設計模式",
"link": "test/code_design_pattern"
},
{
"text": "code review 重點與說明",
"link": "test/code_review"
},
{
"text": "cypress",
"link": "test/cypress"
},
{
"text": "eslint",
"link": "test/eslint"
}
],
"collapsed": false
}
]
},
"/vue/": {
"base": "/vue/",
"items": [
{
"text": "vp",
"items": [
{
"text": "Runtime API Examples",
"link": "01.vp/api-examples"
},
{
"text": "Markdown Extension Examples",
"link": "01.vp/markdown-examples"
},
{
"text": "vitepress 筆記",
"link": "01.vp/vitepress_note"
},
{
"text": "自動生成側邊欄 (vitepress-sidebar)",
"link": "01.vp/auto-sidebar"
}
],
"collapsed": false
},
{
"text": "vue3",
"items": [
{
"text": "composition 組合式 API",
"link": "02.vue3/composition"
},
{
"text": "composition with typescript",
"link": "02.vue3/composition_ts"
},
{
"text": "應用筆記",
"link": "02.vue3/context"
},
{
"text": "globalProperties [ts version]",
"link": "02.vue3/global_ts"
},
{
"text": "lOgger",
"link": "02.vue3/lOgger"
},
{
"text": "學習筆記",
"link": "02.vue3/learn"
},
{
"text": "第三方套件",
"link": "02.vue3/libiary"
},
{
"text": "reuse",
"link": "02.vue3/reuse"
},
{
"text": "style_guide",
"link": "02.vue3/style_guide"
},
{
"text": "内置指令 v-directives",
"link": "02.vue3/v-directives"
},
{
"text": "vite 專案",
"link": "02.vue3/vite"
},
{
"text": "[v-html] XSS 防護與 DOMPurify",
"link": "02.vue3/vue_html"
}
],
"collapsed": false
},
{
"text": "nuxt3",
"items": [
{
"text": "[Nuxt3] 為什麼不該用 ClientOnly 包裹整個頁面？",
"link": "nuxt3/clientonly"
},
{
"text": "nuxt3 assets",
"link": "nuxt3/nuxt3_assets"
},
{
"text": "nuxt3 deploy",
"link": "nuxt3/nuxt3_deploy"
},
{
"text": "Nuxt 的 eslint 遷移",
"link": "nuxt3/nuxt3_eslint"
},
{
"text": "Nuxt 3 專案建立",
"link": "nuxt3/nuxt3_project"
},
{
"text": "Nuxt 3 目錄與專案結構",
"link": "nuxt3/nuxt3_use"
},
{
"text": "Nuxt Content 內建 GFM 支援",
"link": "nuxt3/nuxt_content_gfm"
},
{
"text": "SSR Hydration Mismatch ",
"link": "nuxt3/ssr"
}
],
"collapsed": false
},
{
"text": "others",
"items": [
{
"text": "Pinia",
"link": "others/pinia"
}
],
"collapsed": false
}
]
},
"/tech/": {
"base": "/tech/",
"items": [
{
"text": "python",
"items": [
{
"text": "start",
"link": "python/start"
}
],
"collapsed": false
},
{
"text": "vscode",
"link": "vscode"
}
]
}
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/minilabmemo"
}
],
"footer": {
"message": "",
"copyright": "Copyright © 2024-minilabmemo"
},
"search": {
"provider": "local"
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "vue/01.vp/api-examples.md",
"filePath": "vue/01.vp/api-examples.md"
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.