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": "/axpatterns-logomark.png",
  "nav": [
    {
      "text": "Patterns",
      "link": "/markdown-examples"
    },
    {
      "text": "Agent Curious?",
      "link": "/agent-readiness"
    }
  ],
  "sidebar": [
    {
      "text": "Examples",
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/markdown-examples"
        },
        {
          "text": "Runtime API Examples",
          "link": "/api-examples"
        },
        {
          "text": "Patterns 101",
          "link": "/patterns"
        }
      ]
    },
    {
      "text": "Core Agentic Patterns",
      "collapsed": false,
      "items": [
        {
          "text": "Understanding Agents",
          "link": "/ai-patterns/core/understanding-agents"
        },
        {
          "text": "Task Decomposition",
          "link": "/ai-patterns/core/task-decomposition"
        },
        {
          "text": "Tool Usage",
          "link": "/ai-patterns/core/tool-usage"
        }
      ]
    },
    {
      "text": "Interaction Patterns",
      "collapsed": false,
      "items": [
        {
          "text": "Clarification Dialogues",
          "link": "/ai-patterns/interaction/clarification-dialogues"
        },
        {
          "text": "Proactive Assistance",
          "link": "/ai-patterns/interaction/proactive-assistance"
        },
        {
          "text": "Error Handling & Recovery",
          "link": "/ai-patterns/interaction/error-handling"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": {
        "svg": "<svg fill=\"#000000\" viewBox=\"0 0 22 22\" xmlns=\"http://www.w3.org/2000/svg\" id=\"memory-email\"><path d=\"M1 5H2V4H20V5H21V18H20V19H2V18H1V5M3 17H19V9H18V10H16V11H14V12H12V13H10V12H8V11H6V10H4V9H3V17M19 6H3V7H5V8H7V9H9V10H13V9H15V8H17V7H19V6Z\" /></svg>"
      },
      "link": "https://axpatterns.kit.com/10229ec2ef",
      "ariaLabel": "Newsletter"
    }
  ]
}

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.