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

{
  "search": {
    "provider": "local"
  },
  "logo": "/logo.svg",
  "outline": "deep",
  "nav": [
    {
      "text": "业务组件",
      "link": "/components"
    },
    {
      "text": "Service",
      "link": "/service/"
    },
    {
      "text": "App",
      "link": "/markdown-examples"
    },
    {
      "text": "开发指南",
      "link": "/guide/"
    },
    {
      "text": "常见问题",
      "link": "/guide/qa"
    },
    {
      "text": "0.1.12",
      "items": [
        {
          "text": "Changelog",
          "link": "/CHANGELOG"
        },
        {
          "text": "Summary",
          "link": "/pnpm-publish-summary"
        }
      ]
    }
  ],
  "sidebar": [
    {
      "text": "Components",
      "link": "/components",
      "items": [
        {
          "text": "fui",
          "link": "/fui/",
          "items": [
            {
              "text": "AdvancedTable 配置化表格",
              "link": "/fui/advanced-table/"
            },
            {
              "text": "AdvancedForm 配置化表单",
              "link": "/fui/advanced-form/"
            },
            {
              "text": "SearchForm 配置化搜索",
              "link": "/fui/search-form/"
            },
            {
              "text": "RemoteSelect 远程下拉",
              "link": "/fui/remote-select/"
            },
            {
              "text": "UserSelect 人员选择",
              "link": "/fui/user-select/"
            },
            {
              "text": "FileInput 上传组件",
              "link": "/fui/file-input/"
            },
            {
              "text": "Page 函数式页面/弹窗",
              "link": "/fui/page/"
            },
            {
              "text": "OperatBtns 表格操作按钮",
              "link": "/fui/operat-btns/"
            },
            {
              "text": "BreadCrumbTab 特殊标签面包屑",
              "link": "/fui/bread-crumb-tab/"
            }
          ]
        },
        {
          "text": "mui",
          "link": "/mui/"
        }
      ]
    },
    {
      "text": "Service",
      "link": "/service/",
      "items": [
        {
          "text": "passport",
          "link": "/service/passport"
        },
        {
          "text": "interceptor",
          "link": "/service/interceptor"
        },
        {
          "text": "feedback",
          "link": "/service/feedback"
        }
      ]
    },
    {
      "text": "Directives",
      "link": "/directives/",
      "items": [
        {
          "text": "v-loading",
          "link": "/directives/loading"
        },
        {
          "text": "v-permission",
          "link": "/directives/permission"
        }
      ]
    },
    {
      "text": "Utils",
      "items": [
        {
          "text": "http",
          "link": "/utils/http"
        },
        {
          "text": "hooks",
          "link": "/utils/hooks"
        },
        {
          "text": "locale",
          "link": "/utils/locale"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://gitlab.fs.com:31549/SystemRDCenter/basic/fs-web-library"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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