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

{
  "lastUpdated": {
    "text": "最後更新",
    "formatOptions": {
      "dateStyle": "short",
      "timeStyle": "short"
    }
  },
  "logo": {
    "src": "/new_logo.webp",
    "alt": "阿俊的工程師記事本"
  },
  "nav": [
    {
      "text": "首頁",
      "link": "/"
    },
    {
      "text": "個人詳細資訊",
      "link": "/personal/about-me"
    },
    {
      "text": "工作經驗與成就",
      "link": "/experience-and-achievement/overview"
    },
    {
      "text": "其他學習足跡",
      "link": "/api-examples"
    }
  ],
  "sidebar": [
    {
      "text": "個人詳細資訊",
      "items": [
        {
          "text": "關於我",
          "link": "/personal/about-me"
        }
      ]
    },
    {
      "text": "工作經驗與成就",
      "items": [
        {
          "text": "服務公司總覽",
          "link": "/experience-and-achievement/overview"
        },
        {
          "text": "愛酷智能科技",
          "items": [
            {
              "text": "經歷介紹",
              "link": "/experience-and-achievement/Accuhit/overview"
            },
            {
              "text": "規範撰寫心得與經驗分享",
              "link": "/experience-and-achievement/Accuhit/documentation-writing-experience"
            }
          ]
        },
        {
          "text": "雲鼎數位科技",
          "items": [
            {
              "text": "經歷介紹",
              "link": "/experience-and-achievement/Topctek/overview"
            }
          ]
        }
      ]
    },
    {
      "text": "前端經驗與實作分享",
      "items": [
        {
          "text": "總覽與列表",
          "link": "/frontend-general/overview"
        },
        {
          "text": "程式碼優化與重構的衡量思路",
          "link": "/frontend-general/code-optimization-and-refactoring-evaluation-strategy"
        },
        {
          "text": "元件化(componentization)的實作經驗分享",
          "link": "/frontend-general/componentization-experience-sharing"
        },
        {
          "text": "TypeScript撰寫與型別驅動設計的實作經驗分享",
          "link": "/frontend-general/typescript-writing-and-type-driven-development-experience-sharing"
        },
        {
          "text": "SSOT相關經驗分享",
          "link": "/frontend-general/ssot-configuration-related-experience-sharing"
        },
        {
          "text": "改寫表單 CRUD 流程",
          "link": "/frontend-general/rewriting-form-crud-flow"
        }
      ]
    },
    {
      "text": "Element Plus",
      "items": [
        {
          "text": "強化表格型別提示等相關功能",
          "link": "/element-plus/enhanced-table-type-hinting-related-features"
        }
      ]
    },
    {
      "text": "其他類學習足跡",
      "items": [
        {
          "text": "總覽與列表",
          "link": "/others/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",
  "lastUpdated": 1775570232000
}

Page Frontmatter

{
  "outline": "deep"
}

More

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