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

{
  "logo": "/avatar.png",
  "nav": [
    {
      "text": "记录",
      "link": "/"
    },
    {
      "text": "项目",
      "link": "/guide/"
    }
  ],
  "socialLinks": [
    {
      "icon": "gitee",
      "link": "https://gitee.com/dunye"
    }
  ],
  "search": {
    "provider": "local"
  },
  "sidebar": {
    "/": [
      {
        "items": [
          {
            "text": "api-examples",
            "link": "/api-examples.html"
          }
        ]
      }
    ],
    "/guide/": [
      {
        "items": [
          {
            "text": "Introduction for OpenVemo-A Rapid Content Creation Platform",
            "link": "/guide/Introduction for OpenVemo-A Rapid Content Creation Platform.html"
          },
          {
            "text": "Tomatoo-一款轻量云笔记诞生录",
            "link": "/guide/Tomatoo-一款轻量云笔记诞生录.html"
          },
          {
            "text": "Vue2中Push对象-数组遇到的问题",
            "link": "/guide/Vue2中Push对象-数组遇到的问题.html"
          },
          {
            "text": "Vue2建站踩坑系列之作用域",
            "link": "/guide/Vue2建站踩坑系列之作用域.html"
          },
          {
            "text": "V工具箱的故事",
            "link": "/guide/V工具箱的故事.html"
          },
          {
            "text": "WSL2-日常开发不完全指北",
            "link": "/guide/WSL2-日常开发不完全指北.html"
          },
          {
            "text": "一次吸顶效果的探索",
            "link": "/guide/一次吸顶效果的探索.html"
          },
          {
            "text": "一次探索追踪疫情数据的旅程-每日邮件",
            "link": "/guide/一次探索追踪疫情数据的旅程-每日邮件.html"
          },
          {
            "text": "关于Vue与angular的一些看法",
            "link": "/guide/关于Vue与angular的一些看法.html"
          },
          {
            "text": "拨开云雾-基于ES-Kibana进一步数据可视化分析某科技社区APP",
            "link": "/guide/拨开云雾-基于ES-Kibana进一步数据可视化分析某科技社区APP.html"
          },
          {
            "text": "效率脚本-Curl2Py从6到3步的实验",
            "link": "/guide/效率脚本-Curl2Py从6到3步的实验.html"
          },
          {
            "text": "病毒扩散城市仿真模拟自制小游戏",
            "link": "/guide/病毒扩散城市仿真模拟自制小游戏.html"
          },
          {
            "text": "记一次数据采集分析某科技社区APP的过程",
            "link": "/guide/记一次数据采集分析某科技社区APP的过程.html"
          },
          {
            "text": "记录一次Canvas绘图优化的过程",
            "link": "/guide/记录一次Canvas绘图优化的过程.html"
          },
          {
            "text": "遇到微信小程序的一个痛点",
            "link": "/guide/遇到微信小程序的一个痛点.html"
          },
          {
            "text": "项目的变迁，一些变化的记录",
            "link": "/guide/项目的变迁，一些变化的记录.html"
          }
        ]
      }
    ]
  }
}

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.