Skip to content

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:

md
<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": "HelloGithub",
      "link": "/HelloGitHub100.html"
    },
    {
      "text": "Home",
      "link": "/HelloGitHub100"
    }
  ],
  "sidebar": [
    {
      "text": "HelloGithub",
      "items": [
        {
          "text": "01",
          "link": "/HelloGitHub01"
        },
        {
          "text": "02",
          "link": "/HelloGitHub02"
        },
        {
          "text": "03",
          "link": "/HelloGitHub03"
        },
        {
          "text": "04",
          "link": "/HelloGitHub04"
        },
        {
          "text": "05",
          "link": "/HelloGitHub05"
        },
        {
          "text": "06",
          "link": "/HelloGitHub06"
        },
        {
          "text": "07",
          "link": "/HelloGitHub07"
        },
        {
          "text": "08",
          "link": "/HelloGitHub08"
        },
        {
          "text": "09",
          "link": "/HelloGitHub09"
        },
        {
          "text": "10",
          "link": "/HelloGitHub10"
        },
        {
          "text": "100",
          "link": "/HelloGitHub100"
        },
        {
          "text": "101",
          "link": "/HelloGitHub101"
        },
        {
          "text": "11",
          "link": "/HelloGitHub11"
        },
        {
          "text": "12",
          "link": "/HelloGitHub12"
        },
        {
          "text": "13",
          "link": "/HelloGitHub13"
        },
        {
          "text": "14",
          "link": "/HelloGitHub14"
        },
        {
          "text": "15",
          "link": "/HelloGitHub15"
        },
        {
          "text": "16",
          "link": "/HelloGitHub16"
        },
        {
          "text": "17",
          "link": "/HelloGitHub17"
        },
        {
          "text": "18",
          "link": "/HelloGitHub18"
        },
        {
          "text": "19",
          "link": "/HelloGitHub19"
        },
        {
          "text": "20",
          "link": "/HelloGitHub20"
        },
        {
          "text": "21",
          "link": "/HelloGitHub21"
        },
        {
          "text": "22",
          "link": "/HelloGitHub22"
        },
        {
          "text": "23",
          "link": "/HelloGitHub23"
        },
        {
          "text": "24",
          "link": "/HelloGitHub24"
        },
        {
          "text": "25",
          "link": "/HelloGitHub25"
        },
        {
          "text": "26",
          "link": "/HelloGitHub26"
        },
        {
          "text": "27",
          "link": "/HelloGitHub27"
        },
        {
          "text": "28",
          "link": "/HelloGitHub28"
        },
        {
          "text": "29",
          "link": "/HelloGitHub29"
        },
        {
          "text": "30",
          "link": "/HelloGitHub30"
        },
        {
          "text": "31",
          "link": "/HelloGitHub31"
        },
        {
          "text": "32",
          "link": "/HelloGitHub32"
        },
        {
          "text": "33",
          "link": "/HelloGitHub33"
        },
        {
          "text": "34",
          "link": "/HelloGitHub34"
        },
        {
          "text": "35",
          "link": "/HelloGitHub35"
        },
        {
          "text": "36",
          "link": "/HelloGitHub36"
        },
        {
          "text": "37",
          "link": "/HelloGitHub37"
        },
        {
          "text": "38",
          "link": "/HelloGitHub38"
        },
        {
          "text": "39",
          "link": "/HelloGitHub39"
        },
        {
          "text": "40",
          "link": "/HelloGitHub40"
        },
        {
          "text": "41",
          "link": "/HelloGitHub41"
        },
        {
          "text": "42",
          "link": "/HelloGitHub42"
        },
        {
          "text": "43",
          "link": "/HelloGitHub43"
        },
        {
          "text": "44",
          "link": "/HelloGitHub44"
        },
        {
          "text": "45",
          "link": "/HelloGitHub45"
        },
        {
          "text": "46",
          "link": "/HelloGitHub46"
        },
        {
          "text": "47",
          "link": "/HelloGitHub47"
        },
        {
          "text": "48",
          "link": "/HelloGitHub48"
        },
        {
          "text": "49",
          "link": "/HelloGitHub49"
        },
        {
          "text": "50",
          "link": "/HelloGitHub50"
        },
        {
          "text": "51",
          "link": "/HelloGitHub51"
        },
        {
          "text": "52",
          "link": "/HelloGitHub52"
        },
        {
          "text": "53",
          "link": "/HelloGitHub53"
        },
        {
          "text": "54",
          "link": "/HelloGitHub54"
        },
        {
          "text": "55",
          "link": "/HelloGitHub55"
        },
        {
          "text": "56",
          "link": "/HelloGitHub56"
        },
        {
          "text": "57",
          "link": "/HelloGitHub57"
        },
        {
          "text": "58",
          "link": "/HelloGitHub58"
        },
        {
          "text": "59",
          "link": "/HelloGitHub59"
        },
        {
          "text": "60",
          "link": "/HelloGitHub60"
        },
        {
          "text": "61",
          "link": "/HelloGitHub61"
        },
        {
          "text": "62",
          "link": "/HelloGitHub62"
        },
        {
          "text": "63",
          "link": "/HelloGitHub63"
        },
        {
          "text": "64",
          "link": "/HelloGitHub64"
        },
        {
          "text": "65",
          "link": "/HelloGitHub65"
        },
        {
          "text": "66",
          "link": "/HelloGitHub66"
        },
        {
          "text": "67",
          "link": "/HelloGitHub67"
        },
        {
          "text": "68",
          "link": "/HelloGitHub68"
        },
        {
          "text": "69",
          "link": "/HelloGitHub69"
        },
        {
          "text": "70",
          "link": "/HelloGitHub70"
        },
        {
          "text": "71",
          "link": "/HelloGitHub71"
        },
        {
          "text": "72",
          "link": "/HelloGitHub72"
        },
        {
          "text": "73",
          "link": "/HelloGitHub73"
        },
        {
          "text": "74",
          "link": "/HelloGitHub74"
        },
        {
          "text": "75",
          "link": "/HelloGitHub75"
        },
        {
          "text": "76",
          "link": "/HelloGitHub76"
        },
        {
          "text": "77",
          "link": "/HelloGitHub77"
        },
        {
          "text": "78",
          "link": "/HelloGitHub78"
        },
        {
          "text": "79",
          "link": "/HelloGitHub79"
        },
        {
          "text": "80",
          "link": "/HelloGitHub80"
        },
        {
          "text": "81",
          "link": "/HelloGitHub81"
        },
        {
          "text": "82",
          "link": "/HelloGitHub82"
        },
        {
          "text": "83",
          "link": "/HelloGitHub83"
        },
        {
          "text": "84",
          "link": "/HelloGitHub84"
        },
        {
          "text": "85",
          "link": "/HelloGitHub85"
        },
        {
          "text": "86",
          "link": "/HelloGitHub86"
        },
        {
          "text": "87",
          "link": "/HelloGitHub87"
        },
        {
          "text": "88",
          "link": "/HelloGitHub88"
        },
        {
          "text": "89",
          "link": "/HelloGitHub89"
        },
        {
          "text": "90",
          "link": "/HelloGitHub90"
        },
        {
          "text": "91",
          "link": "/HelloGitHub91"
        },
        {
          "text": "92",
          "link": "/HelloGitHub92"
        },
        {
          "text": "93",
          "link": "/HelloGitHub93"
        },
        {
          "text": "94",
          "link": "/HelloGitHub94"
        },
        {
          "text": "95",
          "link": "/HelloGitHub95"
        },
        {
          "text": "96",
          "link": "/HelloGitHub96"
        },
        {
          "text": "97",
          "link": "/HelloGitHub97"
        },
        {
          "text": "98",
          "link": "/HelloGitHub98"
        },
        {
          "text": "99",
          "link": "/HelloGitHub99"
        },
        {
          "text": "api-examples",
          "link": "/api-examples"
        },
        {
          "text": "bookmark",
          "link": "/bookmark"
        },
        {
          "text": "contributors",
          "link": "/contributors"
        },
        {
          "text": "index",
          "link": "/index"
        },
        {
          "text": "markdown-examples",
          "link": "/markdown-examples"
        }
      ]
    },
    {
      "text": "Examples",
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/markdown-examples"
        },
        {
          "text": "Runtime API Examples",
          "link": "/api-examples"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "search": {
    "provider": "local"
  }
}

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.