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

{
  "lastUpdated": true,
  "darkModeSwitchLabel": "深色模式",
  "notFound": {
    "title": "神经连接异常：未找到目标资源",
    "quote": "但如果你不改变方向，继续寻找，你可能会最终走到你想要的方向。",
    "link": "/",
    "linkText": "回到起点",
    "linkLabel": "回到起点"
  },
  "nav": [
    {
      "text": "洛羽存储",
      "link": "/you+/"
    },
    {
      "text": "查看工单",
      "link": "/support/tickets/"
    }
  ],
  "sidebar": [
    {}
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/RAINCRAT/layo.vite"
    }
  ],
  "search": {
    "provider": "local",
    "options": {}
  },
  "blog": {
    "title": "LAYOSERVE泠域存储",
    "description": "RAINCRAT雨绘巷·LAYOSERVE泠域存储",
    "path": "/blogs",
    "postsPath": "blogs/posts",
    "authorsPath": "blogs/authors",
    "tagsPath": "/blogs/tags",
    "defaultAuthor": "LAYOSERVE",
    "categoryIcons": {
      "article": "i-[carbon--notebook]",
      "tutorial": "i-[carbon--book]",
      "document": "i-[carbon--document]"
    },
    "tagIcons": {
      "github": "i-[carbon--logo-github]",
      "vue": "i-[logos--vue]",
      "javascript": "i-[logos--javascript]",
      "web development": "i-[carbon--development]",
      "html": "i-[logos--html-5]",
      "git": "i-[logos--git-icon]",
      "vite": "i-[logos--vitejs]",
      "locked": "i-[carbon--locked]",
      "react": "i-[logos--react]",
      "blog": "i-[carbon--blog]",
      "comment": "i-[carbon--add-comment]"
    },
    "dateConfig": {
      "format": "yyyy/MM/dd",
      "locale": {
        "code": "zh-CN",
        "formatLong": {},
        "localize": {},
        "match": {},
        "options": {
          "weekStartsOn": 1,
          "firstWeekContainsDate": 4
        }
      }
    }
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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