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": "主页",
      "link": "/"
    },
    {
      "text": "前端",
      "items": [
        {
          "text": "基础",
          "items": [
            {
              "text": "html 基础",
              "link": "/article/front-end/basis/html-basis"
            },
            {
              "text": "css 基础",
              "link": "/article/front-end/basis/css-basis"
            }
          ]
        },
        {
          "text": "面试",
          "items": [
            {
              "text": "常见面试题",
              "link": "/article/front-end/interview/question"
            },
            {
              "text": "高级前端进阶",
              "link": "/article/front-end/interview/advanced-front-end"
            }
          ]
        },
        {
          "text": "Vue",
          "items": [
            {
              "text": "源码解析",
              "link": "/article/front-end/vue/source-code-analysis"
            }
          ]
        },
        {
          "text": "Javascript",
          "items": [
            {
              "text": "JavaScript 基础",
              "link": "/article/front-end/javascript/basis"
            },
            {
              "text": "JavaScript 标准内置对象",
              "link": "/article/front-end/javascript/api"
            },
            {
              "text": "学习笔记",
              "link": "/article/front-end/javascript/study-notes"
            },
            {
              "text": "Event-Loop",
              "link": "/article/front-end/javascript/event-loop"
            }
          ]
        },
        {
          "text": "工程化",
          "items": [
            {
              "text": "webpack",
              "link": "/article/front-end/engineering/webpack"
            }
          ]
        },
        {
          "text": "工具",
          "items": [
            {
              "text": "Vs code 配置",
              "link": "/article/front-end/tool/vscode"
            }
          ]
        }
      ]
    },
    {
      "text": "后端",
      "items": [
        {
          "text": "Rust",
          "items": [
            {
              "text": "入门学习",
              "link": "/article/back-end/rust/basic/getting-started"
            }
          ]
        }
      ]
    },
    {
      "text": "游戏",
      "items": [
        {
          "text": "UE",
          "items": [
            {
              "text": "入门学习",
              "link": "/article/game/ue/index"
            }
          ]
        }
      ]
    },
    {
      "text": "建模",
      "items": [
        {
          "text": "Blender",
          "items": [
            {
              "text": "常用快捷键",
              "link": "/article/modeling/blender/index"
            }
          ]
        }
      ]
    },
    {
      "text": "Github",
      "link": "https://github.com/maoxiaoquan"
    }
  ],
  "sidebar": {},
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/maoxiaoquan"
    }
  ]
}

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.