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": "/svg/antd.svg",
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "项目",
      "link": "/project/front"
    },
    {
      "text": "学习",
      "link": "/study/TypeScript/Generics"
    },
    {
      "text": "VitePress",
      "link": "/vitepress/markdown-examples"
    }
  ],
  "sidebar": [
    {
      "text": "项目",
      "items": [
        {
          "text": "前端项目",
          "link": "/project/front"
        },
        {
          "text": "后端项目",
          "link": "/project/back"
        }
      ]
    },
    {
      "text": "学习",
      "items": [
        {
          "text": "TypeScript语法",
          "items": [
            {
              "text": "泛型",
              "link": "/study/TypeScript/Generics"
            },
            {
              "text": "枚举",
              "link": "/study/TypeScript/Enum"
            }
          ]
        },
        {
          "text": "React",
          "items": [
            {
              "text": "总线",
              "link": "/study/React/Bus"
            }
          ]
        },
        {
          "text": "React状态管理",
          "link": "/study/ReactStateManage"
        },
        {
          "text": "AST抽象语法树",
          "link": "/study/AST"
        },
        {
          "text": "列表事务管理器",
          "link": "/study/ListManager"
        },
        {
          "text": "全局事件总线",
          "link": "/study/EventBus"
        }
      ]
    },
    {
      "text": "VitePress",
      "items": [
        {
          "text": "Markdown扩展",
          "link": "/vitepress/Markdown"
        },
        {
          "text": "Markdown示例",
          "link": "/vitepress/markdown-examples"
        },
        {
          "text": "API示例",
          "link": "/vitepress/api-examples"
        }
      ]
    }
  ],
  "footer": {
    "copyright": "版权所有 © 2024 星沉大海 备案号：<a target=\"_blank\" href=\"https://beian.miit.gov.cn\">豫ICP备2024069827号-2</a>"
  },
  "search": {
    "provider": "local"
  },
  "socialLinks": [
    {
      "icon": {
        "svg": "<svg t=\"1719211185173\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4410\" width=\"256\" height=\"256\"><path d=\"M512 960c-246.4 0-448-201.6-448-448s201.6-448 448-448 448 201.6 448 448-201.6 448-448 448z\" fill=\"#D81E06\" p-id=\"4411\"></path><path d=\"M721.664 467.968h-235.52a22.272 22.272 0 0 0-20.736 20.736v51.776c0 10.368 10.368 20.736 20.736 20.736H628.48c10.368 0 20.736 10.304 20.736 20.672v10.368c0 33.664-28.48 62.08-62.144 62.08H392.896a22.272 22.272 0 0 1-20.672-20.672V436.928c0-33.664 28.48-62.08 62.08-62.08h287.36a22.272 22.272 0 0 0 20.736-20.736v-51.84a22.272 22.272 0 0 0-20.736-20.672h-287.36A152.96 152.96 0 0 0 281.6 434.368v287.36c0 10.304 10.368 20.672 20.736 20.672h302.848c75.072 0 137.216-62.08 137.216-137.216v-116.48a22.272 22.272 0 0 0-20.736-20.736z\" fill=\"#FFFFFF\" p-id=\"4412\"></path></svg>"
      },
      "link": "https://gitee.com/starcn"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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