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": "個人詳細資訊",
      "link": "/perosonal/about-me"
    },
    {
      "text": "工作經驗與成就",
      "link": "/experience-and-achievement/overview"
    },
    {
      "text": "其他類學習足跡",
      "link": "/api-examples"
    }
  ],
  "sidebar": [
    {
      "text": "個人詳細資訊",
      "items": [
        {
          "text": "關於我",
          "link": "/perosonal/about-me"
        }
      ]
    },
    {
      "text": "工作經驗與成就",
      "items": [
        {
          "text": "服務公司總覽",
          "link": "/experience-and-achievement/overview"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": {
        "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm0-2h10.5v-3.5H4zm12.5 0H20V9h-3.5zM4 12.5h10.5V9H4z\"/></svg>"
      },
      "link": "https://dreamos.net"
    },
    {
      "icon": "github",
      "link": "https://github.com/JEN-CHUN"
    },
    {
      "icon": "linkedin",
      "link": "https://www.linkedin.com/in/kay-jen-476829230/"
    }
  ]
}

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.