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": {
    "src": "/assets/logo.svg",
    "alt": "SharpUI"
  },
  "search": {
    "provider": "local"
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "指南",
      "link": "/guide/design"
    },
    {
      "text": "快速开始",
      "link": "/guide/quickstart"
    }
  ],
  "sidebar": [
    {
      "text": "开发指南",
      "collapsed": false,
      "items": [
        {
          "text": "简介",
          "link": "/guide/introduce"
        },
        {
          "text": "设计原则",
          "link": "/guide/design"
        },
        {
          "text": "快速开始",
          "link": "/guide/quickstart"
        }
      ]
    },
    {
      "text": "组件",
      "collapsed": false,
      "items": [
        {
          "text": "Basic",
          "items": [
            {
              "text": "Layout 布局",
              "link": "/components/layout"
            },
            {
              "text": "Container 布局容器",
              "link": "/components/container"
            },
            {
              "text": "Color 色彩",
              "link": "/components/color"
            },
            {
              "text": "Border 边框",
              "link": "/components/border"
            },
            {
              "text": "Button 按钮",
              "link": "/components/button"
            },
            {
              "text": "Icon 图标",
              "link": "/components/icon"
            },
            {
              "text": "Link 文字链接",
              "link": "/components/link"
            }
          ]
        },
        {
          "text": "Form",
          "items": [
            {
              "text": "Radio 单选框",
              "link": "/components/radio"
            },
            {
              "text": "Checkbox 多选框",
              "link": "/components/checkbox"
            },
            {
              "text": "Input 输入框",
              "link": "/components/input"
            },
            {
              "text": "InputNumber 数字输入框",
              "link": "/components/inputnumber"
            },
            {
              "text": "Select 选择器",
              "link": "/components/select"
            },
            {
              "text": "Switch 开关",
              "link": "/components/switch"
            },
            {
              "text": "Form 表单",
              "link": "/components/form"
            }
          ]
        },
        {
          "text": "Notice",
          "items": [
            {
              "text": "Alert 警告",
              "link": "/components/alert"
            },
            {
              "text": "Message 消息提示",
              "link": "/components/message"
            },
            {
              "text": "MessageBox 消息弹框",
              "link": "/components/messagebox"
            }
          ]
        },
        {
          "text": "Navigation",
          "items": [
            {
              "text": "Dropdown 下拉菜单",
              "link": "/components/dropdown"
            }
          ]
        },
        {
          "text": "Others",
          "items": [
            {
              "text": "Collapse 折叠面板",
              "link": "/components/collapse"
            }
          ]
        }
      ]
    }
  ],
  "outline": {
    "label": "页面导航"
  },
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2024-present liuyunhe"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/liuyunhe/sharp-ui"
    }
  ]
}

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.