2024-12-19 17:56:05 +08:00
|
|
|
---
|
|
|
|
outline: deep
|
|
|
|
---
|
|
|
|
|
|
|
|
# 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
|
2025-03-13 00:54:19 +08:00
|
|
|
|
|
|
|
```bash
|
|
|
|
{{ theme }}
|
|
|
|
```
|
2024-12-19 17:56:05 +08:00
|
|
|
|
|
|
|
### Page Data
|
2025-03-13 00:54:19 +08:00
|
|
|
|
|
|
|
```bash
|
|
|
|
{{ page }}
|
|
|
|
```
|
2024-12-19 17:56:05 +08:00
|
|
|
|
|
|
|
### Page Frontmatter
|
2025-03-13 00:54:19 +08:00
|
|
|
|
|
|
|
```bash
|
|
|
|
{{ frontmatter }}
|
2024-12-19 17:56:05 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
import { useData } from 'vitepress'
|
|
|
|
|
|
|
|
const { site, theme, page, frontmatter } = useData()
|
|
|
|
</script>
|
|
|
|
|
|
|
|
## Results
|
|
|
|
|
|
|
|
### Theme Data
|
2025-03-13 00:54:19 +08:00
|
|
|
|
|
|
|
|
|
|
|
```sh-vue
|
|
|
|
{{ theme }}
|
|
|
|
```
|
2024-12-19 17:56:05 +08:00
|
|
|
|
|
|
|
### Page Data
|
2025-03-13 00:54:19 +08:00
|
|
|
```json-vue
|
|
|
|
{{ page }}
|
|
|
|
```
|
2024-12-19 17:56:05 +08:00
|
|
|
|
|
|
|
### Page Frontmatter
|
2025-03-13 00:54:19 +08:00
|
|
|
```json-vue
|
|
|
|
{{ frontmatter }}
|
|
|
|
```
|
2024-12-19 17:56:05 +08:00
|
|
|
|
|
|
|
## More
|
|
|
|
|
|
|
|
Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
|