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": "/logo.png",
  "locales": {
    "/": {
      "selectLanguageText": "选择语言",
      "selectLanguageName": "简体中文"
    },
    "/en/": {
      "selectLanguageText": "Language",
      "selectLanguageName": "English"
    }
  },
  "outline": {
    "label": "本页内容"
  },
  "siteTitle": "创意无限",
  "nav": [
    {
      "text": "首页",
      "link": "https://creatinf.com"
    },
    {
      "text": "指南",
      "link": "index.md"
    }
  ],
  "sidebar": [
    {
      "text": "图像处理",
      "items": [
        {
          "text": "图像超分",
          "link": "/guide/image-super-resolution"
        },
        {
          "text": "图像格式修改",
          "link": "/guide/image-format-conversion"
        },
        {
          "text": "一键抠图",
          "link": "/guide/one-click-matting"
        },
        {
          "text": "选点抠图",
          "link": "/guide/point-based-matting"
        },
        {
          "text": "OCR识别",
          "link": "/guide/OCR"
        },
        {
          "text": "图像重对焦",
          "link": "/guide/Image-ReFocus"
        }
      ]
    },
    {
      "text": "文档工具",
      "items": [
        {
          "text": "PPT在线编辑器",
          "link": "/guide/ppt-online-editor"
        },
        {
          "text": "思维导图制作",
          "link": "/guide/mind-mapping"
        }
      ]
    },
    {
      "text": "附录",
      "items": [
        {
          "text": "Q&A集合以及其他内容",
          "link": "/guide/Q&A"
        }
      ]
    },
    {
      "text": "更新日志",
      "items": [
        {
          "text": "更新记录",
          "link": "/guide/Update_log"
        }
      ]
    }
  ],
  "footer": {
    "message": "由石家庄舒君科技有限公司开发",
    "copyright": "版权所有 © 2025 创意无限"
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "langMenuLabel": "多语言",
  "returnToTopLabel": "回到顶部",
  "sidebarMenuLabel": "菜单",
  "darkModeSwitchLabel": "主题",
  "lightModeSwitchTitle": "切换到浅色模式",
  "darkModeSwitchTitle": "切换到深色模式"
}

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.