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": "Examples",
      "link": "/markdown-examples"
    }
  ],
  "sidebar": [
    {
      "text": "O Omoda 9",
      "items": [
        {
          "text": "Informacje ogólne",
          "link": "/general/car-info"
        },
        {
          "text": "Recenzja",
          "link": "/general/review"
        },
        {
          "text": "Materiały o Omoda 9",
          "link": "/general/resources"
        }
      ]
    },
    {
      "text": "Informacje techniczne",
      "items": [
        {
          "text": "Co to jest \"Super Hybryda\"?",
          "link": "/tech/super-hybrid"
        },
        {
          "text": "Silnik spalinowy",
          "link": "/tech/engine"
        },
        {
          "text": "Silniki elektryczne",
          "link": "/tech/electric-motors"
        },
        {
          "text": "Skrzynia biegów",
          "link": "/tech/drivetrain"
        },
        {
          "text": "Zawieszenie",
          "link": "/tech/suspension"
        }
      ]
    },
    {
      "text": "Porady i wskazówki",
      "items": [
        {
          "text": "FAQ - Najczęściej zadawane pytania",
          "link": "/tips/faq"
        },
        {
          "text": "Użytkowanie jako auto HEV",
          "link": "/tips/using-hev-mode"
        },
        {
          "text": "Jak ustawić zarządzanie energią?",
          "link": "/tips/energy-management"
        },
        {
          "text": "Sprowadzenie z Chin - czy warto?",
          "link": "/tips/importing-from-china"
        }
      ]
    },
    {
      "text": "Instrukcja obsługi",
      "items": [
        {
          "text": "...",
          "link": "/manual/..."
        }
      ]
    },
    {
      "text": "Modyfikacje i akcesoria",
      "items": [
        {
          "text": "...",
          "link": "/mods-and-accessories/..."
        }
      ]
    },
    {
      "text": "Usterki i problemy",
      "items": [
        {
          "text": "Ściąganie w prawo",
          "link": "/issues/pulling-right"
        },
        {
          "text": "Podgrzewanie przedniej szyby",
          "link": "/issues/front-windshield-heating"
        },
        {
          "text": "Chrobotanie w trybie HEV",
          "link": "/issues/rumbling-hev-mode"
        },
        {
          "text": "Alarmy prędkości i uwagi kierowcy",
          "link": "/issues/speed-signals-driver-notes"
        },
        {
          "text": "Dziwne zapachy w nowym aucie",
          "link": "/issues/strange-smells-new-car"
        },
        {
          "text": "Rozłączanie napędu",
          "link": "/issues/drive-disconnection"
        },
        {
          "text": "Ślizganie się na mokrym",
          "link": "/issues/slipping-wet-surface"
        },
        {
          "text": "Słabo działające ogrzewanie",
          "link": "/issues/poor-heating"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

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.