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": "Home",
"link": "/"
},
{
"text": "导航",
"link": "/nav/index.md"
},
{
"text": "前端",
"items": [
{
"text": "分类",
"link": "/frontend/index.md"
},
{
"text": "vue",
"link": "/frontend/programming/vue/index.md"
},
{
"text": "react",
"link": "/frontend/programming/react/index.md"
},
{
"text": "next-js",
"link": "/frontend/programming/nextjs/index.md"
},
{
"text": "typescript",
"link": "/frontend/programming/typescript/index.md"
}
]
},
{
"text": "后端",
"items": [
{
"text": "分类",
"link": "/backend/index.md"
},
{
"text": "编程",
"link": "/backend/programming/index.md"
},
{
"text": "Linux",
"link": "/backend/linux/index.md"
},
{
"text": "开发工具",
"link": "/backend/devtools/index.md"
},
{
"text": "开源项目",
"link": "/projects/index.md"
}
]
},
{
"text": "VitePress",
"items": [
{
"text": "示例",
"link": "/projects/vitepress/examples/markdown-examples.md"
},
{
"text": "Markdown扩展",
"link": "/projects/vitepress/markdown-extensions.md"
},
{
"text": "配置",
"link": "/projects/vitepress/"
}
]
}
],
"logo": {
"light": "/img/logos/programming-color.svg",
"dark": "/img/logos/programming-color.svg"
},
"sidebar": {
"/backend/docker/": [
{
"text": "Docker",
"items": [
{
"text": "Docker",
"link": "/backend/docker/index.md"
},
{
"text": "Docker Compose",
"link": "/backend/docker/docker-compose.md"
},
{
"text": "Dockerfile",
"link": "/backend/docker/dockerfile.md"
}
]
},
{
"text": "镜像仓库",
"items": [
{
"text": "自建镜像仓库",
"link": "/backend/docker/private-registry.md"
},
{
"text": "自建镜像加速器",
"link": "/backend/docker/custom-mirror.md"
}
]
},
{
"text": "命令",
"items": [
{
"text": "docker save和docker export",
"link": "/backend/docker/commands/docker-save-and-docker-export.md"
}
]
},
{
"text": "常见问题",
"items": [
{
"text": "docker权限问题",
"link": "/backend/docker/problems/docker-permission-denied.md"
}
]
}
],
"/backend/linux/": [
{
"text": "常用配置",
"items": [
{
"text": "修改语言",
"link": "/backend/linux/settings/language.md"
},
{
"text": "修改Grub启动顺序",
"link": "/backend/linux/settings/centos-grub-order.md"
}
]
},
{
"text": "包管理",
"items": [
{
"text": "常见软件包",
"link": "/backend/linux/dnf-packages.md"
}
]
},
{
"text": "常见问题",
"items": [
{
"text": "chsh命令找不到",
"link": "/backend/linux/problems/chsh-not-found.md"
}
]
}
],
"/backend/programming/": [
{
"text": "Python",
"items": [
{
"text": "Enc",
"link": "/backend/programming/python/enc.md"
}
]
},
{
"text": "Go",
"items": [
{
"text": "Getting Started",
"link": "/backend/programming/golang/index.md"
},
{
"text": "HTTP",
"link": "/backend/programming/golang/http.md"
},
{
"text": "Gin",
"link": "/backend/programming/golang/gin/start.md"
}
]
}
],
"/backend/devtools/": [
{
"text": "Oh-My-Zsh",
"items": [
{
"text": "安装",
"link": "/backend/devtools/oh-my-zsh/index.md"
},
{
"text": "Docker插件",
"link": "/backend/devtools/oh-my-zsh/plugins/docker.md"
},
{
"text": "K8s插件",
"link": "/backend/devtools/oh-my-zsh/plugins/k8s.md"
}
]
},
{
"text": "VSCode",
"items": [
{
"text": "插件",
"link": "/backend/devtools/vscode/plugins.md"
},
{
"text": "Code Server部署",
"link": "/backend/devtools/vscode/code-server/index.md"
},
{
"text": "设置",
"items": [
{
"text": "修改语言",
"link": "/backend/devtools/vscode/settints/modify-language.md"
},
{
"text": "关闭内联参数名提示",
"link": "/backend/devtools/vscode/settints/disable-inlay-hints.md"
},
{
"text": "终端相关配置",
"link": "/backend/devtools/vscode/settints/terminal.md"
}
]
}
]
},
{
"text": "Devtools",
"items": [
{
"text": "VsCode",
"link": "/backend/devtools/vscode/config.md"
},
{
"text": "Git",
"link": "/backend/devtools/git/config.md"
}
]
},
{
"text": "开发环境",
"items": [
{
"text": "GVM",
"link": "/backend/devtools/env/gvm.md"
},
{
"text": "NVM",
"link": "/backend/devtools/env/nvm.md"
},
{
"text": "Conda",
"link": "/backend/devtools/env/conda.md"
}
]
}
],
"/projects/interesting/": {
"/projects/": [
{
"text": "代理",
"items": [
{
"text": "v2ray",
"link": "/projects/index.md"
}
]
},
{
"text": "SSL & HTTPS",
"items": [
{
"text": "cfssl",
"link": "/projects/ssl/cfssl.md"
},
{
"text": "acme-lego",
"link": "/projects/ssl/acme-lego.md"
}
]
},
{
"text": "OpenWrt",
"items": [
{
"text": "安装",
"items": [
{
"text": "x86环境安装",
"link": "/projects/openwrt/install.md"
}
]
},
{
"text": "配置",
"items": [
{
"text": "磁盘扩容",
"link": "/projects/openwrt/disk-scaling.md"
},
{
"text": "配置IPv6",
"link": "/projects/openwrt/ipv6.md"
},
{
"text": "镜像源",
"link": "/projects/openwrt/mirrors.md"
},
{
"text": "docker",
"link": "/projects/openwrt/docker.md"
},
{
"text": "常用软件包",
"link": "/projects/openwrt/packages.md"
}
]
}
]
}
],
"/projects/openwrt/": [
{
"text": "安装",
"items": [
{
"text": "x86环境安装",
"link": "/projects/openwrt/install.md"
}
]
},
{
"text": "配置",
"items": [
{
"text": "磁盘扩容",
"link": "/projects/openwrt/disk-scaling.md"
},
{
"text": "配置IPv6",
"link": "/projects/openwrt/ipv6.md"
},
{
"text": "镜像源",
"link": "/projects/openwrt/mirrors.md"
},
{
"text": "docker",
"link": "/projects/openwrt/docker.md"
},
{
"text": "常用软件包",
"link": "/projects/openwrt/packages.md"
}
]
}
]
},
"/projects/vitepress": [
{
"text": "Markdown扩展",
"link": "/projects/vitepress/markdown-extensions.md"
},
{
"text": "Examples",
"items": [
{
"text": "自定义组件",
"link": "/projects/vitepress/examples/component-examples.html"
},
{
"text": "API文档",
"link": "/projects/vitepress/examples/api-examples.html"
}
]
},
{
"text": "配置",
"items": [
{
"text": "文中目录配置",
"link": "/projects/vitepress/outline-level.md"
}
]
}
],
"/frontend/programming/nextjs/": [
{
"text": "快速上手",
"items": [
{
"text": "创建项目",
"link": "/frontend/programming/nextjs/index.md"
}
]
},
{
"text": "路由",
"items": [
{
"text": "路由",
"link": "/frontend/programming/nextjs/routing/index.md"
}
]
},
{
"text": "Zustand",
"items": [
{
"text": "简介",
"link": "/frontend/programming/nextjs/zustand/index.md"
},
{
"text": "官方文档",
"link": "/frontend/components/zustand/official-docs/"
},
{
"text": "自定义状态",
"link": "/frontend/programming/nextjs/zustand/tutorial.md"
},
{
"text": "水合问题",
"link": "/frontend/programming/nextjs/zustand/hydration.md"
},
{
"text": "中间件顺序",
"link": "/frontend/programming/nextjs/zustand/middwares-order.md"
}
]
}
],
"/frontend/programming/react/": [
{
"text": "React",
"items": [
{
"text": "Getting Started",
"link": "/frontend/programming/react/index.md"
}
]
}
],
"/frontend/programming/vue/": [
{
"text": "快速开始",
"link": "/frontend/programming/vue/getting-start.md"
},
{
"text": "UI组件库",
"items": [
{
"text": "TDesign",
"link": "/frontend/programming/vue/ui-components.md"
}
]
},
{
"text": "基础语法",
"items": [
{
"text": "类型转换",
"link": "/frontend/programming/vue/type-convert.md"
}
]
},
{
"text": "常见问题",
"items": [
{
"text": "HMR不生效",
"link": "/frontend/programming/vue/problems/hmr-not-working.md"
}
]
}
],
"/frontend/programming/typescript/": [
{
"text": "ESLINT问题",
"items": [
{
"text": "关闭no-explicit-any告警",
"link": "/frontend/programming/typescript/eslint/disable-no-explicit-any.md"
}
]
}
],
"/frontend/components/zustand/": [
{
"text": "Getting Started",
"items": [
{
"text": "Introduction",
"link": "/frontend/components/zustand/official-docs/getting-started/introduction.md"
},
{
"text": "Comparison",
"link": "/frontend/components/zustand/official-docs/getting-started/comparison.md"
}
]
},
{
"text": "Guides",
"items": [
{
"text": "Tutorial: Tic-Tac-Toe",
"link": "/frontend/components/zustand/official-docs/guides/tutorial-tic-tac-toe.md"
},
{
"text": "Updating state",
"link": "/frontend/components/zustand/official-docs/guides/updating-state.md"
},
{
"text": "Immutable state and merging",
"link": "/frontend/components/zustand/official-docs/guides/immutable-state-and-merging.md"
},
{
"text": "Flux inspired practice",
"link": "/frontend/components/zustand/official-docs/guides/flux-inspired-practice.md"
},
{
"text": "Auto Generating Selectors",
"link": "/frontend/components/zustand/official-docs/guides/auto-generating-selectors.md"
},
{
"text": "Practice with no store actions",
"link": "/frontend/components/zustand/official-docs/guides/practice-with-no-store-actions.md"
},
{
"text": "TypeScript Guide",
"link": "/frontend/components/zustand/official-docs/guides/typescript.md"
},
{
"text": "Testing",
"link": "/frontend/components/zustand/official-docs/guides/testing.md"
},
{
"text": "Calling actions outside a React event handler in pre React 18",
"link": "/frontend/components/zustand/official-docs/guides/event-handler-in-pre-react-18.md"
},
{
"text": "Map and Set Usage",
"link": "/frontend/components/zustand/official-docs/guides/maps-and-sets-usage.md"
},
{
"text": "Connect to state with URL",
"link": "/frontend/components/zustand/official-docs/guides/connect-to-state-with-url-hash.md"
},
{
"text": "How to reset state",
"link": "/frontend/components/zustand/official-docs/guides/how-to-reset-state.md"
},
{
"text": "Initialize state with props",
"link": "/frontend/components/zustand/official-docs/guides/initialize-state-with-props.md"
},
{
"text": "Slices Pattern",
"link": "/frontend/components/zustand/official-docs/guides/slices-pattern.md"
},
{
"text": "Prevent rerenders with useShallow",
"link": "/frontend/components/zustand/official-docs/guides/prevent-rerenders-with-use-shallow.md"
},
{
"text": "SSR and Hydration",
"link": "/frontend/components/zustand/official-docs/guides/ssr-and-hydration.md"
},
{
"text": "Setup with Next.js",
"link": "/frontend/components/zustand/official-docs/guides/nextjs.md"
}
]
},
{
"text": "Previous Versions",
"items": [
{
"text": "createContext from zustand/context",
"link": "/frontend/components/zustand/official-docs/previous-versions/zustand-v3-create-context.md"
}
]
},
{
"text": "Migrations",
"items": [
{
"text": "Migrating to v4",
"link": "/frontend/components/zustand/official-docs/migrations/migrating-to-v4.md"
},
{
"text": "How to Migrate to v5 from v4",
"link": "/frontend/components/zustand/official-docs/migrations/migrating-to-v5.md"
}
]
},
{
"text": "APIs",
"items": [
{
"text": "createStore",
"link": "/frontend/components/zustand/official-docs/apis/create-store.md"
},
{
"text": "createWithEqualityFn ⚛️",
"link": "/frontend/components/zustand/official-docs/apis/create-with-equality-fn.md"
},
{
"text": "create ⚛️",
"link": "/frontend/components/zustand/official-docs/apis/create.md"
},
{
"text": "shallow",
"link": "/frontend/components/zustand/official-docs/apis/shallow.md"
}
]
},
{
"text": "Hooks",
"items": [
{
"text": "useShallow ⚛️",
"link": "/frontend/components/zustand/official-docs/hooks/use-shallow.md"
},
{
"text": "useStoreWithEqualityFn ⚛️",
"link": "/frontend/components/zustand/official-docs/hooks/use-store-with-equality-fn.md"
},
{
"text": "useStore ⚛️",
"link": "/frontend/components/zustand/official-docs/hooks/use-store.md"
}
]
},
{
"text": "Middlewares",
"items": [
{
"text": "combine",
"link": "/frontend/components/zustand/official-docs/middlewares/combine.md"
},
{
"text": "devtools",
"link": "/frontend/components/zustand/official-docs/middlewares/devtools.md"
},
{
"text": "immer",
"link": "/frontend/components/zustand/official-docs/middlewares/immer.md"
},
{
"text": "persist",
"link": "/frontend/components/zustand/official-docs/middlewares/persist.md"
},
{
"text": "redux",
"link": "/frontend/components/zustand/official-docs/middlewares/redux.md"
},
{
"text": "subscribeWithSelector",
"link": "/frontend/components/zustand/official-docs/middlewares/subscribe-with-selector.md"
}
]
}
],
"/projects/": [
{
"text": "代理",
"items": [
{
"text": "v2ray",
"link": "/projects/index.md"
}
]
},
{
"text": "SSL & HTTPS",
"items": [
{
"text": "cfssl",
"link": "/projects/ssl/cfssl.md"
},
{
"text": "acme-lego",
"link": "/projects/ssl/acme-lego.md"
}
]
},
{
"text": "OpenWrt",
"items": [
{
"text": "安装",
"items": [
{
"text": "x86环境安装",
"link": "/projects/openwrt/install.md"
}
]
},
{
"text": "配置",
"items": [
{
"text": "磁盘扩容",
"link": "/projects/openwrt/disk-scaling.md"
},
{
"text": "配置IPv6",
"link": "/projects/openwrt/ipv6.md"
},
{
"text": "镜像源",
"link": "/projects/openwrt/mirrors.md"
},
{
"text": "docker",
"link": "/projects/openwrt/docker.md"
},
{
"text": "常用软件包",
"link": "/projects/openwrt/packages.md"
}
]
}
]
}
],
"/projects/openwrt/": [
{
"text": "安装",
"items": [
{
"text": "x86环境安装",
"link": "/projects/openwrt/install.md"
}
]
},
{
"text": "配置",
"items": [
{
"text": "磁盘扩容",
"link": "/projects/openwrt/disk-scaling.md"
},
{
"text": "配置IPv6",
"link": "/projects/openwrt/ipv6.md"
},
{
"text": "镜像源",
"link": "/projects/openwrt/mirrors.md"
},
{
"text": "docker",
"link": "/projects/openwrt/docker.md"
},
{
"text": "常用软件包",
"link": "/projects/openwrt/packages.md"
}
]
}
]
},
"outline": {
"level": [
2,
3
],
"label": "目录"
},
"footer": {
"copyright": "Copyright © 2025 <a href=\"/\" target=\"_blank\">有空一起学习</a>",
"message": "<a href=\"https://beian.miit.gov.cn\" target=\"_blank\" style=\"color: var(--c-text-lighter);\">粤ICP备2024344969号-2</a>"
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/vuejs/vitepress"
}
]
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "projects/vitepress/examples/api-examples.md",
"filePath": "projects/vitepress/examples/api-examples.md"
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.