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

{
  "locales": {
    "/": {
      "label": "中文",
      "search": {
        "placeholder": "输入关键词搜索",
        "noResultsText": "无法找到相关结果",
        "resetButtonTitle": "清除查询条件",
        "button": {
          "buttonText": "搜索文档",
          "buttonAriaLabel": "搜索文档"
        },
        "modal": {
          "footer": {
            "selectText": "选择",
            "navigateText": "切换"
          }
        }
      }
    }
  },
  "search": {
    "provider": "local"
  },
  "outline": {
    "level": [
      2,
      4
    ],
    "label": "内容导航"
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "玩家手册",
      "link": "/book/基础知识"
    },
    {
      "text": "承重计算器",
      "link": "/alm-tool.html",
      "target": "_self"
    }
  ],
  "sidebar": [
    {
      "text": "入门",
      "collapsed": false,
      "items": [
        {
          "text": "什么是欧标铝型材？",
          "link": "/book/基础知识#什么是-欧标铝型材"
        },
        {
          "text": "DIY铝型材的基本三要素",
          "link": "/book/基础知识#diy铝型材的基本三要素"
        },
        {
          "text": "常用型号与规格标识",
          "link": "/book/基础知识#常用型号与规格标识"
        }
      ]
    },
    {
      "text": "认识铝型材",
      "collapsed": false,
      "items": [
        {
          "text": "欧标铝型材",
          "link": "/advanced/欧标铝型材"
        },
        {
          "text": "配件库",
          "link": "/advanced/配件库"
        },
        {
          "text": "非标",
          "link": "/advanced/非标"
        }
      ]
    },
    {
      "text": "连接方式",
      "collapsed": false,
      "items": [
        {
          "text": "基础知识",
          "link": "/connection/基础知识"
        },
        {
          "text": "连接方式",
          "link": "/connection/连接方式"
        },
        {
          "text": "技巧",
          "link": "/connection/技巧"
        }
      ]
    },
    {
      "text": "工具",
      "collapsed": false,
      "items": [
        {
          "text": "参考资料",
          "link": "/examples/markdown-examples"
        },
        {
          "text": "案例分享",
          "link": "/examples/api-examples"
        }
      ]
    }
  ]
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "examples/api-examples.md",
  "filePath": "examples/api-examples.md"
}

Page Frontmatter

{
  "outline": "deep"
}

More

Check out the documentation for the full list of runtime APIs.