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": "Home",
      "link": "/"
    },
    {
      "text": "Examples",
      "link": "/markdown-examples"
    },
    {
      "text": "程序员漫画",
      "link": "/programmer-comics"
    },
    {
      "text": "人工智能",
      "items": [
        {
          "text": "技术教程",
          "link": "/artificial-intelligence/technical-tutorial/index"
        },
        {
          "text": "热点新闻",
          "link": "/artificial-intelligence/hot-news"
        }
      ]
    },
    {
      "text": "博客",
      "link": "/zh-cn/blog"
    }
  ],
  "sidebar": {
    "/": [
      {
        "text": "Examples",
        "items": [
          {
            "text": "Markdown Examples",
            "link": "/markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "/api-examples"
          }
        ]
      }
    ],
    "/programmer-comics": {
      "text": "程序员漫画",
      "link": "/programmer-comics"
    },
    "/artificial-intelligence/technical-tutorial/index": [
      {
        "text": "技术教程",
        "items": [
          {
            "text": "Google机器学习",
            "link": "/artificial-intelligence/technical-tutorial/google-machine-learning/index"
          }
        ]
      }
    ],
    "/artificial-intelligence/technical-tutorial/google-machine-learning/index": [
      {
        "text": "Google机器学习",
        "items": [
          {
            "text": "基础篇",
            "items": [
              {
                "text": "机器学习简介",
                "link": "/artificial-intelligence/technical-tutorial/google-machine-learning/introduction-to-machine-learning"
              }
            ]
          }
        ]
      }
    ]
  },
  "footer": {
    "message": "",
    "copyright": "© 2026 Geekmister 版权所有 | <a href=\"https://beian.miit.gov.cn/\" style=\"text-decoration: none;\" target=\"_blank\" rel=\"noreferrer noopener\">粤ICP备2024321281号</a>"
  },
  "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.