Appearance
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:
md
<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
{
"search": {
"provider": "local"
},
"sidebar": [
{
"text": "Algemeen",
"items": [
{
"text": "13-05-2026",
"link": "/Algemeen/13-05-2026"
},
{
"text": "api-examples",
"link": "/Algemeen/api-examples"
},
{
"text": "Kladblok",
"link": "/Algemeen/kladblok"
},
{
"text": "markdown-examples",
"link": "/Algemeen/markdown-examples"
},
{
"text": "terminal-commands",
"link": "/Algemeen/terminal-commands"
}
],
"collapsed": false
},
{
"text": "m-cube",
"items": [
{
"text": "administratie",
"items": [
{
"text": "Overdracht-vakantie",
"link": "/m-cube/administratie/Overdracht-vakantie"
}
],
"collapsed": true
},
{
"text": "klanten",
"items": [
{
"text": "00 - Klanten Overzicht",
"link": "/m-cube/klanten/00 - Klanten Overzicht"
},
{
"text": "Alphega",
"link": "/m-cube/klanten/Alphega"
},
{
"text": "Bakker Bart",
"link": "/m-cube/klanten/Bakker Bart"
},
{
"text": "DA Drogist",
"link": "/m-cube/klanten/DA Drogist"
},
{
"text": "IKEA",
"link": "/m-cube/klanten/IKEA"
},
{
"text": "Instore radio",
"link": "/m-cube/klanten/Instore radio"
},
{
"text": "KFC",
"link": "/m-cube/klanten/KFC"
},
{
"text": "PLUS",
"link": "/m-cube/klanten/PLUS"
},
{
"text": "Paresto",
"link": "/m-cube/klanten/Paresto"
},
{
"text": "Shimano",
"link": "/m-cube/klanten/Shimano"
},
{
"text": "Thialf",
"link": "/m-cube/klanten/Thialf"
},
{
"text": "Toyota",
"link": "/m-cube/klanten/Toyota"
},
{
"text": "Unive",
"link": "/m-cube/klanten/Unive"
}
],
"collapsed": true
},
{
"text": "testing",
"items": [
{
"text": "Firmware testing XMP-8552",
"link": "/m-cube/testing/Firmware testing XMP-8552"
},
{
"text": "Testing",
"link": "/m-cube/testing/Testing"
}
],
"collapsed": true
}
],
"collapsed": false
},
{
"text": "personal",
"items": [
{
"text": "claude-code",
"items": [
{
"text": "Boris Cherny 13 tips Claude Code",
"link": "/personal/claude-code/Boris Cherny 13 tips Claude Code"
},
{
"text": "How I Start EVERY Claude Code Project",
"link": "/personal/claude-code/How I Start EVERY Claude Code Project"
},
{
"text": "Keep Claude working toward a goal",
"link": "/personal/claude-code/Keep Claude working toward a goal"
},
{
"text": "Manage multiple agents with agent view",
"link": "/personal/claude-code/Manage multiple agents with agent view"
},
{
"text": "Shortcuts",
"link": "/personal/claude-code/Shortcuts"
},
{
"text": "Claude Code in VS Code",
"link": "/personal/claude-code/Use Claude Code in VS Code"
}
],
"collapsed": true
},
{
"text": "github",
"items": [
{
"text": "GitHub-repository binnenhalen op je Mac via de command line (CLI)",
"link": "/personal/github/GitHub-repository binnenhalen op je Mac via de command line (CLI)"
},
{
"text": "Lokaal project naar Github",
"link": "/personal/github/Lokaal project naar Github"
},
{
"text": "Pull Request",
"link": "/personal/github/Pull Request"
}
],
"collapsed": true
},
{
"text": "projecten",
"items": [
{
"text": "Balansmaker",
"items": [
{
"text": "Autosave en auto bestandsnaam",
"link": "/personal/projecten/Balansmaker/Autosave en auto bestandsnaam"
},
{
"text": "Gegevensbeheer in Balansmaker",
"link": "/personal/projecten/Balansmaker/Gegevsnbeheer blok en werking buttons"
},
{
"text": "Password protection Vercel",
"link": "/personal/projecten/Balansmaker/Password protection Vercel"
}
],
"collapsed": true
},
{
"text": "CV Maker",
"items": [
{
"text": "Password login window Vercel",
"link": "/personal/projecten/CV Maker/Password login window Vercel"
},
{
"text": "Samenvatting project",
"link": "/personal/projecten/CV Maker/Samenvatting project"
}
],
"collapsed": true
},
{
"text": "ClassicSwedes.com",
"items": [
{
"text": "Kenteken-blur Tool",
"link": "/personal/projecten/ClassicSwedes.com/Kenteken-blur Tool"
},
{
"text": "New Features",
"items": [
{
"text": "Kaart met sponsors",
"link": "/personal/projecten/ClassicSwedes.com/New Features/Kaart met sponsors"
}
],
"collapsed": true
},
{
"text": "Oude homepage en nav",
"link": "/personal/projecten/ClassicSwedes.com/Oude homepage en nav"
},
{
"text": "Werking website",
"items": [
{
"text": "Nieuwsbericht-aanmaken",
"link": "/personal/projecten/ClassicSwedes.com/Werking website/Nieuwsbericht-aanmaken"
},
{
"text": "password-reset",
"link": "/personal/projecten/ClassicSwedes.com/Werking website/password-reset"
},
{
"text": "registratieflow",
"link": "/personal/projecten/ClassicSwedes.com/Werking website/registratieflow"
}
],
"collapsed": true
},
{
"text": "env local",
"link": "/personal/projecten/ClassicSwedes.com/env local"
}
],
"collapsed": true
},
{
"text": "Factuur maker",
"items": [
{
"text": "Password protection Vercel",
"link": "/personal/projecten/Factuur maker/Password protection Vercel"
}
],
"collapsed": true
},
{
"text": "Fillingscreens",
"items": [
{
"text": "Belasting",
"items": [
{
"text": "Webinar invullen aangifte Inkomstenbelasting 2024",
"link": "/personal/projecten/Fillingscreens/Belasting/Webinar invullen aangifte Inkomstenbelasting 2024"
}
],
"collapsed": true
},
{
"text": "Portfolio",
"link": "/personal/projecten/Fillingscreens/Portfolio"
}
],
"collapsed": true
},
{
"text": "Garage Amstelveen",
"items": [
{
"text": "DNS",
"link": "/personal/projecten/Garage Amstelveen/DNS"
}
],
"collapsed": true
},
{
"text": "Goudhandel",
"items": [
{
"text": "Goudhandel Aura bv",
"link": "/personal/projecten/Goudhandel/Goudhandel Aura bv"
}
],
"collapsed": true
},
{
"text": "Moszkowiczletselschade.nl",
"items": [
{
"text": "Leadform Google Ads",
"link": "/personal/projecten/Moszkowiczletselschade.nl/Leadform Google Ads"
},
{
"text": "Status Google Ads-campagne ΓÇô uitleg zichtbaarheid advertenties",
"link": "/personal/projecten/Moszkowiczletselschade.nl/Status Google Ads-campagne ΓÇô uitleg zichtbaarheid advertenties"
}
],
"collapsed": true
},
{
"text": "Tools dashboard",
"items": [
{
"text": "New features",
"link": "/personal/projecten/Tools dashboard/New features"
},
{
"text": "env local",
"link": "/personal/projecten/Tools dashboard/env local"
}
],
"collapsed": true
},
{
"text": "robert-moszkowicz.nl",
"items": [
{
"text": "Budget SEA",
"link": "/personal/projecten/robert-moszkowicz.nl/Budget SEA"
},
{
"text": "Google SEA specialist",
"link": "/personal/projecten/robert-moszkowicz.nl/Google SEA specialist"
},
{
"text": "Overzicht SEA campagnes",
"link": "/personal/projecten/robert-moszkowicz.nl/Overzicht SEA campagnes"
},
{
"text": "You Tube Video weergaven - start 29 dec 2025",
"link": "/personal/projecten/robert-moszkowicz.nl/You Tube Video weergaven - start 29 dec 2025"
}
],
"collapsed": true
}
],
"collapsed": true
},
{
"text": "vibe-coding",
"items": [
{
"text": "Tools",
"link": "/personal/vibe-coding/Tools"
}
],
"collapsed": true
}
],
"collapsed": false
}
]
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "Algemeen/api-examples.md",
"filePath": "Algemeen/api-examples.md"
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.