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": "댓글 기능 구현하기",
"link": "/frontend/vitepress/vitepress-comment"
}
]
},
{
"text": "JavaScript",
"collapsed": true,
"items": [
{
"text": "정규식 한 번에 정리",
"link": "/frontend/javascript/regular-expression"
},
{
"text": "ES Toolkit 훑어보기",
"link": "/frontend/javascript/es-toolkit"
},
{
"text": "배열 메서드 정리",
"link": "/frontend/javascript/array-methods"
},
{
"text": "객체 복사, 뭐가 다를까?",
"link": "/frontend/javascript/structured-clone"
},
{
"text": "IndexedDB vs LocalStorage",
"link": "/frontend/javascript/indexeddb-vs-localstorage"
},
{
"text": "소수점 반올림 제대로 하기",
"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": "React",
"collapsed": true,
"items": [
{
"text": "IndexedDB 업로드 큐 만들기",
"link": "/frontend/react/indexeddb-upload-queue"
},
{
"text": "useMemo · useCallback · memo 차이",
"link": "/frontend/react/react-performance-optimization"
},
{
"text": "OPC UA 설비 데이터 모니터링",
"link": "/frontend/react/kepware-opcua-monitoring"
}
]
},
{
"text": "Vue",
"collapsed": false,
"items": [
{
"text": "폴링 → SSE → WebSocket 전환기",
"link": "/frontend/vue/vue-query-websocket-sync"
},
{
"text": "dayjs로 KST 시간 다루기",
"link": "/frontend/vue/dayjs-korea"
},
{
"text": "VeeValidate 폼 유효성 검증",
"link": "/frontend/vue/vee-validate"
},
{
"text": "오늘 하루 보지 않기 팝업",
"link": "/frontend/vue/vue-cookie"
},
{
"text": "Quasar + TailwindCSS 같이 쓰기",
"link": "/frontend/vue/quasar-tailwind"
},
{
"text": "AOS 애니메이션 적용하기",
"link": "/frontend/vue/vite-quasar-aos"
},
{
"text": "브랜드 컬러를 Tailwind에 넣는 법",
"link": "/frontend/vue/tailwind-brand-color"
},
{
"text": "이벤트 핸들링과 수정자",
"link": "/frontend/vue/vue-event"
},
{
"text": "코드 컨벤션 가이드",
"link": "/frontend/vue/vue-code-convention"
},
{
"text": "내가 쓰는 Vue 라이브러리",
"link": "/frontend/vue/my-vue-library"
},
{
"text": "내가 Vue를 쓰는 이유",
"link": "/frontend/vue/my-vue"
}
]
},
{
"text": "Vite",
"collapsed": true,
"items": [
{
"text": "Path Alias 설정하기",
"link": "/frontend/vite/vite-alias"
},
{
"text": "포트 바꾸는 법",
"link": "/frontend/vite/vite-port"
},
{
"text": "Proxy 설정하기",
"link": "/frontend/vite/proxy"
}
]
},
{
"text": "Next.js",
"collapsed": true,
"items": [
{
"text": "Hydration 경고 없애기",
"link": "/frontend/nextjs/suppress-hydration-warning"
}
]
},
{
"text": "Chrome Extension",
"collapsed": true,
"items": [
{
"text": "MV3에서 Google 로그인 구현",
"link": "/frontend/chrome-extension/firebase-google-login-mv3"
}
]
}
]
},
{
"text": "Backend",
"items": [
{
"text": "Supabase",
"collapsed": true,
"items": [
{
"text": "무료 플랜 자동 정지 막는 법",
"link": "/backend/supabase/supabase-keep-alive"
}
]
},
{
"text": "Firebase",
"collapsed": true,
"items": [
{
"text": "CLI 설치 가이드",
"link": "/backend/firebase/install-firebase"
}
]
},
{
"text": "NestJS",
"collapsed": true,
"items": [
{
"text": "내가 NestJS를 쓰는 이유",
"link": "/backend/nestjs/my-nestjs"
},
{
"text": "윈도우 무한 루프 문제 해결",
"link": "/backend/nestjs/nestjs-windows-startdev-loop-fix"
}
]
}
]
},
{
"text": "Database",
"items": [
{
"text": "조회한 데이터 바로 수정하기",
"link": "/database/update-in"
},
{
"text": "한글 정렬이 안 될 때",
"link": "/database/korean-sort"
}
]
},
{
"text": "Git",
"items": [
{
"text": "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.