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": "/favicon.ico",
"nav": [
{
"text": "Home",
"link": "/"
},
{
"text": "Docs",
"items": [
{
"text": "Web Development",
"items": [
{
"text": "VitePress",
"link": "/Docs/Web development/VitePress/markdown-examples"
}
]
},
{
"text": "Server Side",
"items": [
{
"text": "CLI Cheatsheets",
"link": "/Docs/Server Side/CLI Cheatsheets/debian-cli"
},
{
"text": "Deployment",
"link": "/Docs/Server Side/Deployment/20240703-git-deploy"
},
{
"text": "Node.Js",
"link": "/Docs/Server Side/Node.Js/node-mysql"
}
]
},
{
"text": "GIS",
"link": "/Docs/GIS/PostgreSQL/postgresql-basics"
},
{
"text": "Intern",
"link": "/Docs/Intern/internship-info"
}
]
},
{
"text": "Fun",
"items": [
{
"text": "Bangumi",
"link": "/Fun/Bangumi/bangumi-rec"
},
{
"text": "StarCraft 2",
"link": "/Fun/StarCraft2/Learning"
}
]
},
{
"text": "Personal",
"link": "/Personal/diary"
},
{
"text": "Links",
"items": [
{
"text": "Homepage",
"link": "https://937745389.xyz/"
},
{
"text": "VitePress Guide",
"link": "https://vitepress.dev/zh/guide/what-is-vitepress"
}
]
}
],
"footer": {
"message": "Credit @Wayne19980"
},
"lastUpdated": {
"text": "Updated at",
"formatOptions": {
"dateStyle": "full",
"timeStyle": "medium"
}
},
"search": {
"provider": "local"
},
"socialLinks": [
{
"icon": "twitter",
"link": "https://twitter.com/Wayne19980"
},
{
"icon": "github",
"link": "https://github.com/wayne19980"
}
],
"editLink": {
"pattern": "https://github.com/wayne19980/Wayne-VitePressDocs/tree/master/docs/:path"
},
"sidebar": {
"/Docs/": {
"base": "/Docs/",
"items": [
{
"text": "Applications, Tools & Setups",
"link": "tools"
},
{
"text": "GIS",
"items": [
{
"text": "File Processing",
"items": [
{
"text": "GeoJSON与GeoBuf的压缩解码",
"link": "GIS/File Processing/geojson-to-geobuf"
}
],
"collapsed": true
},
{
"text": "INSAR",
"items": [
{
"text": "1. 使用 Aria2 批量下载 Sentinel 1 数据",
"link": "GIS/INSAR/get-s1-through-aria2"
}
],
"collapsed": true
},
{
"text": "PostgreSQL",
"items": [
{
"text": "How to Configure PostgreSQL on Windows for Remote Access",
"link": "GIS/PostgreSQL/postgresql-win-remote-access"
},
{
"text": "PostgreSQL basics",
"link": "GIS/PostgreSQL/postgresql-basics"
}
],
"collapsed": true
},
{
"text": "QGIS",
"items": [
{
"text": "BlenderGIS: Vector to 3DModel",
"link": "GIS/QGIS/vector2model"
},
{
"text": "Connect to MySQL Database",
"link": "GIS/QGIS/mysql-connection"
},
{
"text": "Field Calculator",
"link": "GIS/QGIS/field-calculator"
},
{
"text": "QGIS 生产道路数据",
"link": "GIS/QGIS/qgis-highway-data-production"
},
{
"text": "QGIS: GDAL2Tiles",
"link": "GIS/QGIS/gdal2tiles"
},
{
"text": "QGIS: Mileage Plugin",
"link": "GIS/QGIS/plugin-dev-mileage"
},
{
"text": "QGIS: Plugin development setup",
"link": "GIS/QGIS/plugin-dev-setup"
},
{
"text": "QGIS: Plugin Fix - BecaGIS",
"link": "GIS/QGIS/plugin-fix-becagis"
}
],
"collapsed": true
}
],
"collapsed": false
},
{
"text": "Intern",
"items": [
{
"text": "城建信息-智能运管中心实习基本信息",
"link": "Intern/internship-info"
},
{
"text": "实用信息",
"link": "Intern/internship-info-at-work"
},
{
"text": "OM",
"items": [
{
"text": "AI 在实施工作中的应用总结",
"link": "Intern/OM/AI_Collaboration_Practice_Report"
},
{
"text": "OM4.0 工作记录",
"link": "Intern/OM/om4"
},
{
"text": "设施基础数据实施步骤说明文档",
"link": "Intern/OM/project-coor"
}
],
"collapsed": true
},
{
"text": "References",
"items": [
{
"text": "10 Important Qualities of an Effective Intern",
"link": "Intern/References/intern-qualities-2"
},
{
"text": "20 Warning Signs of a Bad Internship",
"link": "Intern/References/bad-internships"
},
{
"text": "TOP 10 qualities of an effective intern",
"link": "Intern/References/intern-qualities-1"
}
],
"collapsed": true
},
{
"text": "Training",
"items": [
{
"text": "BS系统及实施运维科普",
"link": "Intern/Training/devOpsOverall"
},
{
"text": "MySQL入门",
"link": "Intern/Training/mysql"
},
{
"text": "QGIS入门",
"link": "Intern/Training/qgis"
},
{
"text": "帆软报表入门",
"link": "Intern/Training/fanruan"
},
{
"text": "codeacademy",
"items": [
{
"text": "HTTP Requests",
"link": "Intern/Training/codeacademy/httprequests"
},
{
"text": "Setting Up Postman",
"link": "Intern/Training/codeacademy/postmansetup"
},
{
"text": "What is a Database? Complete Guide",
"link": "Intern/Training/codeacademy/whatisdatabase"
},
{
"text": "What is a Single Page Application (SPA)?",
"link": "Intern/Training/codeacademy/spa"
},
{
"text": "What is a Web Application? Complete Guide to Web Apps",
"link": "Intern/Training/codeacademy/webapp"
},
{
"text": "What is Back-End Architecture?",
"link": "Intern/Training/codeacademy/backendarchi"
},
{
"text": "What is CRUD? Explained",
"link": "Intern/Training/codeacademy/crud"
}
],
"collapsed": true
}
],
"collapsed": true
}
],
"collapsed": false
},
{
"text": "Server Side",
"items": [
{
"text": "CLI Cheatsheets",
"items": [
{
"text": "Debian CLI",
"link": "Server Side/CLI Cheatsheets/debian-cli"
},
{
"text": "ffmpeg",
"link": "Server Side/CLI Cheatsheets/ffmpeg"
}
],
"collapsed": true
},
{
"text": "Deployment",
"items": [
{
"text": "Auto-Deploy Frontend Project",
"link": "Server Side/Deployment/auto-deploy-front-end"
},
{
"text": "Nginx 访问控制 (Basic Auth) 设置备忘",
"link": "Server Side/Deployment/nginx-auth-setup"
},
{
"text": "STEC-deployment",
"link": "Server Side/Deployment/stec-components"
},
{
"text": "如何在 Linux 系统上拉取 GitHub 项目",
"link": "Server Side/Deployment/20240703-git-deploy"
}
],
"collapsed": true
},
{
"text": "Node.Js",
"items": [
{
"text": "Import and Export Styles in Node.js",
"link": "Server Side/Node.Js/import-export-styles"
},
{
"text": "Node.js MySQL",
"link": "Server Side/Node.Js/node-mysql"
},
{
"text": "Updating NPM Dependencies",
"link": "Server Side/Node.Js/npm-update"
},
{
"text": "Using Modules",
"link": "Server Side/Node.Js/using-modules"
}
],
"collapsed": true
}
],
"collapsed": false
},
{
"text": "Web development",
"items": [
{
"text": "VitePress",
"items": [
{
"text": "Markdown Cheat Sheet",
"link": "Web development/VitePress/markdown-cheat-sheet"
},
{
"text": "Markdown Extension Examples",
"link": "Web development/VitePress/markdown-examples"
},
{
"text": "Runtime API Examples",
"link": "Web development/VitePress/api-examples"
},
{
"text": "Wayne's Docs Site Roadmap",
"link": "Web development/VitePress/roadmap"
}
],
"collapsed": true
}
],
"collapsed": false
}
]
},
"/Fun/": {
"base": "/Fun/",
"items": [
{
"text": "Oh Cook!",
"link": "oh-cook"
},
{
"text": "Sports Streams & Info",
"link": "sports-stream"
},
{
"text": "Bangumi",
"items": [
{
"text": "2024-04",
"link": "Bangumi/2024-04"
},
{
"text": "2024-07",
"link": "Bangumi/2024-07"
},
{
"text": "2024-10",
"link": "Bangumi/2024-10"
},
{
"text": "2025-01",
"link": "Bangumi/2025-01"
},
{
"text": "2025-04",
"link": "Bangumi/2025-04"
},
{
"text": "2025-07",
"link": "Bangumi/2025-07"
},
{
"text": "二次元向安利列表",
"link": "Bangumi/bangumi-rec"
}
],
"collapsed": false
},
{
"text": "Game Setups",
"items": [
{
"text": "EA Games",
"link": "Game Setups/origin-games"
}
],
"collapsed": false
},
{
"text": "StarCraft2",
"items": [
{
"text": "Build Orders",
"link": "StarCraft2/build-orders"
},
{
"text": "Learning SC2",
"link": "StarCraft2/Learning"
},
{
"text": "Match Record",
"link": "StarCraft2/match-record"
},
{
"text": "给Buqun的套餐",
"link": "StarCraft2/vs-buqun"
}
],
"collapsed": false
}
]
},
"/Personal/": {
"base": "/Personal/",
"items": [
{
"text": "2024第四季度工作总结会",
"link": "2024-winter-work-summary"
},
{
"text": "Diary",
"link": "diary"
},
{
"text": "Home",
"link": "home"
},
{
"text": "Personal To-dos",
"link": "to-dos"
},
{
"text": "Room planning",
"link": "room-planning"
},
{
"text": "入门",
"link": "draft-intern-intro"
},
{
"text": "Reading",
"items": [
{
"text": "爱的刻意练习",
"link": "Reading/爱的刻意练习"
}
],
"collapsed": false
},
{
"text": "Travel",
"items": [
{
"text": "Japan Travel",
"link": "Travel/japan-travel-log"
},
{
"text": "Japan Travel Plan",
"link": "Travel/japan-travel"
},
{
"text": "Luggages List",
"link": "Travel/travel"
},
{
"text": "Thai Travel",
"link": "Travel/thai-travel"
}
],
"collapsed": false
},
{
"text": "Work",
"items": [
{
"text": "Big-Screen-MyBatis 项目说明与启动指南",
"link": "Work/bigscreen-mybatis-readme"
},
{
"text": "bigScreen-mybatis 部署指南",
"link": "Work/bigscreen-mybatis-deploy"
},
{
"text": "片区柯桥项目连接方式",
"link": "Work/bigscreen-keqiao-connection"
}
],
"collapsed": false
},
{
"text": "软考",
"items": [
{
"text": "Know-What",
"link": "软考/know-what"
},
{
"text": "案例题",
"link": "软考/analyse"
},
{
"text": "软考知识点",
"link": "软考/pm-notes"
},
{
"text": "项目管理",
"link": "软考/pm"
}
],
"collapsed": false
}
]
}
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep"
},
"headers": [],
"relativePath": "Docs/Web development/VitePress/api-examples.md",
"filePath": "Docs/Web development/VitePress/api-examples.md",
"lastUpdated": 1780734128000
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.