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

{
  "siteTitle": "MoMalls",
  "aside": true,
  "logo": {
    "light": "./logo-light.svg",
    "dark": "./logo-dark.svg",
    "alt": "MoMalls Logo "
  },
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "前端",
      "link": "/front/365DailyCard"
    },
    {
      "text": "设计",
      "link": "/design/2024/works"
    },
    {
      "text": "AI",
      "link": "/ai/works"
    },
    {
      "text": "更新动态",
      "link": "/changelog"
    },
    {
      "text": "联系",
      "link": "/team"
    }
  ],
  "sidebar": {
    "/front/": [
      {
        "text": "365DailyCard",
        "link": "/front/365DailyCard"
      },
      {
        "text": "小粉盒",
        "link": "/front/pinkbox"
      },
      {
        "text": "css高阶技巧特效",
        "items": [
          {
            "items": [
              {
                "text": "阴影特效",
                "link": "/front/css"
              },
              {
                "text": "背景特效",
                "link": "/front/background"
              },
              {
                "text": "文字特效",
                "link": "/front/text"
              }
            ]
          }
        ]
      }
    ],
    "/design/": [
      {
        "link": "/design/2024/works",
        "items": [
          {
            "text": "作品集",
            "link": "/design/2024/works",
            "items": [
              {
                "text": "2024",
                "link": "/design/2024/works"
              },
              {
                "text": "2025",
                "link": "/design/2025/works"
              }
            ]
          },
          {
            "text": "每日练习（开放源文件）",
            "link": "/design/2025/dailyPractice",
            "items": [
              {
                "text": "2025",
                "link": "/design/2025/dailyPractice"
              }
            ]
          }
        ]
      }
    ],
    "/ai/": [
      {
        "text": "AI 绘画",
        "items": [
          {
            "items": [
              {
                "text": "作品集",
                "link": "/ai/works"
              }
            ]
          }
        ]
      },
      {
        "text": "AI 工程",
        "items": [
          {
            "items": [
              {
                "text": "本地模型",
                "link": "/ai/localLLM"
              }
            ]
          }
        ]
      }
    ],
    "newArt": [
      {
        "text": "AI绘图",
        "link": "/AI/share",
        "items": [
          {
            "text": "Electron打包问题",
            "link": "/front/electron/index",
            "items": [
              {
                "text": "11Electron打包问题",
                "link": "/front/electron"
              },
              {
                "text": "11Electron打包问题",
                "link": "/front/electron"
              },
              {
                "text": "11Electron打包问题",
                "link": "/front/electron"
              }
            ]
          },
          {
            "text": "nodejs 与命令行的交互",
            "link": "/front/terminal"
          }
        ]
      }
    ],
    "notes": [
      {
        "text": "AI绘图",
        "link": "/notes/share",
        "items": [
          {
            "text": "Electron打包问题",
            "link": "/front/electron/index",
            "items": [
              {
                "text": "11Electron打包问题",
                "link": "/front/electron"
              },
              {
                "text": "11Electron打包问题",
                "link": "/front/electron"
              },
              {
                "text": "11Electron打包问题",
                "link": "/front/electron"
              }
            ]
          },
          {
            "text": "nodejs 与命令行的交互",
            "link": "/front/terminal"
          }
        ]
      }
    ]
  },
  "search": {
    "provider": "algolia",
    "options": {
      "appId": "PI1SRSI1DX",
      "apiKey": "28c0c4504bde76c5589663da41c26793",
      "indexName": "momalls"
    }
  },
  "socialLinks": [],
  "footer": {
    "message": "",
    "copyright": "MIT License ｜ Copyright © 鄂ICP备2024048751号 ｜ 邮箱: [email protected]"
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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