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": "/about/"
    }
  ],
  "sidebar": [
    {
      "text": "指南",
      "items": [
        {
          "text": "关于本站",
          "link": "/about"
        }
      ]
    },
    {
      "text": "常规型面试题",
      "items": [
        {
          "text": "通用",
          "link": "/outher.md"
        }
      ]
    },
    {
      "text": "基础阶段",
      "items": [
        {
          "text": "HTML",
          "link": "/html/"
        },
        {
          "text": "CSS",
          "link": "/css/"
        },
        {
          "text": "JS",
          "collapsed": true,
          "items": [
            {
              "text": "基础",
              "link": "/js/base/"
            },
            {
              "text": "中级",
              "link": "/js/mid/"
            },
            {
              "text": "高级",
              "link": "/js/pro/"
            }
          ]
        }
      ]
    },
    {
      "text": "中级阶段",
      "items": [
        {
          "text": "Vue",
          "collapsed": true,
          "items": [
            {
              "text": "基础",
              "link": "/vue/base/"
            },
            {
              "text": "中级",
              "link": "/vue/mid/"
            },
            {
              "text": "高级",
              "link": "/vue/pro/"
            }
          ]
        },
        {
          "text": "Node",
          "collapsed": true,
          "items": [
            {
              "text": "基础",
              "link": "/node/base/"
            },
            {
              "text": "框架",
              "link": "/node/mid/"
            },
            {
              "text": "实践",
              "link": "/node/pro/"
            }
          ]
        },
        {
          "text": "工程化",
          "collapsed": true,
          "items": [
            {
              "text": "基础",
              "link": "/cli/base/"
            },
            {
              "text": "高级",
              "link": "/cli/pro/"
            }
          ]
        }
      ]
    },
    {
      "text": "高级阶段",
      "items": [
        {
          "text": "构建",
          "collapsed": true,
          "items": [
            {
              "text": "esbuild",
              "link": "/build/esbuild"
            },
            {
              "text": "tsup",
              "link": "/build/tsup"
            },
            {
              "text": "rollup",
              "link": "/build/rollup"
            },
            {
              "text": "vite",
              "link": "/build/vite"
            },
            {
              "text": "webpack",
              "link": "/build/webpack"
            },
            {
              "text": "rspack",
              "link": "/build/rspack"
            }
          ]
        },
        {
          "text": "SSR",
          "collapsed": true,
          "link": "/ssr/nuxt"
        },
        {
          "text": "Node框架",
          "collapsed": true,
          "items": [
            {
              "text": "nest",
              "link": "/backEnd/nest"
            },
            {
              "text": "express",
              "link": "/backEnd/express"
            }
          ]
        },
        {
          "text": "小程序/移动端",
          "collapsed": true,
          "items": [
            {
              "text": "小程序",
              "link": "/moble/uniapp"
            },
            {
              "text": "移动端",
              "link": "/moble/h5"
            }
          ]
        },
        {
          "text": "HTTP",
          "collapsed": true,
          "link": "/http/"
        }
      ]
    },
    {
      "text": "源码篇",
      "items": [
        {
          "text": "Vue响应式原理",
          "link": "/source/reactive.md"
        },
        {
          "text": "Vue3原理",
          "link": "/source/vue3.md"
        },
        {
          "text": "Vue route原理",
          "link": "/source/vuerouter.md"
        },
        {
          "text": "pinia 原理",
          "link": "/source/pinia.md"
        },
        {
          "text": "vite 原理",
          "link": "/source/vite.md"
        }
      ]
    },
    {
      "text": "数据结构",
      "items": [
        {
          "text": "通用",
          "link": "/algo/struck.md"
        }
      ]
    },
    {
      "text": "算法",
      "items": [
        {
          "text": "常用",
          "link": "/algo/index.md"
        }
      ]
    },
    {
      "text": "人资",
      "items": [
        {
          "text": "通用",
          "link": "/hr"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

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.