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": "img/cloud.svg",
  "editLink": {
    "pattern": "https://github.com/85521303/docs-vitepress/edit/master/:path",
    "text": "在GitHub上编辑此页面"
  },
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "文学",
      "items": [
        {
          "text": "道德经",
          "link": "/markDown/daodejing/daodejing"
        }
      ]
    },
    {
      "text": "前端",
      "items": [
        {
          "text": "Vue3",
          "link": "/markDown/Vue3/communicate-between-components"
        }
      ]
    }
  ],
  "sidebar": {
    "/markdown-examples": [
      {
        "text": "Examples",
        "items": [
          {
            "text": "Markdown Examples",
            "link": "/markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "/api-examples"
          }
        ]
      }
    ],
    "/markDown/Vue3": [
      {
        "text": "Vue3",
        "items": [
          {
            "text": "Vue3 组件间通信",
            "link": "/markDown/Vue3/communicate-between-components"
          },
          {
            "text": "Vue3 插槽",
            "link": "/markDown/Vue3/slot"
          },
          {
            "text": "Vue3 VueRouter",
            "link": "/markDown/Vue3/vue-router"
          },
          {
            "text": "Vue3 Pinia状态管理库",
            "link": "/markDown/Vue3/Pinia-state-manager"
          },
          {
            "text": "Vue3 其他API汇总",
            "link": "/markDown/Vue3/other-API"
          },
          {
            "text": "Vue3 项目配置问题汇总",
            "link": "/markDown/Vue3/project-config"
          }
        ]
      }
    ],
    "/markDown/daodejing": [
      {
        "text": "道德经",
        "items": [
          {
            "text": "第一章、天地之始",
            "link": "/markDown/daodejing"
          },
          {
            "text": "第二章、功成弗居",
            "link": "/markDown/daodejing"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/85521303"
    }
  ]
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md",
  "lastUpdated": 1750388802000
}

Page Frontmatter

{
  "outline": "deep"
}

More

Check out the documentation for the full list of runtime APIs.