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": "VMware Linux 配置 共享文件夹",
          "link": "/VMware Linux 配置 共享文件夹.md"
        },
        {
          "text": "Windows手动安装OpenSSH Server到任何地方",
          "link": "/Windows手动安装OpenSSH Server到任何地方.md"
        },
        {
          "text": "api-examples",
          "link": "/api-examples.md"
        },
        {
          "text": "articles",
          "link": "/articles.md"
        },
        {
          "text": "前端实战：使用 eslint + prettier 清理 Vue2 老项目的 💩 山",
          "link": "/前端实战：使用 eslint + prettier 清理 Vue2 老项目的 💩 山.md"
        }
      ]
    }
  ],
  "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.