Skip to content

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": "产品介绍",
            "link": "/products/inspect"
          },
          {
            "text": "在线演示",
            "link": "/products/inspect#demo"
          },
          {
            "text": "客户案例",
            "link": "/products/inspect#customer-cases"
          },
          {
            "text": "解决方案",
            "link": "/products/inspect#pricing"
          }
        ]
      },
      {
        "text": "产品介绍",
        "items": [
          {
            "text": "金鹿.企业管理系统 (ERP)",
            "link": "/products/erp"
          },
          {
            "text": "金鹿.仓储管理系统 (WMS)",
            "link": "/products/wms"
          },
          {
            "text": "金鹿.制造执行系统 (MES)",
            "link": "/products/mes"
          },
          {
            "text": "金鹿.智巡检系统",
            "link": "/products/inspect"
          },
          {
            "text": "金鹿.运输管理系统 (TMS)",
            "link": "/products/tms"
          },
          {
            "text": "金鹿.物联网平台 (IoT)",
            "link": "/products/iot"
          },
          {
            "text": "金鹿.客户关系管理 (CRM)",
            "link": "/products/crm"
          }
        ]
      },
      {
        "text": "解决方案",
        "items": [
          {
            "text": "售后服务解决方案",
            "link": "/solutions/after-sales-service"
          },
          {
            "text": "农产品营销解决方案",
            "link": "/solutions/agricultural-marketing"
          },
          {
            "text": "连锁行业解决方案",
            "link": "/solutions/chain"
          },
          {
            "text": "电力巡检解决方案",
            "link": "/solutions/electric"
          },
          {
            "text": "设备点检解决方案",
            "link": "/solutions/equipment-inspection"
          },
          {
            "text": "快消品行业解决方案",
            "link": "/solutions/fast-moving-consumer-goods"
          },
          {
            "text": "林业防护解决方案",
            "link": "/solutions/forest-protection"
          },
          {
            "text": "警务巡逻解决方案",
            "link": "/solutions/police-patrol"
          },
          {
            "text": "水质监测解决方案",
            "link": "/solutions/water-quality-monitoring"
          }
        ]
      },
      {
        "text": "智能硬件",
        "items": [
          {
            "text": "定位追踪系列",
            "link": "/products/device/e-bike-location"
          },
          {
            "text": "车载终端系列",
            "link": "/products/device/obd"
          },
          {
            "text": "传感监测系列",
            "link": "/products/device/temperature-sensor"
          },
          {
            "text": "智能穿戴系列",
            "link": "/products/device/electronic-badge"
          }
        ]
      },
      {
        "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": "产品介绍",
          "link": "/products/inspect"
        },
        {
          "text": "在线演示",
          "link": "/products/inspect#demo"
        },
        {
          "text": "客户案例",
          "link": "/products/inspect#customer-cases"
        },
        {
          "text": "解决方案",
          "link": "/products/inspect#pricing"
        }
      ]
    },
    {
      "text": "产品介绍",
      "items": [
        {
          "text": "金鹿.企业管理系统 (ERP)",
          "link": "/products/erp"
        },
        {
          "text": "金鹿.仓储管理系统 (WMS)",
          "link": "/products/wms"
        },
        {
          "text": "金鹿.制造执行系统 (MES)",
          "link": "/products/mes"
        },
        {
          "text": "金鹿.智巡检系统",
          "link": "/products/inspect"
        },
        {
          "text": "金鹿.运输管理系统 (TMS)",
          "link": "/products/tms"
        },
        {
          "text": "金鹿.物联网平台 (IoT)",
          "link": "/products/iot"
        },
        {
          "text": "金鹿.客户关系管理 (CRM)",
          "link": "/products/crm"
        }
      ]
    },
    {
      "text": "解决方案",
      "items": [
        {
          "text": "售后服务解决方案",
          "link": "/solutions/after-sales-service"
        },
        {
          "text": "农产品营销解决方案",
          "link": "/solutions/agricultural-marketing"
        },
        {
          "text": "连锁行业解决方案",
          "link": "/solutions/chain"
        },
        {
          "text": "电力巡检解决方案",
          "link": "/solutions/electric"
        },
        {
          "text": "设备点检解决方案",
          "link": "/solutions/equipment-inspection"
        },
        {
          "text": "快消品行业解决方案",
          "link": "/solutions/fast-moving-consumer-goods"
        },
        {
          "text": "林业防护解决方案",
          "link": "/solutions/forest-protection"
        },
        {
          "text": "警务巡逻解决方案",
          "link": "/solutions/police-patrol"
        },
        {
          "text": "水质监测解决方案",
          "link": "/solutions/water-quality-monitoring"
        }
      ]
    },
    {
      "text": "智能硬件",
      "items": [
        {
          "text": "定位追踪系列",
          "link": "/products/device/e-bike-location"
        },
        {
          "text": "车载终端系列",
          "link": "/products/device/obd"
        },
        {
          "text": "传感监测系列",
          "link": "/products/device/temperature-sensor"
        },
        {
          "text": "智能穿戴系列",
          "link": "/products/device/electronic-badge"
        }
      ]
    },
    {
      "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:

js
<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.

专注于为企业提供智能化解决方案