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

{
  "logo": "/images/logo.svg",
  "siteTitle": false,
  "nav": [
    {
      "text": "お知らせ",
      "link": "/notices"
    },
    {
      "text": "お問い合わせ",
      "link": "/contact"
    }
  ],
  "sidebar": false,
  "aside": false,
  "search": {
    "provider": "local",
    "options": {
      "miniSearch": {
        "options": {}
      },
      "translations": {
        "button": {
          "buttonText": "ドキュメントを探す"
        },
        "modal": {
          "displayDetails": "詳細を表示",
          "resetButtonTitle": "リセット",
          "backButtonTitle": "戻る",
          "noResultsText": "検索結果がありません"
        }
      }
    }
  },
  "footer": {
    "message": "本サービスは個人で企画・運営しております",
    "copyright": "©️ 2026-present OPSTID All rights reserved."
  },
  "outline": {
    "label": "目次"
  },
  "docFooter": {
    "prev": false,
    "next": false
  },
  "lastUpdated": {
    "text": "最終更新日",
    "formatOptions": {
      "dateStyle": "short",
      "timeStyle": "medium"
    }
  },
  "returnToTopLabel": "一番上に戻る",
  "sidebarMenuLabel": "メニュー",
  "darkModeSwitchLabel": "テーマ",
  "lightModeSwitchTitle": "ライトモードに切り替え",
  "darkModeSwitchTitle": "ダークモードに切り替え"
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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