Results

Theme Data

{
  "nav": [
    {
      "text": "指南",
      "link": "/guide/design"
    },
    {
      "text": "组件",
      "link": "/components/button"
    }
  ],
  "footer": {
    "message": "联系邮箱: scliuyilin@163.com"
  },
  "sidebar": {
    "/guide/": [
      {
        "text": "指南",
        "items": [
          {
            "text": "快速开始",
            "link": "/guide/quick-start"
          }
        ]
      }
    ],
    "/components/": [
      {
        "text": "组件",
        "items": [
          {
            "text": "按钮",
            "link": "/components/button"
          },
          {
            "text": "色彩",
            "link": "/components/color"
          },
          {
            "text": "边框",
            "link": "/components/border"
          },
          {
            "text": "布局",
            "link": "/components/layout"
          }
        ]
      }
    ]
  },
  "outline": {
    "label": "页面导航"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/ALiuYiLin/whale-ui"
    }
  ]
}

Page Data

{
  "title": "",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md"
}

Page Frontmatter

{
  "outline": "deep"
}

<script setup>
import { useData } from 'vitepress'
import ButtonBasic from './examples/button/basic.vue'

const { site, theme, page, frontmatter } = useData()
</script>

# 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


## Results

### Theme Data
<pre>{{ theme }}</pre>

### Page Data
<pre>{{ page }}</pre>

### Page Frontmatter
<pre>{{ frontmatter }}</pre>

## More

Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
## Test
<ButtonBasic></ButtonBasic>