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": "/logo.svg",
    "width": 24,
    "height": 24
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/better-try"
    },
    {
      "icon": "twitter",
      "link": "https://twitter.com/trybetterapp"
    },
    {
      "icon": "discord",
      "link": "https://github.com/better-try"
    },
    {
      "icon": "youtube",
      "link": "https://youtube.com/@trybetterapp"
    }
  ],
  "nav": [
    {
      "text": "产品",
      "link": "/zh/products/index",
      "activeMatch": "/zh/products/"
    },
    {
      "text": "商店",
      "link": "/zh/store/index",
      "activeMatch": "/zh/store/"
    },
    {
      "text": "指南",
      "link": "/zh/guide/index",
      "activeMatch": "/zh/guide/"
    }
  ],
  "sidebar": {
    "/zh/guide/": {
      "base": "/zh/guide/",
      "items": [
        {
          "text": "极客闹钟",
          "collapsed": false,
          "items": [
            {
              "text": "产品介绍",
              "base": "/zh/guide/",
              "link": "product1/api-examples"
            },
            {
              "text": "版本记录",
              "base": "/zh/guide/",
              "link": "product1/markdown-examples"
            }
          ]
        },
        {
          "text": "签证助手",
          "collapsed": false,
          "items": [
            {
              "text": "产品介绍",
              "base": "/zh/guide/",
              "link": "product2/api-examples"
            },
            {
              "text": "版本记录",
              "base": "/zh/guide/",
              "link": "product2/markdown-examples"
            }
          ]
        }
      ]
    },
    "/zh/products/": {
      "base": "/zh/products/",
      "items": [
        {
          "text": "参考",
          "items": [
            {
              "text": "站点配置",
              "link": "site-config"
            },
            {
              "text": "frontmatter 配置",
              "link": "frontmatter-config"
            },
            {
              "text": "运行时 API",
              "link": "runtime-api"
            },
            {
              "text": "CLI",
              "link": "cli"
            },
            {
              "text": "产品",
              "base": "/zh/reference/default-theme-",
              "items": [
                {
                  "text": "概览",
                  "link": "config"
                },
                {
                  "text": "导航栏",
                  "link": "nav"
                },
                {
                  "text": "侧边栏",
                  "link": "sidebar"
                },
                {
                  "text": "主页",
                  "link": "home-page"
                },
                {
                  "text": "页脚",
                  "link": "footer"
                },
                {
                  "text": "布局",
                  "link": "layout"
                },
                {
                  "text": "徽章",
                  "link": "badge"
                },
                {
                  "text": "团队页",
                  "link": "team-page"
                },
                {
                  "text": "上下页链接",
                  "link": "prev-next-links"
                },
                {
                  "text": "编辑链接",
                  "link": "edit-link"
                },
                {
                  "text": "最后更新时间戳",
                  "link": "last-updated"
                },
                {
                  "text": "搜索",
                  "link": "search"
                },
                {
                  "text": "Carbon Ads",
                  "link": "carbon-ads"
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "editLink": {
    "pattern": "https://github.com/vuejs/vitepress/edit/main/docs/:path",
    "text": "在 GitHub 上编辑此页面"
  },
  "footer": {
    "copyright": "版权所有 © 2023-2024 TryBetterApp."
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "outline": {
    "label": "页面导航"
  },
  "lastUpdated": {
    "text": "最后更新于",
    "formatOptions": {
      "dateStyle": "short",
      "timeStyle": "medium"
    }
  },
  "langMenuLabel": "多语言",
  "returnToTopLabel": "回到顶部",
  "sidebarMenuLabel": "菜单",
  "darkModeSwitchLabel": "主题",
  "lightModeSwitchTitle": "切换到浅色模式",
  "darkModeSwitchTitle": "切换到深色模式"
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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