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

{
  "nav": [
    {
      "text": "Home",
      "link": "/docs/home"
    },
    {
      "text": "Examples",
      "link": "/docs/markdown-examples"
    }
  ],
  "sidebar": [
    {
      "text": "Packages",
      "items": [
        {
          "text": "KMS-v2",
          "link": "/kmsv2/"
        },
        {
          "text": "Admin",
          "link": "/admin/"
        },
        {
          "text": "Tenant Node",
          "link": "/tenant-node/"
        },
        {
          "text": "Tenant API",
          "link": "/tenant-api/"
        },
        {
          "text": "Tenant Ngx",
          "link": "/tenant-ngx/"
        }
      ]
    },
    {
      "text": "Snippets",
      "items": [
        {
          "text": "NX Snippets",
          "link": "/docs/nx-snippets"
        },
        {
          "text": "Typescript Snippets",
          "link": "/docs/typescript-snippets"
        },
        {
          "text": "CDK Snippets",
          "link": "/docs/cdk-snippets"
        }
      ]
    },
    {
      "text": "Notes",
      "items": [
        {
          "text": "FAQ",
          "link": "/docs/faq"
        },
        {
          "text": "CDK Notes",
          "link": "/docs/cdk-notes"
        },
        {
          "text": "Connection EventBridge",
          "link": "/docs/connection-eventbridge"
        },
        {
          "text": "Figma",
          "link": "/docs/figma"
        },
        {
          "text": "Sass",
          "link": "/docs/sass"
        },
        {
          "text": "Services",
          "link": "/docs/services"
        },
        {
          "text": "Shared UI",
          "link": "/docs/shared-ui"
        },
        {
          "text": "Types explanation",
          "link": "/docs/types-explanation"
        },
        {
          "text": "Permissions",
          "link": "/docs/role-permission"
        },
        {
          "text": "Auth. Stories",
          "link": "/docs/auth-story"
        },
        {
          "text": "Deploy Automation Progress",
          "link": "/docs/deploy-automation"
        }
      ]
    },
    {
      "text": "API References",
      "items": [
        {
          "text": "KMS",
          "link": "/docs/kms-api-references.md"
        },
        {
          "text": "KMap V2",
          "link": "/docs/kmap-v2-api-references.md"
        },
        {
          "text": "KKJ",
          "link": "/docs/kkj-api-references.md"
        },
        {
          "text": "Search",
          "link": "/docs/search-api-references.md"
        }
      ]
    },
    {
      "text": "LMS",
      "items": [
        {
          "text": "Overview",
          "link": "/docs/lms/overview.md"
        },
        {
          "text": "Course List",
          "link": "/docs/lms/course-list.md"
        },
        {
          "text": "Course Create/Update",
          "link": "/docs/lms/course-create.md"
        },
        {
          "text": "Course Detail",
          "link": "/docs/lms/course-detail.md"
        },
        {
          "text": "Course Section Detail",
          "link": "/docs/lms/section-detail.md"
        },
        {
          "text": "Course Section Create",
          "link": "/docs/lms/section-create.md"
        },
        {
          "text": "Course Package List",
          "link": "/docs/lms/course-package-list.md"
        }
      ]
    },
    {
      "text": "Examples",
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/docs/markdown-examples"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/bagubagu/kmp"
    }
  ],
  "search": {
    "provider": "local"
  },
  "editLink": {
    "pattern": "https://github.com/bagubagu/kmp/edit/master/:path"
  },
  "footer": {
    "message": "Made with ❤️ by Bagubagu Studio",
    "copyright": "Copyright © 2023 PT Synergo Indonesia"
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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