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

{
  "outline": {
    "level": "deep",
    "label": "目录"
  },
  "nav": [
    {
      "text": "主页",
      "link": "/"
    }
  ],
  "sidebar": [
    {
      "text": "Vue 工具",
      "collapsed": false,
      "items": [
        {
          "text": "概览",
          "link": "/vue/"
        },
        {
          "text": "用户引导",
          "link": "/vue/user-guide"
        },
        {
          "text": "拖拽排序",
          "link": "/vue/drag-drop"
        },
        {
          "text": "瀑布流",
          "link": "/vue/waterfall"
        },
        {
          "text": "二维码",
          "link": "/vue/qrcode"
        },
        {
          "text": "文件预览",
          "link": "/vue/file-preview"
        },
        {
          "text": "富文本编辑器",
          "link": "/vue/rich-text-editor"
        },
        {
          "text": "虚拟滚动",
          "link": "/vue/virtual-scroll"
        },
        {
          "text": "轮播图",
          "link": "/vue/swiper"
        },
        {
          "text": "跑马灯",
          "link": "/vue/marquee"
        },
        {
          "text": "图表",
          "link": "/vue/charts"
        },
        {
          "text": "代码高亮",
          "link": "/vue/highlight"
        },
        {
          "text": "数字签名",
          "link": "/vue/signature"
        }
      ]
    },
    {
      "text": "Vite 插件",
      "collapsed": false,
      "items": [
        {
          "text": "概览",
          "link": "/vite-plugins/"
        },
        {
          "text": "自动导入",
          "link": "/vite-plugins/auto-import"
        },
        {
          "text": "自定义插件开发",
          "link": "/vite-plugins/custom-plugin"
        }
      ]
    },
    {
      "text": "浏览器技术",
      "collapsed": false,
      "items": [
        {
          "text": "指南",
          "link": "/browser/guide"
        },
        {
          "text": "Web Worker",
          "link": "/browser/web-worker"
        },
        {
          "text": "IndexedDB",
          "link": "/browser/indexeddb"
        },
        {
          "text": "PWA",
          "link": "/browser/pwa"
        },
        {
          "text": "标签页通信",
          "link": "/browser/tab-communication"
        },
        {
          "text": "浏览器扩展",
          "link": "/browser/extensions"
        }
      ]
    },
    {
      "text": "实用工具",
      "collapsed": false,
      "items": [
        {
          "text": "日期转换 - Day.js",
          "link": "/utils/dayjs"
        },
        {
          "text": "正则表达式",
          "link": "/utils/regex"
        }
      ]
    },
    {
      "text": "开发技巧",
      "collapsed": false,
      "items": [
        {
          "text": "概览",
          "link": "/dev-tips/"
        },
        {
          "text": "VSCode 代码片段",
          "link": "/dev-tips/vscode-snippets"
        }
      ]
    },
    {
      "text": "后端",
      "collapsed": false,
      "items": [
        {
          "text": "概览",
          "link": "/backend/"
        },
        {
          "text": "MySQL 数据库导入",
          "link": "/backend/mysql-poetry-import"
        },
        {
          "text": "Bun + Elysia + Prisma",
          "link": "/backend/BACKEND_SETUP"
        }
      ]
    },
    {
      "text": "框架生态",
      "items": [
        {
          "text": "React 工具",
          "link": "/tools/react"
        },
        {
          "text": "状态管理",
          "link": "/tools/state"
        }
      ]
    },
    {
      "text": "实用工具",
      "items": [
        {
          "text": "正则表达式",
          "link": "/tools/regex"
        },
        {
          "text": "时间处理",
          "link": "/tools/datetime"
        },
        {
          "text": "数据处理",
          "link": "/tools/data"
        },
        {
          "text": "文本处理",
          "link": "/tools/text"
        }
      ]
    },
    {
      "text": "开发工具",
      "items": [
        {
          "text": "代码格式化",
          "link": "/tools/formatters"
        },
        {
          "text": "代码检查",
          "link": "/tools/linters"
        },
        {
          "text": "构建工具",
          "link": "/tools/build"
        },
        {
          "text": "包管理器",
          "link": "/tools/package-managers"
        }
      ]
    },
    {
      "text": "UI/样式",
      "items": [
        {
          "text": "CSS 工具",
          "link": "/tools/css"
        },
        {
          "text": "颜色工具",
          "link": "/tools/colors"
        },
        {
          "text": "图标库",
          "link": "/tools/icons"
        },
        {
          "text": "动画库",
          "link": "/tools/animations"
        },
        {
          "text": "fig2sketch",
          "link": "/tools/figma2sketch"
        }
      ]
    },
    {
      "text": "性能优化",
      "items": [
        {
          "text": "性能分析",
          "link": "/tools/performance"
        },
        {
          "text": "图片优化",
          "link": "/tools/images"
        },
        {
          "text": "代码压缩",
          "link": "/tools/minify"
        }
      ]
    },
    {
      "text": "测试调试",
      "items": [
        {
          "text": "单元测试",
          "link": "/tools/testing"
        },
        {
          "text": "调试工具",
          "link": "/tools/debugging"
        },
        {
          "text": "API 测试",
          "link": "/tools/api"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

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.