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"
    }
  ],
  "aside": false,
  "sidebar": [
    {
      "text": "Examples",
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/markdown-examples"
        },
        {
          "text": "Runtime API Examples",
          "link": "/api-examples"
        }
      ]
    },
    {
      "text": "Sucré",
      "items": [
        {
          "text": "Gâteau au yaourt",
          "link": "/gateau-au-yaourt"
        },
        {
          "text": "Pancakes",
          "link": "/pancakes"
        },
        {
          "text": "Browkie",
          "link": "/browkie"
        },
        {
          "text": "Trianon",
          "link": "/trianon"
        },
        {
          "text": "Carott Cake",
          "link": "/carott-cake"
        },
        {
          "text": "Charlotte aux framboises",
          "link": "/charlotte-framboises"
        },
        {
          "text": "Galette frangipane",
          "link": "/galette-frangipane"
        },
        {
          "text": "Bûche coco framboise",
          "link": "/buche-coco-framboise"
        },
        {
          "text": "Bûche chocolat praliné",
          "link": "/buche-choco-praline"
        },
        {
          "text": "Bûche framboise et citron meringuée",
          "link": "/buche-framboise-citron-meringuee"
        },
        {
          "text": "Entremets poire caramel",
          "link": "/entremet-poire-caramel"
        }
      ]
    },
    {
      "text": "Salé",
      "items": [
        {
          "text": "Boeuf bourguignon",
          "link": "/boeuf-bourguignon"
        },
        {
          "text": "Lasagnes",
          "link": "/lasagnes"
        },
        {
          "text": "Hachis parmentier",
          "link": "/hachis-parmentier"
        },
        {
          "text": "Flammenkuche",
          "link": "/flammenkuche"
        },
        {
          "text": "Macédoine",
          "link": "/macedoine"
        },
        {
          "text": "Chili Con Carne",
          "link": "/chili-con-carne"
        },
        {
          "text": "Poulet et orzo crémeux",
          "link": "/poulet-orzo-crémeux"
        },
        {
          "text": "Curry poireaux et pois chiches",
          "link": "/curry-poireaux"
        },
        {
          "text": "Pad thaï au poulet",
          "link": "/pad-thai-poulet"
        },
        {
          "text": "Gyoza au boeuf",
          "link": "/gyoza-boeuf"
        },
        {
          "text": "Gratin courgettes et choux-fleur",
          "link": "/gratin-courgette-choux-fleur"
        }
      ]
    },
    {
      "text": "Autres",
      "items": [
        {
          "text": "Kéfir",
          "link": "/kefir"
        },
        {
          "text": "Levain",
          "link": "/levain"
        }
      ]
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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