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
{
"logo": "/logo.png",
"siteTitle": "Dev docs",
"i18nRouting": false,
"darkModeSwitchLabel": "Ko'rinishi",
"lightModeSwitchTitle": "Yorqin mavzuga o'tish",
"darkModeSwitchTitle": "Tungi mavzuga o'tish",
"sidebarMenuLabel": "Menyu",
"returnToTopLabel": "Yuqoriga qaytish",
"langMenuLabel": "Tilni o'zgartirish",
"externalLinkIcon": false,
"outline": {
"label": "Ushbu mavzuda:"
},
"docFooter": {
"prev": "Avvalgi mavzu",
"next": "Keyingi mavzu"
},
"nav": [
{
"text": "Asosiy",
"link": "/"
},
{
"text": "Blog",
"link": "/blog/"
},
{
"text": "Jamoamiz",
"link": "/jamoa"
},
{
"text": "Biz haqimizda",
"link": "/biz-haqimizda"
}
],
"search": {
"provider": "local",
"options": {
"locales": {
"root": {
"translations": {
"button": {
"buttonText": "Qidirish",
"buttonAriaLabel": "Qidirish"
},
"modal": {
"displayDetails": "Batafsil ro'yxatni ko'rsatish",
"resetButtonTitle": "Qidiruvni qayta o'rnatish",
"backButtonTitle": "Qidiruvni yopish",
"noResultsText": "Natija topilmadi",
"footer": {
"selectText": "Tanlash",
"selectKeyAriaLabel": "Kiritish",
"navigateText": "Navigatsiya",
"navigateUpKeyAriaLabel": "Yuqoriga",
"navigateDownKeyAriaLabel": "Pastga",
"closeText": "Yopish",
"closeKeyAriaLabel": "esc"
}
}
}
}
}
}
},
"sidebar": {
"/html/": [
{
"text": "HTML Introduction",
"link": "/html/"
},
{
"text": "HTML Basics",
"link": "/html/basics"
},
{
"text": "Advanced HTML",
"link": "/html/advanced"
}
],
"/css/": [
{
"text": "CSS Introduction",
"link": "/css/"
},
{
"text": "CSS Basics",
"link": "/css/basics"
},
{
"text": "Advanced CSS",
"link": "/css/advanced"
}
],
"/js/": [
{
"text": "JavaScript Introduction",
"link": "/js/"
},
{
"text": "JavaScript Basics",
"link": "/js/basics"
},
{
"text": "Advanced JavaScript",
"link": "/js/advanced"
}
],
"/cpp/": [
{
"text": "Kirish",
"collapsed": false,
"items": [
{
"text": "C++ Introduction",
"link": "/cpp/"
},
{
"text": "C++ Basics",
"link": "/cpp/basics"
},
{
"text": "Advanced C++",
"link": "/cpp/advanced"
}
]
},
{
"text": "Kirish",
"collapsed": true,
"items": [
{
"text": "C++ Basics",
"link": "/cpp/basics"
},
{
"text": "Advanced C++",
"link": "/cpp/advanced"
}
]
},
{
"text": "Kirish",
"collapsed": true,
"items": [
{
"text": "C++ Basics",
"link": "/cpp/basics"
},
{
"text": "Advanced C++",
"link": "/cpp/advanced"
}
]
},
{
"text": "Kirish",
"collapsed": true,
"items": [
{
"text": "C++ Basics",
"link": "/cpp/basics"
},
{
"text": "Advanced C++",
"link": "/cpp/advanced"
}
]
}
]
},
"socialLinks": [
{
"icon": {
"svg": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 12.3047C0 5.50977 5.37 0 12 0C18.627 0 24 5.50977 24 12.3047C24 17.7344 20.5649 22.3486 15.764 23.9619C15.149 24.085 14.939 23.7012 14.939 23.3779L14.9438 22.5371C14.9482 21.9092 14.954 21.0195 14.954 20.0088C14.954 18.8555 14.564 18.1016 14.144 17.7324C16.814 17.4297 19.619 16.3887 19.619 11.6621C19.619 10.3184 19.1541 9.22168 18.389 8.36035C18.509 8.04883 18.9139 6.79785 18.269 5.10352C18.269 5.10352 17.264 4.77344 14.984 6.36426C14.024 6.09082 13.004 5.95508 11.984 5.94922C11.3732 5.95312 10.7623 6.00293 10.1643 6.10156C9.76379 6.16699 9.36902 6.25488 8.98401 6.36426C6.68896 4.77344 5.68396 5.10352 5.68396 5.10352C5.03894 6.79785 5.44397 8.04883 5.57898 8.36035C4.80896 9.22168 4.34399 10.3184 4.34399 11.6621C4.34399 16.377 7.14502 17.4346 9.81006 17.7422C9.46704 18.0498 9.15796 18.5928 9.05005 19.3877C8.36401 19.7031 6.625 20.2461 5.55505 18.3643C5.55505 18.3643 4.922 17.1836 3.71704 17.0977C3.71704 17.0977 2.54602 17.082 3.63306 17.8447C3.63306 17.8447 4.422 18.2246 4.96802 19.6445C4.96802 19.6445 5.672 22.0381 9.01001 21.2949C9.01501 22.3203 9.02502 23.0947 9.02502 23.3867C9.02502 23.7139 8.80505 24.0947 8.20496 23.9785C3.43799 22.3535 0 17.7422 0 12.3047Z\" fill=\"currentColor\"/></svg>"
},
"link": "https://github.com/otabekoff/dev-docs"
},
{
"icon": {
"svg": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 0C18.6274 0 24 5.37207 24 12C24 18.6279 18.6274 24 12 24C5.37256 24 0 18.6279 0 12C0 5.37207 5.37256 0 12 0ZM17.7758 6.56641L15.6349 17.3613C15.6349 17.3613 15.3354 18.1094 14.5121 17.75L11.5 15.3789L11.4659 15.415L9.51172 17.1963C9.51172 17.1963 9.35901 17.3125 9.19189 17.2393L9.56604 13.9297L9.58655 13.8721C9.58655 13.8721 15.066 8.94727 15.2905 8.7373C15.5151 8.52832 15.4402 8.4834 15.4402 8.4834C15.4551 8.22852 15.036 8.4834 15.036 8.4834L7.77515 13.0938L4.75098 12.0762C4.75098 12.0762 4.55005 12.0049 4.3999 11.8535C4.32178 11.7754 4.25745 11.6748 4.24207 11.5518C4.19714 11.1924 4.76599 10.998 4.76599 10.998L16.7877 6.28223C16.7877 6.28223 17.7758 5.84766 17.7758 6.56641Z\" fill=\"currentColor\"/></svg>"
},
"link": "https://t.me/bekkydev"
},
{
"icon": {
"svg": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM9.26094 17.4432C9.6321 17.072 9.81769 16.6212 9.81769 16.0909C9.81769 15.5606 9.6321 15.1098 9.26094 14.7386C8.88977 14.3675 8.43908 14.1818 7.90884 14.1818C7.37861 14.1818 6.92791 14.3675 6.55675 14.7386C6.18558 15.1098 6 15.5606 6 16.0909C6 16.6212 6.18558 17.072 6.55675 17.4432C6.92791 17.8144 7.37861 18 7.90884 18C8.43908 18 8.88977 17.8144 9.26094 17.4432ZM14.7389 17.7912C14.8649 17.6587 14.9212 17.4996 14.9079 17.3139C14.8218 16.2533 14.555 15.2391 14.1076 14.2713C13.6602 13.3035 13.0587 12.4451 12.3032 11.696C11.5542 10.9403 10.6959 10.3388 9.72821 9.89133C8.76053 9.44389 7.74646 9.17709 6.68599 9.09091H6.63628C6.46395 9.09091 6.32146 9.14726 6.20878 9.25994C6.06959 9.37926 6 9.53504 6 9.72727V11.0696C6 11.2353 6.05468 11.3778 6.16404 11.4972C6.2734 11.6165 6.41093 11.6828 6.57663 11.696C8.09443 11.8419 9.39184 12.4534 10.4689 13.5305C11.5459 14.6077 12.1573 15.9053 12.3032 17.4233C12.3164 17.589 12.3827 17.7266 12.502 17.8359C12.6213 17.9453 12.7638 18 12.9295 18H14.2717C14.4639 18 14.6196 17.9304 14.7389 17.7912ZM19.8192 17.8011C19.9518 17.6686 20.0114 17.5128 19.9982 17.3338C19.912 15.597 19.5144 13.9349 18.8051 12.3473C18.096 10.7597 17.1216 9.34943 15.8822 8.11648C14.6494 6.87689 13.2394 5.90246 11.652 5.19318C10.0646 4.4839 8.40263 4.08617 6.66611 4H6.63628C6.46395 4 6.31814 4.05966 6.19884 4.17898C6.06628 4.2983 6 4.45076 6 4.63636V6.05824C6 6.22396 6.05799 6.36814 6.17398 6.49077C6.28997 6.6134 6.43081 6.67803 6.59651 6.68466C8.02152 6.77084 9.37527 7.10891 10.6578 7.69886C11.9403 8.28882 13.0538 9.05611 13.9982 10.0007C14.9427 10.9453 15.7099 12.0589 16.2998 13.3416C16.8897 14.6243 17.2244 15.9783 17.3039 17.4034C17.3106 17.5692 17.3752 17.71 17.4978 17.826C17.6204 17.942 17.7678 18 17.9403 18H19.3619C19.5475 18 19.6999 17.9337 19.8192 17.8011Z\" fill=\"currentColor\"/></svg>"
},
"link": "/dev-docs/feed.rss",
"ariaLabel": "RSS Feed"
}
],
"footer": {
"message": "<a href=\"https://github.com/otabekoff/dev-docs/blob/main/LICENSE.md#ozbekcha\">Intellektual Mulk Litsenziyasi</a> asosida himoyalangan.",
"copyright": "Mualliflik huquqi © 2024 Otabek Sadiridinov"
},
"blog": {
"title": "My Blog",
"description": "Some articles for sample Blog"
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "loyiha.md",
"filePath": "loyiha.md",
"lastUpdated": 1724448361000
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.