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

{
  "search": {
    "provider": "local"
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "工具",
      "items": [
        {
          "text": "node版本管理工具",
          "link": "/前端/工具/node版本管理工具"
        }
      ]
    },
    {
      "text": "设计模式",
      "items": [
        {
          "text": "常用设计模式",
          "link": "/前端/设计模式/常用设计模式"
        }
      ]
    },
    {
      "text": "Antd",
      "items": [
        {
          "text": "Form 字段值存储机制",
          "link": "/前端/Antd/Form 字段值存储机制"
        }
      ]
    },
    {
      "text": "Html",
      "items": [
        {
          "text": "HTML DOM节点类型与nodeType值的对照表及示例说明",
          "link": "/前端/Antd/HTML DOM节点类型与nodeType值的对照表及示例说明"
        }
      ]
    },
    {
      "text": "JS",
      "items": [
        {
          "text": "apply & call & bind 异同",
          "link": "/前端/JS/apply & call & bind 异同"
        },
        {
          "text": "闭包",
          "link": "/前端/JS/闭包"
        },
        {
          "text": "基础 this",
          "link": "/前端/JS/基础 this"
        },
        {
          "text": "对象的深浅拷贝",
          "link": "/前端/JS/对象/对象的深浅拷贝"
        }
      ]
    },
    {
      "text": "Vue",
      "items": [
        {
          "text": "Vue 的理解",
          "link": "/前端/Vue/Vue 的理解"
        },
        {
          "text": "Vue 源码解读",
          "link": "/前端/Vue/Vue 源码解读"
        },
        {
          "text": "组件封装时 props 定义的常见方式",
          "link": "/前端/Vue/组件封装时 props 定义的常见方式"
        }
      ]
    },
    {
      "text": "React",
      "items": [
        {
          "text": "React组件中怎么做事件代理及原理",
          "link": "/前端/React/React组件中怎么做事件代理及原理"
        }
      ]
    },
    {
      "text": "git",
      "items": [
        {
          "text": "简介",
          "link": "/git/"
        },
        {
          "text": "git项目初始化",
          "link": "/git/ProjectInit"
        },
        {
          "text": "项目同时关联 GitHub 和 Gitee",
          "link": "/git/SyncToGiteeAndGithub"
        },
        {
          "text": "branch is behind",
          "link": "/git/q_branch_is_behind"
        },
        {
          "text": "vitepress 部署到 GitHub",
          "link": "/git/vitepressToGithub"
        }
      ]
    },
    {
      "text": "部署",
      "items": [
        {
          "text": "前后端 nginx 部署",
          "link": "/部署/前后端 nginx 部署"
        }
      ]
    },
    {
      "text": "md & vitepress",
      "items": [
        {
          "text": "md 中标题级别应该如何正确使用",
          "link": "/md/"
        },
        {
          "text": "vitepress",
          "link": "/vitepress/"
        },
        {
          "text": "Markdown Examples",
          "link": "/examples/markdown-examples"
        },
        {
          "text": "API Examples",
          "link": "/examples/api-examples"
        }
      ]
    }
  ],
  "sidebar": {
    "/examples/": [
      {
        "text": "examples",
        "items": [
          {
            "text": "Markdown Examples",
            "link": "/examples/markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "/examples/api-examples"
          }
        ]
      }
    ],
    "/git/": [
      {
        "text": "git",
        "items": [
          {
            "text": "简介",
            "link": "/git/"
          },
          {
            "text": "git项目初始化",
            "link": "/git/ProjectInit"
          },
          {
            "text": "项目同时关联 GitHub 和 Gitee",
            "link": "/git/SyncToGiteeAndGithub"
          },
          {
            "text": "branch is behind",
            "link": "/git/q_branch_is_behind"
          },
          {
            "text": "vitepress 部署到 GitHub",
            "link": "/git/vitepressToGithub"
          }
        ]
      }
    ],
    "/vitepress/": [
      {
        "text": "vitepress",
        "items": [
          {
            "text": "vitepress",
            "link": "/vitepress/index"
          },
          {
            "text": "env_set",
            "link": "/vitepress/env_set"
          }
        ]
      }
    ],
    "/部署/": [
      {
        "text": "部署",
        "items": [
          {
            "text": "部署",
            "link": "/部署/前后端 nginx 部署"
          }
        ]
      }
    ],
    "/md/": [
      {
        "text": "md",
        "items": [
          {
            "text": "md",
            "link": "/md/index"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "ariaLabel": "github",
      "link": "https://louis100.github.io/blogs/"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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