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": "前端",
      "items": [
        {
          "text": "uniapp",
          "link": "/teach/uniapp/uniapp课程总览"
        },
        {
          "text": "vue.js",
          "link": "/teach/vue/vue课程总览"
        }
      ]
    },
    {
      "text": "个人笔记",
      "link": "/public/stage-1.html"
    },
    {
      "text": "生活随笔",
      "link": "/life"
    }
  ],
  "sidebar": {
    "/": [
      {
        "text": "Examples",
        "items": [
          {
            "text": "Markdown 示例",
            "link": "/markdown-examples"
          },
          {
            "text": "Runtime API 示例",
            "link": "/api-examples"
          }
        ]
      }
    ],
    "/teach/uniapp": [
      {
        "text": "test1",
        "link": "/teach/uniapp/uniapp课程总览"
      },
      {
        "text": "天气项目实战",
        "items": [
          {
            "text": "项目总览",
            "link": "/teach/uniapp/weatherpro/0_项目总览"
          },
          {
            "text": "阶段一：组件化",
            "link": "/teach/uniapp/weatherpro/1_阶段一_组件化"
          },
          {
            "text": "阶段二：核心服务",
            "link": "/teach/uniapp/weatherpro/2_阶段二_核心服务"
          },
          {
            "text": "阶段三：城市管理",
            "link": "/teach/uniapp/weatherpro/3_阶段三_城市管理"
          },
          {
            "text": "阶段四：优化发布",
            "link": "/teach/uniapp/weatherpro/4_阶段四_优化发布"
          }
        ]
      },
      {
        "text": "web作业",
        "items": [
          {
            "text": "web第四次作业",
            "link": "/teach/uniapp/web作业和实训/web第四次作业"
          }
        ]
      },
      {
        "text": "期末大作业",
        "link": "/teach/uniapp/web-final-project-place"
      }
    ],
    "/teach/vue": [
      {
        "text": "课程总览",
        "link": "/teach/vue/vue课程总览"
      },
      {
        "text": "vue项目实战",
        "items": [
          {
            "text": "toDoList",
            "link": "/teach/vue/vuejs的todolist项目"
          },
          {
            "text": "test02",
            "link": "/teach/vue/vue-test1"
          }
        ]
      },
      {
        "text": "期末大作业",
        "link": "/teach/vue/vuejs-final-project-place"
      }
    ]
  },
  "logo": "/logo.svg",
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/zzy1919"
    }
  ],
  "search": {
    "provider": "local",
    "options": {
      "translations": {
        "button": {
          "buttonText": "搜索文档",
          "buttonAriaLabel": "搜索文档"
        },
        "modal": {
          "noResultsText": "无法找到相关结果",
          "resetButtonTitle": "清除查询条件",
          "footer": {
            "selectText": "选择",
            "navigateText": "切换"
          }
        }
      }
    }
  },
  "outlineTitle": "文章目录",
  "outline": [
    1,
    3
  ]
}

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.