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

{
  "nav": [
    {
      "text": "主页",
      "link": "/"
    }
  ],
  "sidebarMenuLabel": "菜单",
  "sidebar": [
    {
      "text": "Vue",
      "collapsed": false,
      "link": "/vue/",
      "items": [
        {
          "text": "props 和 emit 推荐定义方式",
          "link": "/vue/props-emit.html"
        },
        {
          "text": "阻止浏览器返回",
          "link": "/vue/use-history-back-trap.html"
        },
        {
          "text": "缓存 vue 变量",
          "link": "/vue/use-cache.html"
        },
        {
          "text": "获取子组件实例",
          "link": "/vue/instance-type.html"
        },
        {
          "text": "分页管理器",
          "link": "/vue/use-paging.html"
        },
        {
          "text": "自动引入",
          "link": "/vue/auto-import.html"
        },
        {
          "text": "简化 v-model 定义",
          "link": "/vue/define-model.html"
        },
        {
          "text": "UnoCss 文本溢出显示省略号",
          "link": "/vue/uno-text-overflow.html"
        }
      ]
    },
    {
      "text": "Typescript",
      "collapsed": false,
      "link": "/typescript/",
      "items": [
        {
          "text": "会过期的本地存储",
          "link": "/typescript/expire-storage.html"
        },
        {
          "text": "简易限制文字宽度",
          "link": "/typescript/text-overflow.html"
        },
        {
          "text": "ts 生成 json-schema",
          "link": "/typescript/json-schema.html"
        }
      ]
    },
    {
      "text": "Linux",
      "collapsed": false,
      "link": "/linux/",
      "items": [
        {
          "text": "ssh",
          "link": "/linux/ssh.html"
        },
        {
          "text": "scp",
          "link": "/linux/scp.html"
        }
      ]
    },
    {
      "text": "Docker",
      "link": "/docker/",
      "collapsed": false,
      "items": [
        {
          "text": "安装 Compose",
          "link": "/docker/compose.html"
        },
        {
          "text": "重载 nginx 配置",
          "link": "/docker/reload-nginx.html"
        },
        {
          "text": "容器中的一些错误",
          "link": "/docker/docker-error.html"
        }
      ]
    },
    {
      "text": "UniApp",
      "link": "/uniapp/",
      "collapsed": false,
      "items": [
        {
          "text": "Bug 记录",
          "link": "/uniapp/bug.html"
        }
      ]
    }
  ],
  "search": {
    "provider": "local",
    "options": {
      "translations": {
        "button": {
          "buttonText": "搜索文档",
          "buttonAriaLabel": "搜索文档"
        },
        "modal": {
          "footer": {
            "selectText": "选择",
            "navigateText": "切换",
            "closeText": "关闭"
          },
          "noResultsText": "无法找到相关结果"
        }
      }
    }
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "outline": {
    "label": "大纲"
  },
  "returnToTopLabel": "返回顶部",
  "darkModeSwitchTitle": "切换到深色模式",
  "lightModeSwitchTitle": "切换到浅色模式",
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/csj8520"
    }
  ],
  "footer": {
    "message": "<a href=\"https://beian.miit.gov.cn/\" target=\"_blank\">京ICP备18028525号-2</a>"
  }
}

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.