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": "/logo.png",
  "search": {
    "provider": "local"
  },
  "nav": [
    {
      "text": "前端基础",
      "items": [
        {
          "text": "React",
          "link": "/react"
        },
        {
          "text": "Vue",
          "link": "/vue"
        },
        {
          "text": "JS基础",
          "link": "/base-js"
        }
      ]
    },
    {
      "text": "前端工程化",
      "items": [
        {
          "text": "Webpack+React脚手架",
          "link": "front-eng/webpack-react"
        },
        {
          "text": "Webpack+ESlint工程配置",
          "link": "front-eng/webpack-eslint"
        },
        {
          "text": "Webpack+核心流程",
          "link": "front-eng/webpack-core"
        },
        {
          "text": "Webpack+code_Spliting",
          "link": "front-eng/webpack-codesplit"
        },
        {
          "text": "Webpack+Tree_Shaking",
          "link": "front-eng/webpack-tree_shaking"
        },
        {
          "text": "Webpack+loader基础",
          "link": "front-eng/webpack-loader"
        },
        {
          "text": "CI/CD",
          "link": "front-eng/CICD"
        },
        {
          "text": "性能优化",
          "link": "front-eng/Optimization"
        },
        {
          "text": "Vite",
          "link": "front-eng/vite-index"
        }
      ]
    },
    {
      "text": "算法",
      "items": [
        {
          "text": "链表",
          "link": "leetcode/link/index"
        },
        {
          "text": "二叉树",
          "link": "leetcode/tree/recursion"
        },
        {
          "text": "回溯",
          "link": "leetcode/backTracking/index"
        },
        {
          "text": "排序算法",
          "link": "leetcode/sort/index"
        },
        {
          "text": "滑动窗口",
          "link": "leetcode/window/index"
        }
      ]
    },
    {
      "text": "后端",
      "items": [
        {
          "text": "后端",
          "link": "back-end/index"
        },
        {
          "text": "redis",
          "link": "back-end/redis"
        },
        {
          "text": "nest文件上传",
          "link": "back-end/nest_upload"
        }
      ]
    }
  ],
  "sidebar": [
    {
      "text": "前端工程化",
      "items": [
        {
          "text": "Webpack+React脚手架",
          "link": "front-eng/webpack-react"
        },
        {
          "text": "Webpack+ESlint工程配置",
          "link": "front-eng/webpack-eslint"
        },
        {
          "text": "Webpack+核心流程",
          "link": "front-eng/webpack-core"
        },
        {
          "text": "Webpack+code_Spliting",
          "link": "front-eng/webpack-codesplit"
        },
        {
          "text": "Webpack+Tree_Shaking",
          "link": "front-eng/webpack-tree_shaking"
        },
        {
          "text": "Webpack+loader基础",
          "link": "front-eng/webpack-loader"
        },
        {
          "text": "CI/CD",
          "link": "front-eng/CICD"
        },
        {
          "text": "性能优化",
          "link": "front-eng/Optimization"
        },
        {
          "text": "Vite",
          "link": "front-eng/vite-index"
        }
      ]
    },
    {
      "text": "React",
      "items": [
        {
          "text": "开始",
          "link": "react/index"
        },
        {
          "text": "React原理",
          "link": "react/react-core"
        },
        {
          "text": "React-Fiber",
          "link": "react/fiber"
        },
        {
          "text": "Mini-React",
          "link": "react/mini-react"
        },
        {
          "text": "ReactPlayground",
          "link": "react/playground"
        },
        {
          "text": "React+KeepAlive",
          "link": "react/react-keepAlive"
        }
      ]
    },
    {
      "text": "算法",
      "items": [
        {
          "text": "链表",
          "link": "leetcode/link/index"
        },
        {
          "text": "二叉树",
          "link": "leetcode/tree/recursion"
        },
        {
          "text": "回溯",
          "link": "leetcode/backTracking/index"
        },
        {
          "text": "排序算法",
          "link": "leetcode/sort/index"
        },
        {
          "text": "滑动窗口",
          "link": "leetcode/window/index"
        }
      ]
    },
    {
      "text": "后端",
      "items": [
        {
          "text": "后端",
          "link": "back-end/index"
        },
        {
          "text": "redis",
          "link": "back-end/redis"
        },
        {
          "text": "nest文件上传",
          "link": "back-end/nest_upload"
        }
      ]
    },
    {
      "text": "跨端",
      "items": [
        {
          "text": "web-适配",
          "link": "mobile/rem.md"
        },
        {
          "text": "小程序",
          "link": "mobile/mini-app.md"
        }
      ]
    },
    {
      "text": "HTML",
      "items": [
        {
          "text": "html",
          "link": "interview/html-interview"
        }
      ]
    },
    {
      "text": "微前端",
      "items": [
        {
          "text": "微前端",
          "link": "micro-frontend/index"
        },
        {
          "text": "微前端JS隔离",
          "link": "micro-frontend/js-micro-front"
        },
        {
          "text": "微前端css隔离",
          "link": "micro-frontend/css-micro-front"
        },
        {
          "text": "微前端乾坤方案",
          "link": "micro-frontend/qiankun"
        },
        {
          "text": "微前端无界方案",
          "link": "micro-frontend/wujie"
        }
      ]
    },
    {
      "text": "浏览器原理",
      "items": [
        {
          "text": "浏览器原理",
          "link": "browser/index"
        }
      ]
    },
    {
      "text": "css",
      "items": [
        {
          "text": "CSS",
          "link": "css/index"
        }
      ]
    },
    {
      "text": "Vue",
      "items": [
        {
          "text": "Vue",
          "link": "vue/index.md"
        },
        {
          "text": "Vue3 Diff",
          "link": "vue/vue3-diff.md"
        },
        {
          "text": "Vue3 KeepAlive-LRU",
          "link": "vue/keep-lru.md"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/hxh-ly/"
    }
  ],
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2022-present axuaxu"
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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