Skip to content

# 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>

    <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 ​

    {
      "nav": [
        {
          "text": "Home",
          "link": "/"
        },
        {
          "text": "Examples",
          "link": "/markdown-examples"
        }
      ],
      "sidebar": [
        {
          "text": "Examples",
          "items": [
            {
              "text": "Markdown Examples",
              "link": "/markdown-examples"
            },
            {
              "text": "Runtime API Examples",
              "link": "/api-examples"
            }
          ]
        }
      ],
      "socialLinks": [
        {
          "icon": "github",
          "link": "https://github.com/vuejs/vitepress"
        }
      ]
    }

### Page Data ​

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

### Page Frontmatter ​

    {
      "outline": "deep"
    }

## More ​

Check out the documentation for the full list of runtime APIs.