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

{
  "siteTitle": "BaoBao Wiki",
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "游戏百科",
      "items": [
        {
          "text": "APICO (蜂语镇)",
          "link": "/guides/apico/"
        },
        {
          "text": "Tinykin (小眷灵)",
          "link": "/guides/tinykin/"
        }
      ]
    },
    {
      "text": "关于博主",
      "link": "/about"
    }
  ],
  "sidebar": {
    "/guides/apico/": [
      {
        "text": "🚀 基础建设",
        "collapsed": false,
        "items": [
          {
            "text": "新手指南",
            "link": "/guides/apico/getting-started"
          },
          {
            "text": "成就系统",
            "link": "/guides/apico/achievements"
          },
          {
            "text": "自动化方案",
            "link": "/guides/apico/auto"
          },
          {
            "text": "NPC",
            "link": "/guides/apico/npc"
          }
        ]
      },
      {
        "text": "🐝 生态百科",
        "collapsed": false,
        "items": [
          {
            "text": "群居蜜蜂",
            "link": "/guides/apico/bee/social-bees"
          },
          {
            "text": "独居蜜蜂",
            "link": "/guides/apico/bee/solitary-bees"
          },
          {
            "text": "蝴蝶",
            "link": "/guides/apico/butterflies"
          },
          {
            "text": "花朵",
            "link": "/guides/apico/flowers"
          },
          {
            "text": "鱼类",
            "link": "/guides/apico/fishes"
          }
        ]
      },
      {
        "text": "🏗️ 工业建筑",
        "collapsed": true,
        "items": [
          {
            "text": "工具与机器",
            "link": "/guides/apico/machines"
          },
          {
            "text": "颜料与建筑",
            "link": "/guides/apico/building"
          }
        ]
      }
    ],
    "/guides/tinykin/": [
      {
        "text": "基础内容",
        "collapsed": false,
        "items": [
          {
            "text": "游戏简介",
            "link": "/guides/tinykin/"
          },
          {
            "text": "新手小技巧",
            "link": "/guides/tinykin/beginner"
          },
          {
            "text": "成就系统",
            "link": "/guides/tinykin/achievements"
          }
        ]
      },
      {
        "text": "全收集细节",
        "collapsed": false,
        "items": [
          {
            "text": "信封位置",
            "link": "/guides/tinykin/"
          },
          {
            "text": "友好鬼魂全收集",
            "link": "/guides/tinykin/"
          },
          {
            "text": "支线成就收集",
            "link": "/guides/tinykin/"
          },
          {
            "text": "胡说道博物馆收集",
            "link": "/guides/tinykin/"
          },
          {
            "text": "全收集容易忽略的地方",
            "link": "/guides/tinykin/"
          }
        ]
      }
    ]
  },
  "outline": {
    "level": [
      2,
      3
    ],
    "label": "本页目录"
  },
  "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.