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": "https://carto.hk/assets/carto-mark.png",
  "nav": [
    {
      "text": "主页",
      "link": "/"
    },
    {
      "text": "文档",
      "link": "/project/introduction"
    }
  ],
  "footer": {
    "message": "基于 MIT 许可发布",
    "copyright": "Copyright © 2024 Carto.HK"
  },
  "search": {
    "provider": "local",
    "options": {
      "translations": {
        "button": {
          "buttonText": "搜索",
          "buttonAriaLabel": "搜索文档"
        },
        "modal": {
          "displayDetails": "显示详细列表",
          "resetButtonTitle": "清除搜索",
          "backButtonTitle": "关闭搜索",
          "noResultsText": "没有找到结果",
          "footer": {
            "selectText": "选择",
            "navigateText": "切换",
            "closeText": "关闭"
          }
        }
      }
    }
  },
  "sidebar": [
    {
      "text": "项目速览",
      "collapsed": false,
      "items": [
        {
          "text": "项目介绍",
          "link": "/project/introduction"
        },
        {
          "text": "功能特性",
          "link": "/project/features"
        },
        {
          "text": "快速开始",
          "link": "/project/quick-start"
        },
        {
          "text": "开发计划",
          "link": "/project/roadmap"
        }
      ]
    },
    {
      "text": "部署指南",
      "collapsed": false,
      "items": [
        {
          "text": "前期准备",
          "link": "/deployment/preparation"
        },
        {
          "text": "部署步骤",
          "link": "/deployment/steps"
        },
        {
          "text": "管理系统设置",
          "link": "/deployment/admin-settings"
        },
        {
          "text": "前端模块设置",
          "link": "/deployment/frontend-settings"
        },
        {
          "text": "Block 模块设置",
          "link": "/deployment/block-settings"
        },
        {
          "text": "API 接口",
          "link": "/deployment/api"
        }
      ]
    },
    {
      "text": "编辑&修改产品",
      "collapsed": false,
      "items": [
        {
          "text": "上架产品",
          "link": "/products/create"
        },
        {
          "text": "编辑产品",
          "link": "/products/edit"
        },
        {
          "text": "导出产品",
          "link": "/products/export"
        },
        {
          "text": "订单状态",
          "link": "/products/order-status"
        }
      ]
    },
    {
      "text": "Vibe Coding 前端模块",
      "collapsed": false,
      "items": [
        {
          "text": "下载前端源码",
          "link": "/frontend/download-source"
        },
        {
          "text": "部署代码到 Worker",
          "link": "/frontend/deploy-worker"
        },
        {
          "text": "修改 Header",
          "link": "/frontend/header"
        },
        {
          "text": "修改 Body",
          "link": "/frontend/body"
        },
        {
          "text": "修改 Footer",
          "link": "/frontend/footer"
        },
        {
          "text": "修改 Checkout 页面",
          "link": "/frontend/checkout"
        }
      ]
    },
    {
      "text": "信用卡支付接口",
      "collapsed": false,
      "items": [
        {
          "text": "Stripe 后台配置",
          "link": "/payments/stripe-dashboard"
        },
        {
          "text": "Stripe API 配置",
          "link": "/payments/stripe-api"
        },
        {
          "text": "Stripe Sandbox支付测试",
          "link": "/payments/stripe-sandbox"
        },
        {
          "text": "PayPal 后台配置",
          "link": "/payments/paypal-dashboard"
        },
        {
          "text": "PayPal API 配置",
          "link": "/payments/paypal-api"
        },
        {
          "text": "PayPal Sandbox支付测试",
          "link": "/payments/paypal-sandbox"
        }
      ]
    },
    {
      "text": "订单邮件通知",
      "collapsed": false,
      "items": [
        {
          "text": "域名设置",
          "link": "/email/domain"
        },
        {
          "text": "阿里云配置",
          "link": "/email/aliyun"
        },
        {
          "text": "订单邮件通知测试",
          "link": "/email/order-notification-test"
        }
      ]
    }
  ],
  "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.