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 lang="ts">
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": "/upscale-logo.png",
  "logoLink": "/",
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "Go to Upscale ERP",
      "link": "https://upscaleerp.com/"
    }
  ],
  "search": {
    "provider": "local"
  },
  "sidebar": [
    {
      "text": "Getting Started",
      "collapsed": false,
      "items": [
        {
          "text": "Introduction to Upscale ERP",
          "link": "/introduction"
        },
        {
          "text": "Quick Start",
          "link": "/quick-start"
        },
        {
          "text": "Install Upscale Web App",
          "link": "/install-upscale-web-app"
        }
      ]
    },
    {
      "text": "Dashboard",
      "collapsed": true,
      "items": [
        {
          "text": "Overview - Dashboard",
          "link": "/dashboard/overview"
        }
      ]
    },
    {
      "text": "Business Locations",
      "collapsed": true,
      "items": [
        {
          "text": "Introduction to Locations",
          "link": "/business-locations/intro"
        },
        {
          "text": "Set up Locations",
          "link": "/business-locations/setup-locations"
        },
        {
          "text": "Location Operations",
          "link": "/business-locations/location-operations"
        },
        {
          "text": "Location Configuration",
          "link": "/business-locations/location-configuration"
        }
      ]
    },
    {
      "text": "Inventory",
      "collapsed": true,
      "items": [
        {
          "text": "Introduction to Inventory",
          "link": "/inventory/intro"
        },
        {
          "text": "Inventory Items",
          "link": "/inventory/items"
        },
        {
          "text": "Item Groups",
          "link": "/inventory/item-group"
        },
        {
          "text": "Stock Adjustments",
          "link": "/inventory/stock-adjustments"
        },
        {
          "text": "Stock Transfers",
          "link": "/inventory/stock-transfers"
        }
      ]
    },
    {
      "text": "Sales",
      "collapsed": true,
      "items": [
        {
          "text": "Introduction to Sales",
          "link": "/sales/intro"
        },
        {
          "text": "Customers",
          "link": "/sales/customers"
        },
        {
          "text": "Estimates",
          "link": "/sales/estimates"
        },
        {
          "text": "Sales Orders",
          "link": "/sales/sales-orders"
        },
        {
          "text": "Invoices",
          "link": "/sales/invoices"
        },
        {
          "text": "Payments Received",
          "link": "/sales/payments-received"
        },
        {
          "text": "Credit Notes",
          "link": "/sales/credit-notes"
        }
      ]
    },
    {
      "text": "Purchases",
      "collapsed": true,
      "items": [
        {
          "text": "Introduction to Purchases",
          "link": "/purchases/intro"
        },
        {
          "text": "Vendors",
          "link": "/purchases/vendors"
        },
        {
          "text": "Expenses",
          "link": "/purchases/expenses"
        },
        {
          "text": "Purchase Orders",
          "link": "/purchases/purchase-orders"
        },
        {
          "text": "Bills",
          "link": "/purchases/bills"
        },
        {
          "text": "Payments Made",
          "link": "/purchases/payments-made"
        },
        {
          "text": "Vendor Credits",
          "link": "/purchases/vendor-credits"
        }
      ]
    },
    {
      "text": "Accounting",
      "collapsed": true,
      "items": [
        {
          "text": "Introduction to Accounting",
          "link": "/accounting/intro"
        },
        {
          "text": "Chart of Accounts",
          "link": "/accounting/chart-of-accounts"
        }
      ]
    },
    {
      "text": "Reports",
      "collapsed": true,
      "items": [
        {
          "text": "Introduction to Reports",
          "link": "/reports/intro"
        },
        {
          "text": "Business Overview",
          "link": "/reports/business-overview"
        },
        {
          "text": "Sales Reports",
          "link": "/reports/sales-reports"
        },
        {
          "text": "Inventory Reports",
          "link": "/reports/inventory-reports"
        },
        {
          "text": "Receivables",
          "link": "/reports/receivables"
        },
        {
          "text": "Payables",
          "link": "/reports/payables"
        },
        {
          "text": "Purchases and Expenses Reports",
          "link": "/reports/purchases-expenses-reports"
        },
        {
          "text": "Taxes Reports",
          "link": "/reports/taxes-reports.md"
        }
      ]
    },
    {
      "text": "Settings",
      "collapsed": true,
      "items": [
        {
          "text": "Introduction to Settings",
          "link": "/settings/intro"
        },
        {
          "text": "Manage Your Organization",
          "link": "/settings/manage-organizations.md"
        },
        {
          "text": "System Settings",
          "link": "/settings/system"
        },
        {
          "text": "CRM Settings",
          "link": "/settings/crm"
        },
        {
          "text": "Sales Settings",
          "link": "/settings/sales"
        },
        {
          "text": "Inventory Settings",
          "link": "/settings/inventory"
        }
      ]
    }
  ]
}

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.