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": "编程",
      "items": [
        {
          "text": "Java",
          "link": "/java"
        },
        {
          "text": "Python",
          "link": "/python"
        },
        {
          "text": "Docker",
          "link": "/docker"
        }
      ]
    }
  ],
  "sidebar": {
    "/python/python-note": [
      {
        "text": "概述",
        "link": "/python/python-note/"
      },
      {
        "text": "章节",
        "items": [
          {
            "text": "001",
            "link": "/python/python-note/001"
          },
          {
            "text": "002",
            "link": "/python/python-note/002"
          },
          {
            "text": "Jupyter 介绍文档",
            "link": "/python/python-note/Jupyter 介绍文档"
          }
        ]
      }
    ],
    "/docker": [
      {
        "text": "概述",
        "link": "/docker/"
      },
      {
        "text": "章节",
        "items": [
          {
            "text": "在 Docker Compose 中通过 .env 文件加载变量：完整指南",
            "link": "/docker/在 Docker Compose 中通过 .env 文件加载变量：完整指南"
          }
        ]
      }
    ],
    "/java/spring": [
      {
        "text": "概述",
        "link": "/java/spring/"
      },
      {
        "text": "章节",
        "items": [
          {
            "text": "Spring基础",
            "link": "/java/spring/Spring基础"
          }
        ]
      }
    ],
    "/数学/统计学": [
      {
        "text": "概述",
        "link": "/数学/统计学/"
      },
      {
        "text": "章节",
        "items": [
          {
            "text": "四分位数与四分位距：揭示数据分布的关键工具",
            "link": "/数学/统计学/四分位数与四分位距：揭示数据分布的关键工具"
          },
          {
            "text": "统计学在数据分析中的应用",
            "link": "/数学/统计学/统计学在数据分析中的应用"
          }
        ]
      }
    ]
  },
  "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.