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": "/SRAIcon.png",
"siteTitle": "StarRailAssistant CE",
"nav": [
{
"text": "主页",
"link": "/"
},
{
"text": "开始使用",
"link": "/docs/getting-started"
},
{
"text": "下载",
"link": "/pages/download"
}
],
"sidebar": {
"/": [
{
"text": "README",
"link": "/README"
},
{
"text": "api-examples",
"link": "/api-examples"
},
{
"text": "markdown-examples",
"link": "/markdown-examples"
}
],
"/.git/": [
{
"text": "",
"items": [
{
"text": "info",
"items": []
},
{
"text": "logs",
"items": [
{
"text": "refs",
"items": [
{
"text": "heads",
"items": []
},
{
"text": "remotes",
"items": [
{
"text": "origin",
"items": []
}
]
}
]
}
]
},
{
"text": "objects",
"items": [
{
"text": "info",
"items": []
},
{
"text": "pack",
"items": []
}
]
},
{
"text": "refs",
"items": [
{
"text": "heads",
"items": []
},
{
"text": "remotes",
"items": [
{
"text": "origin",
"items": []
}
]
},
{
"text": "tags",
"items": []
}
]
}
]
}
],
"/.netlify/": [
{
"text": "",
"items": [
{
"text": "plugins",
"items": []
}
]
}
],
"/docs/": [
{
"text": "",
"items": [
{
"text": "getting-started",
"link": "/docs/getting-started"
}
]
}
],
"/pages/": [
{
"text": "",
"items": [
{
"text": "download",
"link": "/pages/download"
}
]
}
]
},
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/vuejs/vitepress"
}
],
"permalinks": {
"map": {},
"inv": {}
},
"docAnalysisInfo": {
"fileList": [
{
"filePath": "/opt/build/repo/README.md",
"relativePath": "README.md"
},
{
"filePath": "/opt/build/repo/api-examples.md",
"relativePath": "api-examples.md"
},
{
"filePath": "/opt/build/repo/docs/getting-started.md",
"relativePath": "docs/getting-started.md"
},
{
"filePath": "/opt/build/repo/markdown-examples.md",
"relativePath": "markdown-examples.md"
},
{
"filePath": "/opt/build/repo/pages/download.md",
"relativePath": "pages/download.md"
}
],
"totalFileWords": 263,
"eachFileWords": [
{
"fileInfo": {
"filePath": "/opt/build/repo/README.md",
"relativePath": "README.md"
},
"wordCount": 11,
"readingTime": "1m",
"frontmatter": {}
},
{
"fileInfo": {
"filePath": "/opt/build/repo/api-examples.md",
"relativePath": "api-examples.md"
},
"wordCount": 119,
"readingTime": "1m",
"frontmatter": {
"outline": "deep"
}
},
{
"fileInfo": {
"filePath": "/opt/build/repo/docs/getting-started.md",
"relativePath": "docs/getting-started.md"
},
"wordCount": 0,
"readingTime": "1m",
"frontmatter": {}
},
{
"fileInfo": {
"filePath": "/opt/build/repo/markdown-examples.md",
"relativePath": "markdown-examples.md"
},
"wordCount": 133,
"readingTime": "1m",
"frontmatter": {}
},
{
"fileInfo": {
"filePath": "/opt/build/repo/pages/download.md",
"relativePath": "pages/download.md"
},
"wordCount": 0,
"readingTime": "1m",
"frontmatter": {}
}
],
"lastCommitTime": "2025-11-30 13:07:16"
},
"catalogues": {
"arr": [],
"map": {},
"inv": {}
},
"posts": {
"allPosts": [
{
"url": "/README.html",
"relativePath": "/README.html",
"frontmatter": {},
"title": "SRA-CE-Websites",
"date": "2025-11-30 05:07:42",
"capture": "this is a test project for SRA-CE"
},
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"title": "Runtime API Examples",
"date": "2025-11-30 05:07:42",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe 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:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/getting-started.html",
"relativePath": "/docs/getting-started.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
},
{
"url": "/",
"relativePath": "/",
"frontmatter": {
"layout": "home",
"title": "StarRailAssistant Community Edition",
"titleTemplate": false,
"tk": {
"teekHome": false
},
"hero": {
"name": "StarRailAssistant",
"text": "Community Edition",
"tagline": "基于 Tauri + Vue 3 重构，更快、更轻、更现代",
"actions": [
{
"theme": "brand",
"text": "立即下载",
"link": "/markdown-examples"
},
{
"theme": "alt",
"text": "教程文档",
"link": "/api-examples"
}
],
"image": {
"src": "/SRAIcon.png",
"alt": "StarRailAssistant"
}
},
"features": [
{
"title": "轻量高效",
"icon": "⚡",
"details": "基于 Rust + Tauri 构建，前端体积仅约 10MB，内存占用低至 50MB，且无需安装.NET Runtime，告别臃肿，享受丝滑流畅的使用体验。"
},
{
"title": "实时反馈",
"icon": "📊",
"details": "完整的日志系统和状态监控，任务执行情况实时显示。支持日志过滤、导出和搜索，问题排查更高效。"
},
{
"title": "完全兼容",
"icon": "🔄",
"details": "完整保留 SRA 核心功能，支持所有原有配置和任务类型。无缝替换原前端，无需重新学习，开箱即用。"
}
]
},
"title": "StarRailAssistant Community Edition",
"date": "2025-11-30 05:07:42",
"capture": "<script setup lang=\"ts\"\nimport { onMounted } from \"vue\";\nimport { useData } from \"vitepress\";\nimport { readingIcon } from \"vitepress-theme-teek\"\nconst { frontmatter } = useData();\nonMounted(() => {\n const heroTextDom = document.querySelector<HTMLElement>(\".VPHero .text\");\n const textDo"
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"title": "Markdown Extension Examples",
"date": "2025-11-30 05:07:42",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/pages/download.html",
"relativePath": "/pages/download.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
}
],
"originPosts": [
{
"url": "/README.html",
"relativePath": "/README.html",
"frontmatter": {},
"title": "SRA-CE-Websites",
"date": "2025-11-30 05:07:42",
"capture": "this is a test project for SRA-CE"
},
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"title": "Runtime API Examples",
"date": "2025-11-30 05:07:42",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe 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:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/getting-started.html",
"relativePath": "/docs/getting-started.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"title": "Markdown Extension Examples",
"date": "2025-11-30 05:07:42",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/pages/download.html",
"relativePath": "/pages/download.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
}
],
"sortPostsByDateAndSticky": [
{
"url": "/README.html",
"relativePath": "/README.html",
"frontmatter": {},
"title": "SRA-CE-Websites",
"date": "2025-11-30 05:07:42",
"capture": "this is a test project for SRA-CE"
},
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"title": "Runtime API Examples",
"date": "2025-11-30 05:07:42",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe 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:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/getting-started.html",
"relativePath": "/docs/getting-started.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"title": "Markdown Extension Examples",
"date": "2025-11-30 05:07:42",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/pages/download.html",
"relativePath": "/pages/download.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
}
],
"sortPostsByDate": [
{
"url": "/README.html",
"relativePath": "/README.html",
"frontmatter": {},
"title": "SRA-CE-Websites",
"date": "2025-11-30 05:07:42",
"capture": "this is a test project for SRA-CE"
},
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"title": "Runtime API Examples",
"date": "2025-11-30 05:07:42",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe 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:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/getting-started.html",
"relativePath": "/docs/getting-started.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"title": "Markdown Extension Examples",
"date": "2025-11-30 05:07:42",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/pages/download.html",
"relativePath": "/pages/download.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
}
],
"groupPostsByYear": {
"2025 ": [
{
"url": "/README.html",
"relativePath": "/README.html",
"frontmatter": {},
"title": "SRA-CE-Websites",
"date": "2025-11-30 05:07:42",
"capture": "this is a test project for SRA-CE"
},
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"title": "Runtime API Examples",
"date": "2025-11-30 05:07:42",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe 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:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/getting-started.html",
"relativePath": "/docs/getting-started.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"title": "Markdown Extension Examples",
"date": "2025-11-30 05:07:42",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/pages/download.html",
"relativePath": "/pages/download.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
}
]
},
"groupPostsByYearMonth": {
"2025 ": {
"11": [
{
"url": "/README.html",
"relativePath": "/README.html",
"frontmatter": {},
"title": "SRA-CE-Websites",
"date": "2025-11-30 05:07:42",
"capture": "this is a test project for SRA-CE"
},
{
"url": "/api-examples.html",
"relativePath": "/api-examples.html",
"frontmatter": {
"outline": "deep"
},
"title": "Runtime API Examples",
"date": "2025-11-30 05:07:42",
"capture": "Runtime API Examples\nThis page demonstrates usage of some of the runtime APIs provided by VitePress.\nThe 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:\n```md\n<script setup\nimport { useData } from 'vitepress'\ncon"
},
{
"url": "/docs/getting-started.html",
"relativePath": "/docs/getting-started.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
},
{
"url": "/markdown-examples.html",
"relativePath": "/markdown-examples.html",
"frontmatter": {},
"title": "Markdown Extension Examples",
"date": "2025-11-30 05:07:42",
"capture": "This page demonstrates some of the built-in markdown extensions provided by VitePress.\n Syntax Highlighting\nVitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:\nInput\n````md\n```js{4}\nexport default {\n data () {\n return {\n msg: 'Highlighte"
},
{
"url": "/pages/download.html",
"relativePath": "/pages/download.html",
"frontmatter": {},
"title": "html",
"date": "2025-11-30 05:07:42",
"capture": ""
}
]
}
},
"groupPosts": {
"categories": {},
"tags": {}
},
"groupCards": {
"categories": [],
"tags": []
}
}
}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.