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": "スマートフォンだけでClaude Codeを動かす",
          "link": "/AI/Claude_Code_Termux"
        },
        {
          "text": "GitHub MCP ServerとGitHub Copilot Agentを使ってみる",
          "link": "/AI/GitHub_MCP_Server"
        },
        {
          "text": "Claude Code Actionsでsub issue作成を依頼すると「GitHub issue作成用のBashツールへのアクセス権限がないため、直接的なissue作成はできません」と言われる",
          "link": "/AI/ask_claude_code_actions_create_sub_issue"
        },
        {
          "text": "Deep Reseachの結果からスライドを作成する方法",
          "link": "/AI/deep_research_slide"
        },
        {
          "text": "NotebookLMを使ってブログを作成してみる",
          "link": "/AI/devin"
        },
        {
          "text": "Buzzのインストール方法",
          "link": "/AI/install_buzz"
        }
      ],
      "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": "Tools",
      "items": [
        {
          "text": "OneDriveの同期ができないファイル",
          "link": "/Tools/OneDrive_not_sync"
        },
        {
          "text": "OneNote(business)の内容をマークダウンファイルに変換できるか",
          "link": "/Tools/OneNote2md"
        },
        {
          "text": "OneNoteからのインポート",
          "link": "/Tools/import_OneNote"
        },
        {
          "text": "Obsidianのインストール",
          "link": "/Tools/install_obsidian"
        },
        {
          "text": "Obsidianにpandocプラグインを入れる",
          "link": "/Tools/obsidian_pandoc"
        },
        {
          "text": "Obsidianでのデータ同期",
          "link": "/Tools/sync_obsidian"
        }
      ],
      "collapsed": false
    },
    {
      "text": "UNIX",
      "items": [
        {
          "text": "WSL2からWindowsのOneDrive上のファイルにアクセスする方法",
          "link": "/UNIX/WSL2_OneDrive"
        },
        {
          "text": "ドメインのネームサーバーを知る方法",
          "link": "/UNIX/inquire_name_server"
        },
        {
          "text": "AWS Linux 2023で新しいバージョンのPythonを使う方法",
          "link": "/UNIX/python_AWS_Linux"
        },
        {
          "text": "uvを使ってPlaywrightのPython開発環境を構築する方法",
          "link": "/UNIX/uv_playwright"
        }
      ],
      "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.