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": [],
  "sidebar": [],
  "socialLinks": [
    {
      "icon": {
        "svg": "<svg role=\"img\" t=\"1672577881896\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1932\" width=\"128\" height=\"128\"><path d=\"M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z\" p-id=\"1933\"></path></svg>"
      },
      "link": "https://gitee.com/sparkling-store"
    },
    {
      "icon": "github",
      "link": "https://github.com/Sparklingst"
    }
  ],
  "editLink": {
    "pattern": "https://gitee.com/sparkling-store/SparklingStoreV3Documents/edit/master/:path",
    "text": "在 Gitee 上编辑此页面"
  },
  "search": {
    "provider": "local",
    "options": {
      "translations": {
        "button": {
          "buttonText": "搜索"
        },
        "modal": {
          "displayDetails": "显示具详情信息",
          "resetButtonTitle": "清空内容",
          "backButtonTitle": "关闭搜索",
          "noResultsText": "未找到",
          "footer": {
            "selectText": "选择",
            "selectKeyAriaLabel": "进入",
            "navigateText": "导航",
            "navigateUpKeyAriaLabel": "向上",
            "navigateDownKeyAriaLabel": "向下",
            "closeText": "关闭",
            "closeKeyAriaLabel": "退出"
          }
        }
      }
    }
  }
}

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.