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": "/"
    },
    {
      "text": "ngrok",
      "link": "https://ngrok.cn/ngrok.html"
    },
    {
      "text": "HTML",
      "link": "https://ngrok.cn/html/html-html-tutorial.html"
    },
    {
      "text": "VUE3",
      "link": "https://ngrok.cn/vue3/introduction.html"
    }
  ],
  "sidebar": [
    {
      "text": "HTML教程",
      "items": [
        {
          "text": "HTML 教程导读",
          "link": "/html-html-tutorial"
        },
        {
          "text": "HTML 简介",
          "link": "/html-html-intro"
        },
        {
          "text": "HTML 编辑器",
          "link": "/html-html-editors"
        },
        {
          "text": "HTML 基础",
          "link": "/html-html-basic"
        },
        {
          "text": "HTML 元素",
          "link": "/html-html-elements"
        },
        {
          "text": "HTML 属性",
          "link": "/html-html-attributes"
        },
        {
          "text": "HTML 标题",
          "link": "/html-html-heading"
        },
        {
          "text": "HTML 段落",
          "link": "/html-html-paragraphs"
        },
        {
          "text": "HTML 格式化",
          "link": "/html-html-formatting"
        },
        {
          "text": "HTML 链接",
          "link": "/html-html-links"
        },
        {
          "text": "HTML 引用",
          "link": "/html-html-yinyong"
        },
        {
          "text": "HTML 注释",
          "link": "/html-html-zhushi"
        },
        {
          "text": "HTML id",
          "link": "/html-html-id"
        },
        {
          "text": "HTML 头部",
          "link": "/html-html-head"
        },
        {
          "text": "HTML CSS",
          "link": "/html-html-css"
        },
        {
          "text": "HTML 符号",
          "link": "/html-html-fuhao"
        },
        {
          "text": "HTML 图像",
          "link": "/html-html-images"
        },
        {
          "text": "HTML 表格",
          "link": "/html-html-tables"
        },
        {
          "text": "HTML 列表",
          "link": "/html-html-lists"
        },
        {
          "text": "HTML 区块",
          "link": "/html-html-blocks"
        },
        {
          "text": "HTML 布局",
          "link": "/html-html-layouts"
        },
        {
          "text": "HTML 表单",
          "link": "/html-html-form"
        },
        {
          "text": "HTML 框架",
          "link": "/html-html-iframes"
        },
        {
          "text": "HTML 脚本",
          "link": "/html-html-scripts"
        },
        {
          "text": "HTML 字符实体",
          "link": "/html-html-entities"
        },
        {
          "text": "HTML URL",
          "link": "/html-html-url"
        },
        {
          "text": "HTML 速查列表",
          "link": "/html-html-quicklist"
        },
        {
          "text": "HTML JavaScript",
          "link": "/html-html-javascript"
        },
        {
          "text": "HTML 总结",
          "link": "/html-html-summary"
        },
        {
          "text": "HTML 文件路径",
          "link": "/html-html-wenjianlujing"
        },
        {
          "text": "HTML 表情符号",
          "link": "/html-html-emoji"
        },
        {
          "text": "HTML 字符集",
          "link": "/html-html-zifuji"
        },
        {
          "text": "HTML 背景",
          "link": "/html-html-background"
        },
        {
          "text": "HTML URL字符编码",
          "link": "/html-html-urlzifubianma"
        },
        {
          "text": "HTML 文档类型",
          "link": "/html-html-filetype"
        },
        {
          "text": "XHTML 简介",
          "link": "/html-html-xhtml"
        },
        {
          "text": "XHTML 元素",
          "link": "/html-html-xhtmlyuansu"
        },
        {
          "text": "XHTML 属性",
          "link": "/html-html-xhtmlshuxing"
        },
        {
          "text": "HTML 媒体(Media)",
          "link": "/html-html-media"
        },
        {
          "text": "HTML 插件",
          "link": "/html-html-object"
        },
        {
          "text": "HTML 音频(Audio)",
          "link": "/html-html-sounds"
        },
        {
          "text": "HTML 视频(Videos)播放",
          "link": "/html-html-videos"
        },
        {
          "text": "HTML 实例",
          "link": "/html-html-html_examples"
        },
        {
          "text": "HTML 测验",
          "link": "/html-html-html_quiz"
        },
        {
          "text": "HTML 编程实战闯关",
          "link": "/html-html-codecamp"
        },
        {
          "text": "HTML中如何键入空格",
          "link": "/html-html-space"
        },
        {
          "text": "HTML常用代码",
          "link": "/html-html-code"
        },
        {
          "text": "HTML常用标签",
          "link": "/html-html-Label"
        },
        {
          "text": "HTML模板下载",
          "link": "/html-html-template"
        },
        {
          "text": "HTML文本框样式",
          "link": "/html-html-textbox"
        },
        {
          "text": "HTML滚动条样式",
          "link": "/html-html-scrollbar"
        },
        {
          "text": "HTML版权符号写法",
          "link": "/html-html-copyright"
        },
        {
          "text": "HTML元素嵌套问题",
          "link": "/html-html-yuansuqiantao"
        },
        {
          "text": "HTML备忘单",
          "link": "/html-html-beiwangdan"
        }
      ]
    }
  ],
  "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.