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": "我的文章",
      "link": "/deepseek本地部署"
    }
  ],
  "sidebar": [
    {
      "text": "我的文章",
      "items": [
        {
          "text": "deepseek本地部署",
          "link": "/deepseek本地部署"
        },
        {
          "text": "osharp的Auth_Function与Auth_Module什么关系",
          "link": "/osharp的Auth_Function与Auth_Module什么关系"
        },
        {
          "text": "Admin.Net按钮权限自动生成器方法",
          "link": "/Admin.Net按钮权限自动生成器方法"
        },
        {
          "text": "osharp多租户方案",
          "link": "/osharp多租户方案"
        },
        {
          "text": "osharp集成Yitter.IdGenerator并实现分布式ID",
          "link": "/osharp集成Yitter.IdGenerator并实现分布式ID"
        }
      ]
    }
  ],
  "footer": {
    "message": "<a href=\"https://beian.miit.gov.cn/\" target=\"_blank\" class=\"icp\" style=\"display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; margin: 0 10px;\"><img src=\"/icp.png\" style=\"width: 18px;height: 18px; margin-right: 4px;\"/><span>京ICP备XXXXXXXX号-X</span></a><a href=\"https://beian.mps.gov.cn/\" target=\"_blank\" class=\"mps\" style=\"display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; margin: 0 10px;\"><img src=\"/ga.png\" style=\"width: 18px;height: 18px; margin-right: 4px;\"/><span>浙公网安备33030202001973号</span></a>",
    "copyright": "Copyright © 2024-present wxy"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

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.