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": "人",
      "items": [
        {
          "text": "解刨学和生理学",
          "link": "/item-1"
        },
        {
          "text": "行为神经科学导论",
          "link": "/item-2"
        },
        {
          "text": "心理学",
          "link": "/item-3"
        },
        {
          "text": "终身发展",
          "link": "/item-3"
        }
      ]
    },
    {
      "text": "社会",
      "items": [
        {
          "text": "语言学",
          "link": "/item-1"
        },
        {
          "text": "传播学",
          "link": "/item-2"
        },
        {
          "text": "人类学",
          "link": "/item-3"
        },
        {
          "text": "社会学",
          "link": "/item-3"
        },
        {
          "text": "经济学",
          "link": "/item-3"
        },
        {
          "text": "政治学",
          "link": "/item-3"
        },
        {
          "text": "地理学",
          "link": "/item-3"
        },
        {
          "text": "历史学",
          "link": "/item-3"
        },
        {
          "text": "未来学",
          "link": "/item-3"
        }
      ]
    },
    {
      "text": "文化",
      "items": [
        {
          "text": "视觉艺术",
          "link": "/item-1"
        },
        {
          "text": "听觉艺术",
          "link": "/item-2"
        },
        {
          "text": "语言艺术",
          "link": "/item-3"
        }
      ]
    },
    {
      "text": "自然",
      "items": [
        {
          "text": "地球科学",
          "link": "/item-1"
        },
        {
          "text": "天文学",
          "link": "/item-2"
        },
        {
          "text": "物理学",
          "link": "/item-3"
        },
        {
          "text": "化学",
          "link": "/item-3"
        },
        {
          "text": "生物学",
          "link": "/item-3"
        }
      ]
    },
    {
      "text": "抽象",
      "items": [
        {
          "text": "数学",
          "link": "/item-1"
        },
        {
          "text": "计算机科学",
          "link": "/item-2"
        }
      ]
    },
    {
      "text": "应用",
      "items": [
        {
          "text": "工具列表",
          "link": "/item-2"
        },
        {
          "text": "电子学",
          "link": "/item-3"
        }
      ]
    }
  ],
  "sidebar": [
    {
      "text": "引言",
      "link": "/markdown-examples"
    },
    {
      "text": "中世纪与文艺复兴",
      "collapsed": false,
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/markdown-examples"
        },
        {
          "text": "Runtime API Examples",
          "link": "/api-examples"
        }
      ]
    },
    {
      "text": "巴洛克",
      "collapsed": false,
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/markdown-examples"
        },
        {
          "text": "Runtime API Examples",
          "link": "/api-examples"
        }
      ]
    },
    {
      "text": "未来预期",
      "collapsed": false,
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/markdown-examples"
        },
        {
          "text": "Runtime API Examples",
          "link": "/api-examples"
        }
      ]
    },
    {
      "text": "个体历史",
      "collapsed": false,
      "items": [
        {
          "text": "碎片记忆",
          "link": "/markdown-examples"
        },
        {
          "text": "成长史",
          "link": "/api-examples"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

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.