Runtime API Examples ​

This page demonstrates usage of some of the runtime APIs provided by VitePress.

useData API Example ​

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:

Site Data ​

{
  "lang": "en-US",
  "dir": "ltr",
  "title": "金鹿集团",
  "description": "金鹿集团",
  "base": "/",
  "head": [],
  "router": {
    "prefetchLinks": true
  },
  "appearance": true,
  "themeConfig": {
    "nav": [
      {
        "text": "首页",
        "link": "/",
        "activeMatch": "^/$"
      },
      {
        "text": "解决方案",
        "items": [
          {
            "text": "仓库管理系统 (WMS)",
            "link": "/products#wms-仓库管理系统"
          },
          {
            "text": "物联网数据平台 (IOT)",
            "link": "/products#iot-物联网数据平台"
          },
          {
            "text": "运输管理系统 (TMS)",
            "link": "/products#tms-运输管理系统"
          },
          {
            "text": "客户管理系统 (CRM)",
            "link": "/products#crm-客户管理系统"
          },
          {
            "text": "企业管理系统 (ERP)",
            "link": "/products#erp-企业管理系统"
          },
          {
            "text": "生产管理系统 (MES)",
            "link": "/products#mes-生产管理系统"
          }
        ]
      },
      {
        "text": "客户案例",
        "link": "/products/customer"
      },
      {
        "text": "常见问题",
        "link": "/products/qa"
      },
      {
        "text": "系统购买",
        "link": "/products/price"
      },
      {
        "text": "新闻资讯",
        "link": "/news/list"
      },
      {
        "text": "关于我们",
        "link": "/about"
      },
      {
        "text": "",
        "link": "",
        "component": "LoginButton"
      }
    ],
    "sidebar": {
      "/news/": [],
      "/": [
        {
          "text": "Examples",
          "items": [
            {
              "text": "Markdown Examples",
              "link": "/markdown-examples"
            },
            {
              "text": "Runtime API Examples",
              "link": "/api-examples"
            }
          ]
        }
      ]
    },
    "footer": {
      "message": "专注于为企业提供智能化解决方案",
      "copyright": "Copyright © 2024-present 金鹿集团，联系方式：jlujservice@126.com"
    },
    "socialLinks": [
      {
        "icon": "github",
        "link": "https://gitee.com/xfcode-source/pit.git"
      }
    ],
    "search": {
      "provider": "local"
    },
    "logo": "https://gitee.com/abocode-source/pit/raw/master/doc/images/logo.png",
    "siteTitle": "金鹿集团"
  },
  "locales": {},
  "scrollOffset": 134,
  "cleanUrls": false,
  "localeIndex": "root"
}

Theme Data ​

{
  "nav": [
    {
      "text": "首页",
      "link": "/",
      "activeMatch": "^/$"
    },
    {
      "text": "解决方案",
      "items": [
        {
          "text": "仓库管理系统 (WMS)",
          "link": "/products#wms-仓库管理系统"
        },
        {
          "text": "物联网数据平台 (IOT)",
          "link": "/products#iot-物联网数据平台"
        },
        {
          "text": "运输管理系统 (TMS)",
          "link": "/products#tms-运输管理系统"
        },
        {
          "text": "客户管理系统 (CRM)",
          "link": "/products#crm-客户管理系统"
        },
        {
          "text": "企业管理系统 (ERP)",
          "link": "/products#erp-企业管理系统"
        },
        {
          "text": "生产管理系统 (MES)",
          "link": "/products#mes-生产管理系统"
        }
      ]
    },
    {
      "text": "客户案例",
      "link": "/products/customer"
    },
    {
      "text": "常见问题",
      "link": "/products/qa"
    },
    {
      "text": "系统购买",
      "link": "/products/price"
    },
    {
      "text": "新闻资讯",
      "link": "/news/list"
    },
    {
      "text": "关于我们",
      "link": "/about"
    },
    {
      "text": "",
      "link": "",
      "component": "LoginButton"
    }
  ],
  "sidebar": {
    "/news/": [],
    "/": [
      {
        "text": "Examples",
        "items": [
          {
            "text": "Markdown Examples",
            "link": "/markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "/api-examples"
          }
        ]
      }
    ]
  },
  "footer": {
    "message": "专注于为企业提供智能化解决方案",
    "copyright": "Copyright © 2024-present 金鹿集团，联系方式：jlujservice@126.com"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://gitee.com/xfcode-source/pit.git"
    }
  ],
  "search": {
    "provider": "local"
  },
  "logo": "https://gitee.com/abocode-source/pit/raw/master/doc/images/logo.png",
  "siteTitle": "金鹿集团"
}

Page Data ​

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "layout": "page",
    "class": "api-examples"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md",
  "lastUpdated": 1734950381000
}

Page Frontmatter ​

{
  "layout": "page",
  "class": "api-examples"
}

Example Code ​

Here's the code used in this example:

<script setup>
import { useData } from 'vitepress'

const { site, theme, page, frontmatter } = useData()
</script>

<!-- Display the data -->
<pre>{{ site }}</pre>
<pre>{{ theme }}</pre>
<pre>{{ page }}</pre>
<pre>{{ frontmatter }}</pre>

More ​

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