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

{
  "logo": "/butterfly-flower.png",
  "search": {
    "provider": "local"
  },
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2025-present Weason Tang"
  },
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "cyber",
      "items": [
        {
          "text": "network基础",
          "link": "/cyber/network.md"
        },
        {
          "text": "network进阶",
          "link": "/cyber/networkpro.md"
        },
        {
          "text": "web基础",
          "link": "/cyber/web.md"
        }
      ]
    },
    {
      "text": "linux",
      "items": [
        {
          "text": "linux常用命令",
          "link": "/linux/linux命令"
        },
        {
          "text": "archlinux应用",
          "link": "/linux/archlinuxApp.md"
        },
        {
          "text": "linux shells",
          "link": "/linux/LinuxShell.md"
        }
      ]
    },
    {
      "text": "docker",
      "items": [
        {
          "text": "docker基础",
          "link": "/docker/docker基础.md"
        },
        {
          "text": "docker进阶",
          "link": "/docker/docker进阶.md"
        },
        {
          "text": "docker应用",
          "link": "/docker/dockerApp.md"
        }
      ]
    },
    {
      "text": "go",
      "items": [
        {
          "text": "go issues",
          "link": "/go/goIssues.md"
        },
        {
          "text": "go algo",
          "link": "/go/goAlgo.md"
        },
        {
          "text": "go基础",
          "link": "/go/go基础.md"
        },
        {
          "text": "go进阶",
          "link": "/go/go进阶.md"
        }
      ]
    },
    {
      "component": "MusicPlayer",
      "props": {
        "title": "MusicPlayer"
      }
    }
  ],
  "sidebar": {
    "/cyber/": [
      {
        "text": "cyber",
        "collapsed": false,
        "items": [
          {
            "text": "network",
            "link": "/cyber/network.md"
          },
          {
            "text": "networkpro",
            "link": "/cyber/networkpro.md"
          },
          {
            "text": "web",
            "link": "/cyber/web.md"
          }
        ]
      }
    ],
    "/linux/": [
      {
        "text": "linux",
        "collapsed": false,
        "items": [
          {
            "text": "linux常用命令",
            "link": "/linux/linux命令"
          },
          {
            "text": "vscode相关命令",
            "link": "/linux/vscode相关命令.md"
          },
          {
            "text": "go linux相关操作",
            "link": "/linux/golinux相关操作.md"
          },
          {
            "text": "Git相关命令操作",
            "link": "/linux/Git相关命令操作.md"
          },
          {
            "text": "archlinux应用",
            "link": "/linux/archlinuxApp.md"
          },
          {
            "text": "linux基础",
            "link": "/linux/LinuxFundamentals.md"
          },
          {
            "text": "linux shells",
            "link": "/linux/LinuxShell.md"
          }
        ]
      }
    ],
    "/docker/": [
      {
        "text": "docker",
        "collapsed": false,
        "items": [
          {
            "text": "docker基础",
            "link": "/docker/docker基础.md"
          },
          {
            "text": "docker进阶",
            "link": "/docker/docker进阶.md"
          },
          {
            "text": "docker应用",
            "link": "/docker/dockerApp.md"
          }
        ]
      }
    ],
    "/go/": [
      {
        "text": "go",
        "collapsed": false,
        "items": [
          {
            "text": "go issues",
            "link": "/go/goIssues.md"
          },
          {
            "text": "go algo",
            "link": "/go/goAlgo.md"
          },
          {
            "text": "go基础",
            "link": "/go/go基础.md"
          },
          {
            "text": "go进阶",
            "link": "/go/go进阶.md"
          }
        ]
      }
    ],
    "/windows/": [
      {
        "text": "windows",
        "collapsed": false,
        "items": [
          {
            "text": "WindowsCommand",
            "link": "windows/WindowsCommand"
          },
          {
            "text": "WindowsFundamentals",
            "link": "windows/WindowsFundamentals"
          }
        ]
      }
    ],
    "/software/": [
      {
        "text": "software",
        "collapsed": false,
        "items": [
          {
            "text": "多平台软件",
            "link": "/software/cross-platform.md"
          },
          {
            "text": "Windows 平台",
            "link": "/software/windows.md"
          },
          {
            "text": "Mac 平台",
            "link": "/software/mac.md"
          },
          {
            "text": "Android 平台",
            "link": "/software/android.md"
          },
          {
            "text": "浏览器设置与扩展",
            "link": "/software/browser.md"
          },
          {
            "text": "Visual Studio Code 配置",
            "link": "/software/vscode.md"
          }
        ]
      }
    ],
    "/tools/": [
      {
        "text": "tools",
        "items": [
          {
            "text": "🛠️ 生成器",
            "link": "/tools/generator.md"
          },
          {
            "text": "📍 Bookmarklet",
            "link": "/tools/Bookmarklet.md"
          },
          {
            "text": "🔧 在线工具",
            "link": "/tools/online-tools.md"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/Anduin2017/HowToCook"
    },
    {
      "icon": "bilibili",
      "link": "https://tv.591746.xyz/"
    },
    {
      "icon": {
        "svg": "<img src=\"/notebooklm.svg\" alt=\"Custom Icon\" style=\"width: 24px; height: 24px;\">"
      },
      "link": "https://notebooklm.google.com"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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