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"
},
"logo": "/acc_logo.svg",
"nav": [
{
"text": "Home",
"link": "/"
},
{
"text": "User Guide",
"link": "/intro-getting-started"
}
],
"sidebar": [
{
"text": "Introduction",
"collapsed": false,
"items": [
{
"text": "What is Accelerator?",
"link": "/introduction"
},
{
"text": "Getting Started",
"link": "/intro-getting-started"
}
]
},
{
"text": "Data Repository",
"collapsed": true,
"items": [
{
"text": "Introduction",
"link": "/data-repository-introduction"
},
{
"text": "File Operations",
"link": "/data-repository-file-operations"
}
]
},
{
"text": "Routines and Jobflows",
"collapsed": true,
"items": [
{
"text": "Introduction",
"link": "/routine-introduction"
},
{
"text": "Routine Basics",
"link": "/routine-getting-started"
},
{
"text": "Advanced Routine",
"link": "/routine-advanced"
},
{
"text": "Jobflow",
"link": "/routine-jobflow"
},
{
"text": "GUI Option",
"link": "/routine-gui"
},
{
"text": "Inbuilt Base Stacks",
"link": "/routine-base-stacks"
},
{
"text": "Data Mappings",
"link": "/routine-data-mappings"
},
{
"text": "Inbuilt Routines",
"link": "/routine-inbuilt-routines"
},
{
"text": "Interactive Routines",
"link": "/routine-interactive"
}
]
},
{
"text": "Data Validation",
"collapsed": true,
"items": [
{
"text": "Introduction",
"link": "/data-validation-introduction"
},
{
"text": "Validation Basics",
"link": "/data-validation-getting-started"
}
]
},
{
"text": "Data Explorer",
"collapsed": true,
"items": [
{
"text": "Introduction",
"link": "/data-explorer-introduction"
}
]
},
{
"text": "Recipes",
"collapsed": true,
"items": [
{
"text": "Zenodo Release",
"link": "/recipe-zenodo-release"
}
]
},
{
"text": "Running Scientific Simulations",
"collapsed": true,
"items": [
{
"text": "Introduction",
"link": "/simulation-introduction"
}
]
},
{
"text": "Model or Job Hosting",
"collapsed": true,
"items": [
{
"text": "Introduction",
"link": "/hosting-introduction"
}
]
},
{
"text": "ACT4CAP27 Accelerator Guide",
"collapsed": true,
"items": [
{
"text": "Introduction",
"link": "/act4cap27-tech-guide-intro"
},
{
"text": "Raw FAOSTAT Data to Model Input",
"link": "/act4cap27-usecase1"
},
{
"text": "Model Output to Validated Indicators",
"link": "/act4cap27-usecase2"
},
{
"text": "Data Versioning",
"link": "/act4cap27-data-versioning"
}
]
},
{
"text": "Glossary",
"collapsed": true,
"link": "/glossary"
}
],
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/iiasa/"
}
]
}Page Data
{
"title": "VitePress Runtime API Examples | useData, Page & Theme Data",
"description": "Explore practical examples of using VitePress runtime APIs like useData() to access site, theme, page, and frontmatter data. Learn how to integrate runtime APIs in Markdown and Vue components.",
"frontmatter": {
"title": "VitePress Runtime API Examples | useData, Page & Theme Data",
"description": "Explore practical examples of using VitePress runtime APIs like useData() to access site, theme, page, and frontmatter data. Learn how to integrate runtime APIs in Markdown and Vue components.",
"keywords": "VitePress runtime API, useData example, page data, theme data, frontmatter, VitePress Markdown, Vue integration, VitePress tutorials, site data access",
"outline": "deep",
"head": [
[
"link",
{
"rel": "icon",
"type": "image/svg+xml",
"href": "/acc_logo.svg"
}
],
[
"meta",
{
"property": "og:title",
"content": "VitePress Runtime API Examples | useData, Page & Theme Data"
}
],
[
"meta",
{
"property": "og:description",
"content": "Explore practical examples of using VitePress runtime APIs like useData() to access site, theme, page, and frontmatter data. Learn how to integrate runtime APIs in Markdown and Vue components."
}
],
[
"meta",
{
"property": "og:url",
"content": "https://accelerator.iiasa.ac.at/docs/api-examples"
}
],
[
"meta",
{
"property": "og:type",
"content": "website"
}
],
[
"meta",
{
"name": "twitter:title",
"content": "VitePress Runtime API Examples | useData, Page & Theme Data"
}
],
[
"meta",
{
"name": "twitter:description",
"content": "Explore practical examples of using VitePress runtime APIs like useData() to access site, theme, page, and frontmatter data. Learn how to integrate runtime APIs in Markdown and Vue components."
}
],
[
"meta",
{
"name": "twitter:card",
"content": "summary_large_image"
}
],
[
"link",
{
"rel": "canonical",
"href": "https://accelerator.iiasa.ac.at/docs/api-examples"
}
],
[
"script",
{
"type": "application/ld+json"
},
"{\"@context\":\"https://schema.org\",\"@type\":\"TechArticle\",\"headline\":\"VitePress Runtime API Examples | useData, Page & Theme Data\",\"description\":\"Explore practical examples of using VitePress runtime APIs like useData() to access site, theme, page, and frontmatter data. Learn how to integrate runtime APIs in Markdown and Vue components.\",\"publisher\":{\"@type\":\"Organization\",\"name\":\"International Institute for Applied Systems Analysis (IIASA)\",\"url\":\"https://iiasa.ac.at\"},\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://accelerator.iiasa.ac.at/docs/api-examples\"}}"
]
]
},
"headers": [],
"relativePath": "api-examples.md",
"filePath": "api-examples.md"
}Page Frontmatter
{
"title": "VitePress Runtime API Examples | useData, Page & Theme Data",
"description": "Explore practical examples of using VitePress runtime APIs like useData() to access site, theme, page, and frontmatter data. Learn how to integrate runtime APIs in Markdown and Vue components.",
"keywords": "VitePress runtime API, useData example, page data, theme data, frontmatter, VitePress Markdown, Vue integration, VitePress tutorials, site data access",
"outline": "deep",
"head": [
[
"link",
{
"rel": "icon",
"type": "image/svg+xml",
"href": "/acc_logo.svg"
}
],
[
"meta",
{
"property": "og:title",
"content": "VitePress Runtime API Examples | useData, Page & Theme Data"
}
],
[
"meta",
{
"property": "og:description",
"content": "Explore practical examples of using VitePress runtime APIs like useData() to access site, theme, page, and frontmatter data. Learn how to integrate runtime APIs in Markdown and Vue components."
}
],
[
"meta",
{
"property": "og:url",
"content": "https://accelerator.iiasa.ac.at/docs/api-examples"
}
],
[
"meta",
{
"property": "og:type",
"content": "website"
}
],
[
"meta",
{
"name": "twitter:title",
"content": "VitePress Runtime API Examples | useData, Page & Theme Data"
}
],
[
"meta",
{
"name": "twitter:description",
"content": "Explore practical examples of using VitePress runtime APIs like useData() to access site, theme, page, and frontmatter data. Learn how to integrate runtime APIs in Markdown and Vue components."
}
],
[
"meta",
{
"name": "twitter:card",
"content": "summary_large_image"
}
],
[
"link",
{
"rel": "canonical",
"href": "https://accelerator.iiasa.ac.at/docs/api-examples"
}
],
[
"script",
{
"type": "application/ld+json"
},
"{\"@context\":\"https://schema.org\",\"@type\":\"TechArticle\",\"headline\":\"VitePress Runtime API Examples | useData, Page & Theme Data\",\"description\":\"Explore practical examples of using VitePress runtime APIs like useData() to access site, theme, page, and frontmatter data. Learn how to integrate runtime APIs in Markdown and Vue components.\",\"publisher\":{\"@type\":\"Organization\",\"name\":\"International Institute for Applied Systems Analysis (IIASA)\",\"url\":\"https://iiasa.ac.at\"},\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://accelerator.iiasa.ac.at/docs/api-examples\"}}"
]
]
}More
Check out the documentation for the full list of runtime APIs.