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": "../assets/test.svg",
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "Guides",
      "link": "/guides/intro"
    },
    {
      "text": "Components",
      "link": "/components/button"
    },
    {
      "text": "Others",
      "link": "/others/about"
    }
  ],
  "sidebar": [
    {
      "text": "Guides 开始",
      "items": [
        {
          "text": "Intro 介绍",
          "link": "/guides/intro"
        },
        {
          "text": "Install 安装",
          "link": "/guides/install"
        },
        {
          "text": "Theme 主题",
          "link": "/guides/theme"
        }
      ]
    },
    {
      "text": "Components 组件",
      "items": [
        {
          "text": "Block 块",
          "link": "/components/block"
        },
        {
          "text": "Button 按钮",
          "link": "/components/button"
        },
        {
          "text": "Checkbox 勾选框",
          "link": "/components/checkbox"
        },
        {
          "text": "Icon 图标",
          "link": "/components/icon"
        },
        {
          "text": "Input 输入框",
          "link": "/components/input"
        },
        {
          "text": "Loading / LoadingBar 加载",
          "link": "/components/loading"
        },
        {
          "text": "Message 消息",
          "link": "/components/message"
        },
        {
          "text": "Select 选择器",
          "link": "/components/select"
        },
        {
          "text": "Switch 开关",
          "link": "/components/switch"
        },
        {
          "text": "Tag 标签",
          "link": "/components/tag"
        }
      ]
    },
    {
      "text": "Others 其他",
      "items": [
        {
          "text": "About 关于",
          "link": "/others/about"
        }
      ]
    },
    {
      "text": "markdown-examples",
      "link": "/markdown-examples"
    },
    {
      "text": "Runtime API Examples",
      "link": "/api-examples"
    },
    {
      "text": "Congb19 测试区",
      "link": "/test"
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/congb19/combo-ui"
    }
  ]
}

Page Data ​

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

Page Frontmatter ​

{
  "outline": "deep"
}

More ​

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