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": "前端面试题",
      "link": "/basic/basic-1"
    }
  ],
  "sidebar": [
    {
      "text": "基础篇",
      "items": [
        {
          "text": "HTML、HTTP、WEB综合问题",
          "items": [
            {
              "text": "1、前端需要注意哪些SEO",
              "link": "/basic/basic-1"
            },
            {
              "text": "2、img的title和alt有什么区别",
              "link": "/basic/basic-2"
            },
            {
              "text": "3、HTTP的几种请求方法用途",
              "link": "/basic/basic-3"
            },
            {
              "text": "4、从浏览器地址栏输入url到显示页面的步骤",
              "link": "/basic/basic-4"
            },
            {
              "text": "5、如何进行网站性能优化",
              "link": "/basic/basic-5"
            },
            {
              "text": "6、HTTP状态码及其含义",
              "link": "/basic/basic-6"
            },
            {
              "text": "7、语义化的理解",
              "link": "/basic/basic-7"
            },
            {
              "text": "8、介绍一下你对浏览器内核的理解？",
              "link": "/basic/basic-8"
            },
            {
              "text": "9、html5有哪些新特性、移除了那些元素？",
              "link": "/basic/basic-9"
            },
            {
              "text": "10、HTML5的离线储存怎么使用，工作原理能不能解释一下？",
              "link": "/basic/basic-10"
            }
          ]
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": ""
    }
  ]
}

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.