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": "/"
    },
    {
      "text": "Blog",
      "link": "/blog/blog"
    },
    {
      "text": "How to...",
      "link": "/howto/howto"
    },
    {
      "text": "Resources",
      "link": "/resources/resources"
    }
  ],
  "sidebar": [
    {
      "text": "Blog",
      "items": [
        {
          "text": "Image Resize",
          "link": "/blog/imageresize2025"
        },
        {
          "text": "Image Formats",
          "link": "/blog/imageresizetx"
        },
        {
          "text": "DDD - 0 Introduction",
          "link": "/blog/domaindrivendesignwebshop/0domaindrivendesignintro"
        },
        {
          "text": "DDD - 1 Webshop Design",
          "link": "/blog/domaindrivendesignwebshop/1domaindrivendesignwebshop"
        }
      ]
    },
    {
      "text": "How to",
      "items": [
        {
          "text": "How to: C4 Model",
          "link": "/howto/c4model"
        },
        {
          "text": "How to: VitePress and GitHub Pages",
          "link": "/howto/vitepress-githubpages"
        },
        {
          "text": "How to: Advanced unit tests",
          "link": "/howto/advancedunittesting"
        },
        {
          "text": "How to: Integration test",
          "link": "/howto/integrationtestingdotnet"
        },
        {
          "text": "How to: Dialog modal with JS",
          "link": "/resources/frontend/jsmodal"
        },
        {
          "text": "How to: Popover with JS",
          "link": "/resources/frontend/jspopover"
        },
        {
          "text": "How to: Create a dashed line in OpenLayers",
          "link": "/resources/frontend/openlayers-dashedline"
        },
        {
          "text": "How to: Handle hover on iOS touch-devices",
          "link": "/resources/frontend/ioshover"
        },
        {
          "text": "How to: Use the HttpClient the right way in .NET",
          "link": "/resources/backend/use-httpclient-the-right-way"
        }
      ]
    },
    {
      "text": "Resources",
      "items": [
        {
          "text": "Frontend",
          "link": "/resources/frontend/frontend"
        },
        {
          "text": "Runtime API Examples",
          "link": "/resources/frontend/api-examples"
        },
        {
          "text": "How to create a dropdown-menu with CSS",
          "link": "/resources/frontend/cssmenu"
        },
        {
          "text": "Backend",
          "link": "/resources/backend/backend"
        },
        {
          "text": "API",
          "link": "/resources/backend/api"
        },
        {
          "text": "Authentication: OpenID Connect",
          "link": "/resources/backend/authopenid"
        },
        {
          "text": "Authentication: SAML",
          "link": "/resources/backend/authsaml"
        },
        {
          "text": "Domain driven design",
          "link": "/resources/backend/domaindrivendesign"
        },
        {
          "text": "Kafka",
          "link": "/resources/backend/kafka"
        },
        {
          "text": "Persistence strategy",
          "link": "/resources/patterns/persistencestrategy"
        },
        {
          "text": "REST: HATEOS",
          "link": "/resources/backend/hateos"
        },
        {
          "text": "Internet",
          "link": "/resources/other/internet"
        },
        {
          "text": "Markdown Examples",
          "link": "/resources/languages/markdown-examples"
        },
        {
          "text": "About NUnit",
          "link": "/resources/testing/nunit"
        },
        {
          "text": "Unit test attributes",
          "link": "/resources/testing/attributes"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/HelmerDenDekker"
    },
    {
      "icon": "linkedin",
      "link": "https://www.linkedin.com/in/helmerdendekker"
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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