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": "Home",
      "link": "/"
    },
    {
      "text": "Examples",
      "link": "/markdown-examples"
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "outline": [
    1,
    6
  ],
  "sidebar": [
    {
      "text": "api examples",
      "link": "/api-examples"
    },
    {
      "text": "markdown examples",
      "link": "/markdown-examples"
    },
    {
      "text": "化学",
      "items": [
        {
          "text": "無機化学",
          "link": "/化学/無機化学"
        },
        {
          "text": "理論化学",
          "link": "/化学/理論化学"
        }
      ],
      "collapsed": true
    },
    {
      "text": "数学",
      "items": [
        {
          "text": "常系数齐次线性递推式浅析",
          "link": "/数学/常系数齐次线性递推式浅析"
        },
        {
          "text": "微积分",
          "link": "/数学/微积分"
        }
      ],
      "collapsed": true
    },
    {
      "text": "日本語",
      "items": [
        {
          "text": "学校文法",
          "link": "/日本語/学校文法"
        }
      ],
      "collapsed": true
    },
    {
      "text": "物理",
      "items": [
        {
          "text": "波動",
          "link": "/物理/波動"
        },
        {
          "text": "热力学",
          "link": "/物理/热力学"
        },
        {
          "text": "简谐运动浅析",
          "link": "/物理/简谐运动浅析"
        },
        {
          "text": "電磁気",
          "link": "/物理/電磁気"
        }
      ],
      "collapsed": true
    }
  ]
}

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.