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": "Guide",
          "link": "/what-is-vanille"
        },
        {
          "text": "Recipes",
          "link": "/state-management"
        }
      ],
      "sidebar": [
        {
          "text": "Introduction",
          "items": [
            {
              "text": "What is vanille?",
              "link": "/what-is-vanille"
            },
            {
              "text": "Quick start",
              "link": "/quick-start"
            }
          ]
        },
        {
          "text": "Component",
          "items": [
            {
              "text": "Web components",
              "link": "/always-web-component"
            },
            {
              "text": "JSX",
              "link": "/jsx"
            },
            {
              "text": "Props",
              "link": "/props"
            },
            {
              "text": "State",
              "link": "/state"
            },
            {
              "text": "Events",
              "link": "/events"
            }
          ]
        },
        {
          "text": "Observables",
          "items": [
            {
              "text": "Observe everything",
              "link": "/observe-everything"
            }
          ]
        },
        {
          "text": "Routing",
          "items": [
            {
              "text": "Simple routes",
              "link": "/simple-routes"
            }
          ]
        },
        {
          "text": "Digging deeper",
          "items": [
            {
              "text": "Decorators",
              "link": "/decorators"
            }
          ]
        },
        {
          "text": "Recipes",
          "items": [
            {
              "text": "State management",
              "link": "/state-management"
            }
          ]
        }
      ],
      "socialLinks": [
        {
          "icon": "github",
          "link": "https://github.com/dannyYassine/vanille"
        }
      ],
      "footer": {
        "message": "Released under the MIT License.",
        "copyright": "Copyright © 2023-present Danny Yassine"
      }
    }

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