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:

<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": "Articles",
      "link": "/articles"
    }
  ],
  "sidebar": [
    {
      "text": "Articles",
      "items": [
        {
          "text": "Front 动态组件注入方案",
          "link": "/docs/Front 动态组件注入方案"
        },
        {
          "text": "VMware Linux 配置 共享文件夹",
          "link": "/docs/VMware Linux 配置 共享文件夹"
        },
        {
          "text": "Vim 插件包目录结构解析：start 与 opt 文件夹的区别",
          "link": "/docs/Vim 插件包目录结构解析：start 与 opt 文件夹的区别"
        },
        {
          "text": "Vim 自带的补全",
          "link": "/docs/Vim 自带的补全"
        },
        {
          "text": "Windows手动安装OpenSSH Server到任何地方",
          "link": "/docs/Windows手动安装OpenSSH Server到任何地方"
        },
        {
          "text": "`set statusline` 的语法总结",
          "link": "/docs/`set statusline` 的语法总结"
        },
        {
          "text": "Angular",
          "link": "/docs/old/Angular"
        },
        {
          "text": "CSS3",
          "link": "/docs/old/CSS3"
        },
        {
          "text": "CSS基础",
          "link": "/docs/old/CSS基础"
        },
        {
          "text": "Docker安装Guacamole+MySQL实现浏览器访问远程桌面等等服务",
          "link": "/docs/old/Docker安装Guacamole+MySQL实现浏览器访问远程桌面等等服务"
        },
        {
          "text": "Docker搭建Tailscale私有DERP中继服务器",
          "link": "/docs/old/Docker搭建Tailscale私有DERP中继服务器"
        },
        {
          "text": "Docker部署RustDesk中继服务器",
          "link": "/docs/old/Docker部署RustDesk中继服务器"
        },
        {
          "text": "ES5和ES6",
          "link": "/docs/old/ES5和ES6"
        },
        {
          "text": "Event-Loop",
          "link": "/docs/old/Event-Loop"
        },
        {
          "text": "Git高手必看！合并提交历史技巧",
          "link": "/docs/old/Git高手必看！合并提交历史技巧"
        },
        {
          "text": "HTML5",
          "link": "/docs/old/HTML5"
        },
        {
          "text": "HTML基础",
          "link": "/docs/old/HTML基础"
        },
        {
          "text": "Javascript-EVENT",
          "link": "/docs/old/Javascript-EVENT"
        },
        {
          "text": "Javascript-RegExp",
          "link": "/docs/old/Javascript-RegExp"
        },
        {
          "text": "Javascript基础",
          "link": "/docs/old/Javascript基础"
        },
        {
          "text": "Javascript运动函数",
          "link": "/docs/old/Javascript运动函数"
        },
        {
          "text": "Javascript面向对象",
          "link": "/docs/old/Javascript面向对象"
        },
        {
          "text": "OPPOA56电池鼓包换直供通电自动开机模块",
          "link": "/docs/old/OPPOA56电池鼓包换直供通电自动开机模块"
        },
        {
          "text": "Python虚拟环境的创建和使用指南",
          "link": "/docs/old/Python虚拟环境的创建和使用指南"
        },
        {
          "text": "React",
          "link": "/docs/old/React"
        },
        {
          "text": "Redux",
          "link": "/docs/old/Redux"
        },
        {
          "text": "VS-MDAllInPicGo-Markdown写作的图片上传利器",
          "link": "/docs/old/VS-MDAllInPicGo-Markdown写作的图片上传利器"
        },
        {
          "text": "Vue-React的组件传值",
          "link": "/docs/old/Vue-React的组件传值"
        },
        {
          "text": "Vuex",
          "link": "/docs/old/Vuex"
        },
        {
          "text": "electron",
          "link": "/docs/old/electron"
        },
        {
          "text": "koa2-mongodb搭建后端api项目",
          "link": "/docs/old/koa2-mongodb搭建后端api项目"
        },
        {
          "text": "manjaro安装后必须做的事情",
          "link": "/docs/old/manjaro安装后必须做的事情"
        },
        {
          "text": "ng-alain的使用",
          "link": "/docs/old/ng-alain的使用"
        },
        {
          "text": "python-selenium-web自动化测试",
          "link": "/docs/old/python-selenium-web自动化测试"
        },
        {
          "text": "vuepress的使用",
          "link": "/docs/old/vuepress的使用"
        },
        {
          "text": "webpack",
          "link": "/docs/old/webpack"
        },
        {
          "text": "window安装ctags",
          "link": "/docs/old/window安装ctags"
        },
        {
          "text": "函数防抖和函数节流",
          "link": "/docs/old/函数防抖和函数节流"
        },
        {
          "text": "域名、子域名、IP地址与服务器端口之间的关系以及子域名和反向代理的区别",
          "link": "/docs/old/域名、子域名、IP地址与服务器端口之间的关系以及子域名和反向代理的区别"
        },
        {
          "text": "开发自己的 VSCode 插件：开启编程效率之旅",
          "link": "/docs/old/开发自己的 VSCode 插件：开启编程效率之旅"
        },
        {
          "text": "模块化开发",
          "link": "/docs/old/模块化开发"
        },
        {
          "text": "解锁 Git 的隐藏力量：如何用 Git Hooks 自动化你的开发流程",
          "link": "/docs/old/解锁 Git 的隐藏力量：如何用 Git Hooks 自动化你的开发流程"
        },
        {
          "text": "通过谷歌服务获取网站favicon",
          "link": "/docs/old/通过谷歌服务获取网站favicon"
        },
        {
          "text": "transform、transition、animation的区别",
          "link": "/docs/transform、transition、animation的区别"
        },
        {
          "text": "前端实战：使用 eslint + prettier 清理 Vue2 老项目的 💩 山",
          "link": "/docs/前端实战：使用 eslint + prettier 清理 Vue2 老项目的 💩 山"
        },
        {
          "text": "通过kickstart.nvim入门Neo(Vim)",
          "link": "/docs/通过kickstart.nvim入门Neo(Vim)"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/kenis1108"
    }
  ]
}

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.