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

{
  "logo": {
    "src": "/logo.png",
    "width": 24,
    "height": 24
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "search": {
    "provider": "algolia",
    "options": {
      "appId": "8J64VVRP8K",
      "apiKey": "a18e2f4cc5665f6602c5631fd868adfd",
      "indexName": "vitepress",
      "locales": {
        "zh": {
          "placeholder": "搜索文档",
          "translations": {
            "button": {
              "buttonText": "搜索文档",
              "buttonAriaLabel": "搜索文档"
            },
            "modal": {
              "searchBox": {
                "resetButtonTitle": "清除查询条件",
                "resetButtonAriaLabel": "清除查询条件",
                "cancelButtonText": "取消",
                "cancelButtonAriaLabel": "取消"
              },
              "startScreen": {
                "recentSearchesTitle": "搜索历史",
                "noRecentSearchesText": "没有搜索历史",
                "saveRecentSearchButtonTitle": "保存至搜索历史",
                "removeRecentSearchButtonTitle": "从搜索历史中移除",
                "favoriteSearchesTitle": "收藏",
                "removeFavoriteSearchButtonTitle": "从收藏中移除"
              },
              "errorScreen": {
                "titleText": "无法获取结果",
                "helpText": "你可能需要检查你的网络连接"
              },
              "footer": {
                "selectText": "选择",
                "navigateText": "切换",
                "closeText": "关闭",
                "searchByText": "搜索提供者"
              },
              "noResultsScreen": {
                "noResultsText": "无法找到相关结果",
                "suggestedQueryText": "你可以尝试查询",
                "reportMissingResultsText": "你认为该查询应该有结果?",
                "reportMissingResultsLinkText": "点击反馈"
              }
            }
          }
        }
      }
    }
  },
  "nav": [
    {
      "text": "技术",
      "link": "/technology/api-examples",
      "activeMatch": "/technology/"
    },
    {
      "text": "AI",
      "link": "/ai/api-examples",
      "activeMatch": "/ai/"
    },
    {
      "text": "软件编程",
      "link": "/code/api-examples",
      "activeMatch": "/code/"
    },
    {
      "text": "开源",
      "link": "/open/api-examples",
      "activeMatch": "/open/"
    }
  ],
  "sidebar": {
    "/technology/": {
      "base": "/technology/",
      "items": [
        {
          "text": "简介",
          "collapsed": false,
          "items": [
            {
              "text": "什么是 VitePress?",
              "link": "what-is-vitepress"
            },
            {
              "text": "快速开始",
              "link": "getting-started"
            },
            {
              "text": "路由",
              "link": "routing"
            },
            {
              "text": "部署",
              "link": "deploy"
            }
          ]
        }
      ]
    },
    "/ai/": {
      "base": "/ai/",
      "items": [
        {
          "text": "参考",
          "items": [
            {
              "text": "站点配置",
              "link": "site-config"
            },
            {
              "text": "frontmatter 配置",
              "link": "frontmatter-config"
            },
            {
              "text": "运行时 API",
              "link": "runtime-api"
            },
            {
              "text": "CLI",
              "link": "cli"
            },
            {
              "text": "默认主题",
              "base": "/zh/reference/default-theme-",
              "items": [
                {
                  "text": "概览",
                  "link": "config"
                },
                {
                  "text": "导航栏",
                  "link": "nav"
                },
                {
                  "text": "侧边栏",
                  "link": "sidebar"
                },
                {
                  "text": "主页",
                  "link": "home-page"
                },
                {
                  "text": "页脚",
                  "link": "footer"
                },
                {
                  "text": "布局",
                  "link": "layout"
                },
                {
                  "text": "徽章",
                  "link": "badge"
                },
                {
                  "text": "团队页",
                  "link": "team-page"
                },
                {
                  "text": "上下页链接",
                  "link": "prev-next-links"
                },
                {
                  "text": "编辑链接",
                  "link": "edit-link"
                },
                {
                  "text": "最后更新时间戳",
                  "link": "last-updated"
                },
                {
                  "text": "搜索",
                  "link": "search"
                },
                {
                  "text": "Carbon Ads",
                  "link": "carbon-ads"
                }
              ]
            }
          ]
        }
      ]
    },
    "/code/": {
      "base": "/code/",
      "items": [
        {
          "text": "参考",
          "items": [
            {
              "text": "站点配置",
              "link": "site-config"
            },
            {
              "text": "frontmatter 配置",
              "link": "frontmatter-config"
            },
            {
              "text": "运行时 API",
              "link": "runtime-api"
            },
            {
              "text": "CLI",
              "link": "cli"
            },
            {
              "text": "默认主题",
              "base": "/zh/reference/default-theme-",
              "items": [
                {
                  "text": "概览",
                  "link": "config"
                },
                {
                  "text": "导航栏",
                  "link": "nav"
                },
                {
                  "text": "侧边栏",
                  "link": "sidebar"
                },
                {
                  "text": "主页",
                  "link": "home-page"
                },
                {
                  "text": "页脚",
                  "link": "footer"
                },
                {
                  "text": "布局",
                  "link": "layout"
                },
                {
                  "text": "徽章",
                  "link": "badge"
                },
                {
                  "text": "团队页",
                  "link": "team-page"
                },
                {
                  "text": "上下页链接",
                  "link": "prev-next-links"
                },
                {
                  "text": "编辑链接",
                  "link": "edit-link"
                },
                {
                  "text": "最后更新时间戳",
                  "link": "last-updated"
                },
                {
                  "text": "搜索",
                  "link": "search"
                },
                {
                  "text": "Carbon Ads",
                  "link": "carbon-ads"
                }
              ]
            }
          ]
        }
      ]
    },
    "/open/": {
      "base": "/open/",
      "items": [
        {
          "text": "参考",
          "items": [
            {
              "text": "站点配置",
              "link": "site-config"
            },
            {
              "text": "frontmatter 配置",
              "link": "frontmatter-config"
            },
            {
              "text": "运行时 API",
              "link": "runtime-api"
            },
            {
              "text": "CLI",
              "link": "cli"
            },
            {
              "text": "默认主题",
              "base": "/zh/reference/default-theme-",
              "items": [
                {
                  "text": "概览",
                  "link": "config"
                },
                {
                  "text": "导航栏",
                  "link": "nav"
                },
                {
                  "text": "侧边栏",
                  "link": "sidebar"
                },
                {
                  "text": "主页",
                  "link": "home-page"
                },
                {
                  "text": "页脚",
                  "link": "footer"
                },
                {
                  "text": "布局",
                  "link": "layout"
                },
                {
                  "text": "徽章",
                  "link": "badge"
                },
                {
                  "text": "团队页",
                  "link": "team-page"
                },
                {
                  "text": "上下页链接",
                  "link": "prev-next-links"
                },
                {
                  "text": "编辑链接",
                  "link": "edit-link"
                },
                {
                  "text": "最后更新时间戳",
                  "link": "last-updated"
                },
                {
                  "text": "搜索",
                  "link": "search"
                },
                {
                  "text": "Carbon Ads",
                  "link": "carbon-ads"
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "editLink": {
    "pattern": "https://github.com/vuejs/vitepress/edit/main/docs/:path",
    "text": "在 GitHub 上编辑此页面"
  },
  "footer": {
    "message": "",
    "copyright": "版权所有 © 2024-2024 包龙星"
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "outline": {
    "label": "页面导航"
  },
  "lastUpdated": {
    "text": "最后更新于",
    "formatOptions": {
      "dateStyle": "short",
      "timeStyle": "medium"
    }
  },
  "langMenuLabel": "多语言",
  "returnToTopLabel": "回到顶部",
  "sidebarMenuLabel": "菜单",
  "darkModeSwitchLabel": "主题",
  "lightModeSwitchTitle": "切换到浅色模式",
  "darkModeSwitchTitle": "切换到深色模式"
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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