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": "/"
    }
  ],
  "sidebar": [
    {
      "text": "AI",
      "items": [
        {
          "text": "NotebookLMを使ってブログを作成してみる",
          "link": "/AI/devin"
        }
      ],
      "collapsed": false
    },
    {
      "text": "Git",
      "items": [
        {
          "text": "gitでデフォルトブランチ名を取得する",
          "link": "/Git/get_default_branch_name"
        },
        {
          "text": "gitのすべての履歴からキーワード検索する",
          "link": "/Git/git_grep"
        },
        {
          "text": "gh CLIを使って特定Issueの状態を確認する方法",
          "link": "/Git/issue_state_gh"
        },
        {
          "text": "Pro Git日本語版PDFの入手方法",
          "link": "/Git/pro_git"
        },
        {
          "text": "過去一週間で更新されたIssueをリストアップする",
          "link": "/Git/recent_issue"
        },
        {
          "text": "ローカルに加えた変更を元に戻す",
          "link": "/Git/undo_local_change"
        }
      ],
      "collapsed": false
    },
    {
      "text": "UNIX",
      "items": [
        {
          "text": "WSL2からWindowsのOneDrive上のファイルにアクセスする方法",
          "link": "/UNIX/WSL2_OneDrive"
        },
        {
          "text": "ドメインのネームサーバーを知る方法",
          "link": "/UNIX/inquire_name_server"
        }
      ],
      "collapsed": false
    },
    {
      "text": "VitePress",
      "items": [
        {
          "text": "背景",
          "link": "/VitePress/background"
        },
        {
          "text": "色を変更する方法",
          "link": "/VitePress/change_color"
        },
        {
          "text": "GitHub Pages + VitePress環境セットアップ",
          "link": "/VitePress/install"
        },
        {
          "text": "日本語検索対応",
          "link": "/VitePress/japanese_search"
        }
      ],
      "collapsed": false
    },
    {
      "text": "About",
      "link": "/about_me"
    },
    {
      "text": "Runtime API Examples",
      "link": "/api-examples"
    },
    {
      "text": "Markdown Extension Examples",
      "link": "/markdown-examples"
    }
  ],
  "socialLinks": [
    {
      "icon": "twitter",
      "link": "https://x.com/TriedDoingIt"
    }
  ],
  "search": {
    "provider": "local",
    "options": {
      "miniSearch": {
        "options": {}
      }
    }
  }
}

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.