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": "Mission",
      "link": "/mission"
    },
    {
      "text": "My WorkSpace",
      "link": "https://vscb.le1e.com/?workspace=/mnt/d/Projects/wsl-github-gitee.code-workspace"
    },
    {
      "text": "NAS",
      "link": "https://ainas.le1e.com"
    },
    {
      "text": "ServerCenter",
      "link": "https://ako.le1e.com"
    },
    {
      "text": "BuildPages",
      "link": "https://dash.cloudflare.com/767266c91ee25c5af1e2e10c55626f53/pages/view/le1e"
    },
    {
      "text": "DotNet",
      "link": "https://learn.microsoft.com/zh-cn/dotnet/csharp/?WT.mc_id=dotnet-35129-website"
    }
  ],
  "sidebar": [
    {
      "text": "Articles",
      "items": [
        {
          "text": "Inspection System",
          "link": "/articles/inspection-system/AOI-AF.md"
        },
        {
          "text": "Yiled Management System",
          "link": "/articles/yms/ivy.md"
        },
        {
          "text": "AIG",
          "link": "/articles/AIG/2024-12-19.md"
        }
      ]
    },
    {
      "text": "Examples",
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/markdown-examples"
        },
        {
          "text": "Runtime API Examples",
          "link": "/api-examples"
        }
      ]
    },
    {
      "text": "AIG",
      "collapsed": true,
      "items": [
        {
          "text": "每天一问",
          "link": "/articles/AIG/index.md"
        },
        {
          "text": "README",
          "link": "/articles/AIG/README.md"
        },
        {
          "text": "MongoDB技术栈分析",
          "link": "/articles/AIG/MongoDB-Tec.md"
        },
        {
          "text": "自动光学系统会议交流稿",
          "link": "/articles/AIG/自动光学系统会议交流稿.md"
        },
        {
          "text": "抬头三位",
          "link": "/articles/AIG/抬头三位/软件项目经理的定位.md"
        }
      ]
    },
    {
      "text": "Notes",
      "collapsed": false,
      "items": [
        {
          "text": "note",
          "link": "/articles/note"
        },
        {
          "text": "System Managenet",
          "link": "/articles/系统管理/论努力和系统管理.md"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/robyle"
    }
  ]
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md",
  "lastUpdated": 1764914580000
}

Page Frontmatter

{
  "outline": "deep"
}

More

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