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
{
"aside": true,
"outline": {
"level": [
2,
3
],
"label": "On this page"
},
"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": "자바스크립트",
"collapsed": true,
"items": [
{
"text": "정규식(Regular Expression) 총정리",
"link": "/frontend/javascript/regular-expression"
},
{
"text": "ES Toolkit: 최신 자바스크립트 문법",
"link": "/frontend/javascript/es-toolkit"
},
{
"text": "자바스크립트 배열(Array) 메서드 정리",
"link": "/frontend/javascript/array-methods"
},
{
"text": "객체 복사: Structured Clone vs 기존 방식",
"link": "/frontend/javascript/structured-clone"
},
{
"text": "IndexedDB vs LocalStorage: 웹 스토리지 완벽 비교 가이드",
"link": "/frontend/javascript/indexeddb-vs-localstorage"
}
]
},
{
"text": "리액트(React)",
"collapsed": true,
"items": [
{
"text": "React IndexedDB 업로드 큐",
"link": "/frontend/react/indexeddb-upload-queue"
},
{
"text": "React 성능 최적화 쉽게 이해하기: useMemo, useCallback, React.memo",
"link": "/frontend/react/performance-optimization"
},
{
"text": "Kepware OPC UA 서버에서 React로 설비 데이터 실시간 모니터링하기",
"link": "/frontend/react/kepware-opcua-monitoring"
}
]
},
{
"text": "뷰(Vue)",
"collapsed": false,
"items": [
{
"text": "Vue Query에서 WebSocket으로: 실시간 동기화 문제 해결기",
"link": "/frontend/vue/vue-query-websocket-sync"
},
{
"text": "Vue dayjs 한국 KST 시간 변환",
"link": "/frontend/vue/dayjs-korea"
},
{
"text": "Vue VeeValidate 폼 유효성 검증",
"link": "/frontend/vue/vee-validate"
},
{
"text": "Vue 쿠키: 오늘 하루 보지 않기 팝업",
"link": "/frontend/vue/vue-cookie"
},
{
"text": "Quasar TailwindCSS 통합 가이드",
"link": "/frontend/vue/quasar-tailwind"
},
{
"text": "Vite + Quasar AOS 애니메이션 적용",
"link": "/frontend/vue/vite-quasar-aos"
},
{
"text": "Vue TailwindCSS 브랜드 컬러 적용",
"link": "/frontend/vue/tailwind-brand-color"
},
{
"text": "Vue 이벤트 핸들링 및 수정자",
"link": "/frontend/vue/vue-event"
},
{
"text": "Vue 코드 컨벤션 가이드",
"link": "/frontend/vue/vue-code-convention"
},
{
"text": "Vue 라이브러리 추천",
"link": "/frontend/vue/my-vue-library"
},
{
"text": "내가 VueJS를 사용하는 이유",
"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 설정",
"link": "/frontend/vite/proxy"
}
]
},
{
"text": "Next.js",
"collapsed": true,
"items": [
{
"text": "Next.js suppressHydrationWarning 에러 해결",
"link": "/frontend/nextjs/suppress-hydration-warning"
}
]
},
{
"text": "Chrome Extension",
"collapsed": true,
"items": [
{
"text": "Chrome Extension MV3에서 Google 로그인 구현기",
"link": "/frontend/chrome-extension/firebase-google-login-mv3"
}
]
}
]
},
{
"text": "백엔드(Firebase, NestJS 등)",
"items": [
{
"text": "Firebase 설치 및 프로젝트 시작",
"collapsed": true,
"items": [
{
"text": "Firebase 설치 가이드",
"link": "/backend/firebase/install-firebase"
}
]
},
{
"text": "NestJS 실전 가이드",
"collapsed": true,
"items": [
{
"text": "NestJS 장점과 사용 이유",
"link": "/backend/nestjs/my-nestjs"
},
{
"text": "NestJS Dev 무한 루프 문제 해결(윈도우)",
"link": "/backend/nestjs/nestjs-windows-startdev-loop-fix"
}
]
}
]
},
{
"text": "데이터베이스(SQL, PostgreSQL 등)",
"items": [
{
"text": "SQL 조회 데이터 수정/업데이트",
"link": "/database/update-in"
},
{
"text": "MySQL/MariaDB 한글 정렬(ORDER BY)",
"link": "/database/korean-sort"
}
]
},
{
"text": "Git",
"items": [
{
"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"
},
"headers": [],
"relativePath": "examples/api-examples.md",
"filePath": "examples/api-examples.md",
"lastUpdated": 1712293882000
}Page Frontmatter
{
"outline": "deep"
}More
Check out the documentation for the full list of runtime APIs.