Skip to content

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:

md
<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

{
  "siteTitle": "卜夋小站",
  "logo": "/logo.png",
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "前端",
      "link": "/front"
    },
    {
      "text": "后端",
      "link": "/backend"
    },
    {
      "text": "移动端",
      "link": "/mobile"
    },
    {
      "text": "更多",
      "link": "/docs/other"
    }
  ],
  "sidebar": {
    "/docs/database/": [
      {
        "text": "database学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/database/index"
          }
        ]
      }
    ],
    "/docs/database/mysql/": [
      {
        "text": "mysql学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/database/mysql/index"
          }
        ]
      }
    ],
    "/docs/go/base/": [
      {
        "text": "base学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/go/base/index"
          }
        ]
      }
    ],
    "/docs/go/framwork/": [
      {
        "text": "framwork学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/go/framwork/index"
          }
        ]
      }
    ],
    "/docs/go/": [
      {
        "text": "go学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/go/index"
          }
        ]
      }
    ],
    "/docs/go/lib/": [
      {
        "text": "lib学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/go/lib/index"
          }
        ]
      }
    ],
    "/docs/html/": [
      {
        "text": "html学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/html/index"
          }
        ]
      }
    ],
    "/docs/html/js/": [
      {
        "text": "js学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/html/js/index"
          },
          {
            "text": "javascript原型",
            "link": "/docs/html/js/javascript原型"
          }
        ]
      }
    ],
    "/docs/ios/": [
      {
        "text": "ios学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/ios/index"
          }
        ]
      }
    ],
    "/docs/java/": [
      {
        "text": "java学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/java/index"
          },
          {
            "text": "java基础",
            "link": "/docs/java/java基础"
          },
          {
            "text": "mybatis",
            "link": "/docs/java/mybatis"
          },
          {
            "text": "springboot",
            "link": "/docs/java/springboot"
          }
        ]
      }
    ],
    "/docs/other/": [
      {
        "text": "other学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/other/index"
          }
        ]
      }
    ],
    "/docs/other/qemu/": [
      {
        "text": "qemu学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/other/qemu/index"
          }
        ]
      }
    ],
    "/docs/other/ssl/": [
      {
        "text": "ssl学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/other/ssl/index"
          }
        ]
      }
    ],
    "/docs/python/base/": [
      {
        "text": "base学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/python/base/index"
          },
          {
            "text": "python函数与控制流",
            "link": "/docs/python/base/python函数与控制流"
          },
          {
            "text": "python基本数据类型",
            "link": "/docs/python/base/python基本数据类型"
          },
          {
            "text": "python面向对象",
            "link": "/docs/python/base/python面向对象"
          }
        ]
      }
    ],
    "/docs/python/": [
      {
        "text": "python学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/python/index"
          }
        ]
      }
    ],
    "/docs/python/lib/": [
      {
        "text": "lib学习日记",
        "items": [
          {
            "text": "matplotlib",
            "link": "/docs/python/lib/matplotlib"
          }
        ]
      }
    ],
    "/docs/react/": [
      {
        "text": "react学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/react/index"
          },
          {
            "text": "one",
            "link": "/docs/react/one"
          }
        ]
      }
    ],
    "/docs/rust/": [
      {
        "text": "rust学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/rust/index"
          }
        ]
      }
    ],
    "/docs/vue/": [
      {
        "text": "vue学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/vue/index"
          }
        ]
      }
    ],
    "/docs/vue/pinia/": [
      {
        "text": "pinia学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/vue/pinia/index"
          }
        ]
      }
    ],
    "/docs/vue/router/": [
      {
        "text": "router学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/vue/router/index"
          }
        ]
      }
    ],
    "/docs/vue/vue3/": [
      {
        "text": "vue3学习日记",
        "items": [
          {
            "text": "index",
            "link": "/docs/vue/vue3/index"
          },
          {
            "text": "vue3入门",
            "link": "/docs/vue/vue3/vue3入门"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/crackzj"
    }
  ],
  "footer": {
    "message": "<span style=\"display:flex;justify-content:center;align-items:center;\"><img src=\"/police.png\" style=\"width:20px;height:20px;\"/> <a style=\"text-decoration:none\" href=\"http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=52012202006122\" target=\"_blank\">&nbsp;&nbsp;贵公网安备52012202006122号</a><a style=\"text-decoration:none\" href=\"https://beian.miit.gov.cn\" target=\"_blank\">&nbsp;&nbsp;黔ICP备17007116号&nbsp;&nbsp;</a>Copyright © 2019-2025 <a style=\"text-decoration:none\" href=\"https://github.com/crackzj\">crackzj</a><span>",
    "copyright": ""
  }
}

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.