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.svg",
"aside": true,
"outline": {
"level": [
2,
3
],
"label": "목차"
},
"search": {
"provider": "local"
},
"nav": [
{
"text": "Home",
"link": "/"
},
{
"text": "About",
"link": "/introduce/my-develop",
"activeMatch": "/introduce/my-develop"
},
{
"text": "Examples",
"link": "/examples/markdown-examples"
}
],
"sidebar": [
{
"text": "Introduction",
"collapsed": false,
"items": [
{
"text": "왜 개발자가 되었나요?",
"link": "/introduce/my-develop"
},
{
"text": "이력서",
"link": "/introduce/careers"
}
]
},
{
"text": "Frontend",
"items": [
{
"text": "VitePress",
"collapsed": true,
"items": [
{
"text": "VitePress 댓글 기능 추가",
"link": "/frontend/vitepress/vitepress-comment"
}
]
},
{
"text": "JavaScript",
"collapsed": true,
"items": [
{
"text": "JavaScript 정규식(RegExp) 완전 정리",
"link": "/frontend/javascript/regular-expression"
},
{
"text": "es-toolkit 완전 정리",
"link": "/frontend/javascript/es-toolkit"
},
{
"text": "JavaScript 배열 메서드 완전 정리",
"link": "/frontend/javascript/array-methods"
},
{
"text": "JavaScript structuredClone 완전 정리",
"link": "/frontend/javascript/structured-clone"
},
{
"text": "IndexedDB vs LocalStorage 차이점 완전 비교",
"link": "/frontend/javascript/indexeddb-vs-localstorage"
},
{
"text": "JavaScript 소수점 반올림 버그 해결",
"link": "/frontend/javascript/javascript-rounding"
}
]
},
{
"text": "AG Grid",
"collapsed": true,
"items": [
{
"text": "v21 → v35 마이그레이션",
"link": "/frontend/react/ag-grid-v21-to-v35-migration"
},
{
"text": "공통 래퍼 설계 (Client / Server)",
"link": "/frontend/react/ag-grid-v35-wrapper-design"
},
{
"text": "Drawer + URL 상태 동기화",
"link": "/frontend/react/ag-grid-drawer-url-sync"
},
{
"text": "Tooltip 사용법",
"link": "/frontend/react/ag-grid-tooltip"
}
]
},
{
"text": "React",
"collapsed": true,
"items": [
{
"text": "React + IndexedDB 파일 업로드 큐 구현",
"link": "/frontend/react/indexeddb-upload-queue"
},
{
"text": "React useMemo · useCallback · memo 차이",
"link": "/frontend/react/react-performance-optimization"
},
{
"text": "Kepware OPC UA + React 실시간 모니터링",
"link": "/frontend/react/kepware-opcua-monitoring"
},
{
"text": "nuqs URL 쿼리 파라미터 상태 관리",
"link": "/frontend/react/nuqs-url-state"
}
]
},
{
"text": "Vue",
"collapsed": false,
"items": [
{
"text": "Vue 실시간 동기화",
"link": "/frontend/vue/vue-query-websocket-sync"
},
{
"text": "Vue + dayjs KST 한국 시간 설정 완전 가이드",
"link": "/frontend/vue/dayjs-korea"
},
{
"text": "VeeValidate + yup으로 Vue 폼 유효성 검증 완전 정리",
"link": "/frontend/vue/vee-validate"
},
{
"text": "Vue \"오늘 하루 보지 않기\" 팝업 구현",
"link": "/frontend/vue/vue-cookie"
},
{
"text": "Quasar + TailwindCSS 함께 사용하기",
"link": "/frontend/vue/quasar-tailwind"
},
{
"text": "Vue Quasar + AOS 스크롤 애니메이션 적용",
"link": "/frontend/vue/vite-quasar-aos"
},
{
"text": "Tailwind CSS 커스텀 색상(브랜드 컬러) 추가하기",
"link": "/frontend/vue/tailwind-brand-color"
},
{
"text": "Vue 이벤트 핸들링 완전 정리",
"link": "/frontend/vue/vue-event"
},
{
"text": "Vue Composition API 코드 컨벤션 가이드",
"link": "/frontend/vue/vue-code-convention"
},
{
"text": "Vue 필수 라이브러리 모음",
"link": "/frontend/vue/my-vue-library"
},
{
"text": "Vue vs React",
"link": "/frontend/vue/my-vue"
}
]
},
{
"text": "Vite",
"collapsed": true,
"items": [
{
"text": "Vite Path Alias(@) 설정",
"link": "/frontend/vite/vite-alias"
},
{
"text": "Vite 개발 서버 포트 변경하는 법",
"link": "/frontend/vite/vite-port"
},
{
"text": "Vite proxy 설정으로 CORS 해결하기",
"link": "/frontend/vite/proxy"
}
]
},
{
"text": "Next.js",
"collapsed": true,
"items": [
{
"text": "Next.js Hydration 에러 해결",
"link": "/frontend/nextjs/suppress-hydration-warning"
}
]
},
{
"text": "Chrome Extension",
"collapsed": true,
"items": [
{
"text": "MV3 Firebase Google 로그인 — React 연동 가이드",
"link": "/frontend/chrome-extension/firebase-google-login-mv3"
}
]
}
]
},
{
"text": "Backend",
"items": [
{
"text": "Supabase",
"collapsed": true,
"items": [
{
"text": "Supabase 무료 플랜 자동 정지 방지",
"link": "/backend/supabase/supabase-keep-alive"
}
]
},
{
"text": "Firebase",
"collapsed": true,
"items": [
{
"text": "Firebase CLI 설치 가이드",
"link": "/backend/firebase/install-firebase"
}
]
},
{
"text": "NestJS",
"collapsed": true,
"items": [
{
"text": "NestJS vs Express",
"link": "/backend/nestjs/my-nestjs"
},
{
"text": "NestJS start:dev 무한 루프 해결",
"link": "/backend/nestjs/nestjs-windows-startdev-loop-fix"
}
]
}
]
},
{
"text": "Database",
"items": [
{
"text": "Oracle SQL 완전 가이드",
"link": "/database/oracle-sql-guide"
},
{
"text": "SQL UPDATE WHERE IN",
"link": "/database/update-in"
},
{
"text": "SQL 한글 ORDER BY 정렬 오류 해결",
"link": "/database/korean-sort"
}
]
},
{
"text": "Tools",
"items": [
{
"text": "IntelliJ",
"collapsed": true,
"items": [
{
"text": "개발이 편해지는 플러그인 추천 (2026)",
"link": "/tools/intellij/intellij-plugins"
}
]
}
]
},
{
"text": "Git",
"items": [
{
"text": "Git 완전 가이드",
"link": "/git/git-complete-guide"
},
{
"text": "GitHub README 잘 쓰는 법",
"link": "/git/github-readme"
}
]
},
{
"text": "Examples",
"collapsed": true,
"items": [
{
"text": "Markdown Examples",
"link": "/examples/markdown-examples"
},
{
"text": "Runtime API Examples",
"link": "/examples/api-examples"
}
]
}
],
"socialLinks": [
{
"icon": "github",
"link": "https://github.com/raincoat98/vitepress"
}
],
"footer": {
"message": "MIT 라이선스에 따라 릴리즈되었습니다.",
"copyright": "저작권 © 2024-현재 SangWook Woo"
}
}Page Data
{
"title": "Runtime API Examples",
"description": "",
"frontmatter": {
"outline": "deep",
"charCount": 884
},
"headers": [],
"relativePath": "examples/api-examples.md",
"filePath": "examples/api-examples.md",
"lastUpdated": 1712293882000
}Page Frontmatter
{
"outline": "deep",
"charCount": 884
}More
Check out the documentation for the full list of runtime APIs.