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": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "示例",
      "link": "/example/markdown-examples"
    },
    {
      "text": "归档",
      "link": "/archive"
    },
    {
      "text": "记账",
      "link": "/account"
    }
  ],
  "sidebar": {
    "/blog/posts/": [
      {
        "text": "vitepress初体验",
        "link": "/blog/posts/vitepress-experience"
      }
    ],
    "/blog/vitepress/": [
      {
        "text": "vitepress之Layout用法",
        "link": "/blog/vitepress/layout"
      }
    ],
    "/example": [
      {
        "text": "api examples",
        "link": "/example/api-examples"
      },
      {
        "text": "markdown examples",
        "link": "/example/markdown-examples"
      }
    ]
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "outline": {
    "label": "本页内容",
    "level": "deep"
  },
  "darkModeSwitchLabel": "切换暗色主题",
  "sidebarMenuLabel": "侧边栏菜单",
  "notFound": {
    "title": "页面未找到",
    "quote": "但别担心，你可以从首页找到所需内容。",
    "linkText": "返回首页",
    "linkLabel": "返回首页"
  },
  "returnToTopLabel": "返回顶部",
  "search": {
    "provider": "local",
    "options": {
      "placeholder": "搜索文档",
      "translations": {
        "button": {
          "buttonText": "搜索"
        },
        "modal": {
          "displayDetails": "显示详细信息",
          "resetButtonTitle": "重置搜索",
          "backButtonTitle": "返回",
          "noResultsText": "未找到结果",
          "footer": {
            "selectText": "选择",
            "navigateText": "导航",
            "closeText": "关闭"
          }
        }
      }
    }
  },
  "socialLinks": [
    {
      "icon": {
        "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 448 512\"><title>RSS</title><path d=\"M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48s-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634c-5.214-80.05-69.243-143.92-149.123-149.123c-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425c110.546 5.974 198.997 94.536 204.964 204.964c.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038c-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432c167.83 6.025 302.21 141.191 308.205 308.205c.232 6.449-4.978 11.787-11.432 11.787z\" fill=\"currentColor\"></path></svg>"
      },
      "link": "https://blog.ddzxxc.com/feed.rss",
      "ariaLabel": "RSS"
    },
    {
      "icon": "github",
      "link": "https://github.com/itskakarotto"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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