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": "The Spark Editor",
      "link": "https://thespark.dev"
    }
  ],
  "logo": "/logo.svg",
  "logoLink": "https://docs.thespark.dev",
  "sidebar": [
    {
      "text": "Introduction",
      "link": "/",
      "items": [
        {
          "text": "What is Spark Editor?",
          "link": "/"
        },
        {
          "text": "Getting started",
          "link": "/getting-started"
        },
        {
          "text": "Key concepts",
          "link": "/key-concepts"
        }
      ]
    },
    {
      "text": "Project",
      "link": "/projects",
      "items": [
        {
          "text": "What's a CQL project?",
          "link": "/projects"
        },
        {
          "text": "Managing your project",
          "link": "/projects/managing-project"
        },
        {
          "text": "Switching between projects",
          "link": "/projects/switching-project"
        }
      ]
    },
    {
      "text": "Terminology",
      "items": [
        {
          "text": "CodeSystem and concepts",
          "link": "/terminology/concepts/"
        },
        {
          "text": "Managing your concepts",
          "link": "/terminology/concepts/managing-concepts"
        }
      ]
    },
    {
      "text": "Editor",
      "link": "/editor",
      "items": [
        {
          "text": "Introduction to the editor",
          "link": "/editor/"
        },
        {
          "text": "Writing CQL in the editor",
          "link": "/editor/writing-cql"
        },
        {
          "text": "Graph Mode",
          "link": "/editor/graph-mode"
        },
        {
          "text": "Navigate between CQL",
          "link": "/editor/navigate-between-cql"
        },
        {
          "text": "Export CQL as a FHIR library",
          "link": "/editor/export-cql-as-fhir-library"
        }
      ]
    }
  ],
  "footer": {
    "message": "AI models are used for generating parts of the documentation and validated before publication. If you find any inconsistency please file a bug on GitHub"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/rukshn"
    }
  ]
}

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.