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

{
  "logo": "https://github.com/ShadowsSide/wiki-img/blob/main/Doraemon.png?raw=true",
  "darkModeSwitchLabel": "外观",
  "sidebarMenuLabel": "目录",
  "returnToTopLabel": "返回顶部",
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "我要上车",
      "link": "/我是乘客/乘客必读"
    },
    {
      "text": "我要开车",
      "link": "/我是司机/发车必读"
    },
    {
      "text": "审核流程",
      "link": "/我是司机/审核流程"
    }
  ],
  "sidebar": [
    {
      "items": [
        {
          "text": "🏠 关于我们",
          "link": "/简介/关于我们"
        }
      ]
    },
    {
      "text": "群规及置顶",
      "collapsed": false,
      "items": [
        {
          "text": "📌 置顶必读",
          "link": "群规及置顶/置顶必读"
        },
        {
          "text": "📖 聊天群规",
          "link": "群规及置顶/聊天群规"
        }
      ]
    },
    {
      "text": "我是乘客",
      "collapsed": false,
      "items": [
        {
          "text": "🙋 乘客必读",
          "link": "我是乘客/乘客必读"
        }
      ]
    },
    {
      "text": "我是司机",
      "collapsed": false,
      "items": [
        {
          "text": "🪪 非审核车",
          "link": "我是司机/非审核车"
        },
        {
          "text": "🚗 发车必读",
          "link": "我是司机/发车必读"
        },
        {
          "text": "🔍 审核流程",
          "link": "我是司机/审核流程"
        },
        {
          "text": "💰 价格参考",
          "link": "我是司机/价格参考"
        }
      ]
    },
    {
      "text": "教程博客",
      "items": [
        {
          "text": "Yummy`s Blog",
          "link": "https://yummy.best"
        }
      ]
    },
    {
      "text": "Telegram 频道（友情链接）",
      "items": [
        {
          "text": "Yummy 😋",
          "link": "https://t.me/yummybest"
        },
        {
          "text": "beng！",
          "link": "https://t.me/mdmbeng"
        }
      ]
    }
  ],
  "search": {
    "provider": "local"
  },
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2023 <a href=\"https://t.me/hezu1\"> 电报第一合租群"
  },
  "socialLinks": [
    {
      "icon": {
        "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"128\" height=\"128\" viewBox=\"0 0 256 256\"><defs><linearGradient id=\"IconifyId18ac152356bebe2080\" x1=\"50%\" x2=\"50%\" y1=\"0%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#2AABEE\"/><stop offset=\"100%\" stop-color=\"#229ED9\"/></linearGradient></defs><path fill=\"url(#IconifyId18ac152356bebe2080)\" d=\"M128 0C94.06 0 61.48 13.494 37.5 37.49A128.038 128.038 0 0 0 0 128c0 33.934 13.5 66.514 37.5 90.51C61.48 242.506 94.06 256 128 256s66.52-13.494 90.5-37.49c24-23.996 37.5-56.576 37.5-90.51c0-33.934-13.5-66.514-37.5-90.51C194.52 13.494 161.94 0 128 0Z\"/><path fill=\"#FFF\" d=\"M57.94 126.648c37.32-16.256 62.2-26.974 74.64-32.152c35.56-14.786 42.94-17.354 47.76-17.441c1.06-.017 3.42.245 4.96 1.49c1.28 1.05 1.64 2.47 1.82 3.467c.16.996.38 3.266.2 5.038c-1.92 20.24-10.26 69.356-14.5 92.026c-1.78 9.592-5.32 12.808-8.74 13.122c-7.44.684-13.08-4.912-20.28-9.63c-11.26-7.386-17.62-11.982-28.56-19.188c-12.64-8.328-4.44-12.906 2.76-20.386c1.88-1.958 34.64-31.748 35.26-34.45c.08-.338.16-1.598-.6-2.262c-.74-.666-1.84-.438-2.64-.258c-1.14.256-19.12 12.152-54 35.686c-5.1 3.508-9.72 5.218-13.88 5.128c-4.56-.098-13.36-2.584-19.9-4.708c-8-2.606-14.38-3.984-13.82-8.41c.28-2.304 3.46-4.662 9.52-7.072Z\"/></svg>"
      },
      "link": "https://t.me/hezu2",
      "ariaLabel": "合租通知频道"
    }
  ]
}

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.