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": {
    "src": "/vitepress-logo-mini.svg",
    "width": 24,
    "height": 24
  },
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "About",
      "link": "/markdown/about",
      "activeMatch": "/markdown/"
    },
    {
      "text": "Design",
      "link": "/markdown/design"
    },
    {
      "text": "1.0.0-rc.31",
      "items": [
        {
          "text": "Changelog",
          "link": "https://github.com/iszmxw/travel-project/commits/main/"
        }
      ]
    }
  ],
  "sidebar": [
    {
      "text": "披荆斩棘",
      "items": [
        {
          "text": "Let's go",
          "link": "/markdown/index"
        },
        {
          "text": "1.1开发环境准备",
          "link": "/markdown/day/1.1开发环境准备.md"
        },
        {
          "text": "1.2使用vite初始化项目",
          "link": "/markdown/day/1.2使用vite初始化项目.md"
        },
        {
          "text": "1.3vant组件库的安装步骤",
          "link": "/markdown/day/1.3vant组件库的安装步骤.md"
        },
        {
          "text": "1.4vant组件库中使用field组件",
          "link": "/markdown/day/1.4vant组件库中使用field组件.md"
        },
        {
          "text": "1.5使用rem适配",
          "link": "/markdown/day/1.5使用rem适配.md"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/iszmxw/travel-project"
    }
  ],
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2019-present Evan You"
  },
  "lastUpdated": "最近更新时间 "
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "markdown/about.md",
  "filePath": "markdown/about.md",
  "lastUpdated": 1713257273000
}

Page Frontmatter

{
  "outline": "deep"
}

More

Check out the documentation for the full list of runtime APIs.