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:

<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

{
  "logo": "/LMH_element-Gul.png",
  "outlineTitle": "På denne side",
  "returnToTopLabel": "Til toppen",
  "docFooter": {
    "prev": "Forrige side",
    "next": "Næste side"
  },
  "nav": [
    {
      "text": "Hjem",
      "link": "/"
    },
    {
      "text": "Generelt",
      "items": [
        {
          "text": "Forsiden",
          "link": "/generelt/"
        },
        {
          "text": "Side 2",
          "link": "/generelt/side2"
        },
        {
          "text": "Side 3 i json",
          "link": "/generelt/side3"
        }
      ],
      "activeMatch": "/generelt/"
    },
    {
      "text": "Detail",
      "items": [
        {
          "text": "Forsiden",
          "link": "/detail/"
        },
        {
          "text": "Side 2",
          "link": "/detail/side2"
        },
        {
          "text": "Side 3 rettet i json",
          "link": "/detail/side3"
        },
        {
          "text": "Side 4 tilføjet",
          "link": "/detail/side4"
        }
      ],
      "activeMatch": "/detail/"
    },
    {
      "text": "Handel",
      "items": [
        {
          "text": "Forsiden",
          "link": "/handel/"
        },
        {
          "text": "Side 2",
          "link": "/handel/side2"
        },
        {
          "text": "Side 3 rettet i json",
          "link": "/handel/side3"
        },
        {
          "text": "Side 4 tilføjet",
          "link": "/handel/side4"
        }
      ],
      "activeMatch": "/handel/"
    },
    {
      "text": "Kontor",
      "items": [
        {
          "text": "Forsiden",
          "link": "/kontor/"
        },
        {
          "text": "Side 2",
          "link": "/kontor/side2"
        },
        {
          "text": "Side 3 rettet i json",
          "link": "/kontor/side3"
        },
        {
          "text": "Side 4 tilføjet",
          "link": "/kontor/side4"
        }
      ],
      "activeMatch": "/kontor/"
    },
    {
      "text": "Event",
      "items": [
        {
          "text": "Forsiden",
          "link": "/event/"
        },
        {
          "text": "Side 2",
          "link": "/event/side2"
        },
        {
          "text": "Side 3 rettet i json",
          "link": "/event/side3"
        },
        {
          "text": "Side 4 tilføjet",
          "link": "/event/side4"
        }
      ],
      "activeMatch": "/event/"
    },
    {
      "text": "Examples",
      "link": "/examples/markdown-examples",
      "activeMatch": "/examples/"
    }
  ],
  "sidebar": {
    "/examples/": {
      "text": "Examples",
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/examples/markdown-examples"
        },
        {
          "text": "Markdown Ekstra",
          "link": "/examples/markdown-ekstra"
        },
        {
          "text": "Runtime API Examples",
          "link": "/examples/api-examples"
        }
      ]
    },
    "/generelt/": [
      {
        "text": "generelt",
        "items": [
          {
            "text": "Forsiden",
            "link": "/generelt/"
          },
          {
            "text": "Side 2",
            "link": "/generelt/side2"
          },
          {
            "text": "Side 3 i json",
            "link": "/generelt/side3"
          }
        ]
      }
    ],
    "/detail/": [
      {
        "text": "Detail",
        "items": [
          {
            "text": "Forsiden",
            "link": "/detail/"
          },
          {
            "text": "Side 2",
            "link": "/detail/side2"
          },
          {
            "text": "Side 3 rettet i json",
            "link": "/detail/side3"
          },
          {
            "text": "Side 4 tilføjet",
            "link": "/detail/side4"
          }
        ]
      }
    ],
    "/handel/": [
      {
        "text": "Handel",
        "items": [
          {
            "text": "Forsiden",
            "link": "/handel/"
          },
          {
            "text": "Side 2",
            "link": "/handel/side2"
          },
          {
            "text": "Side 3 rettet i json",
            "link": "/handel/side3"
          },
          {
            "text": "Side 4 tilføjet",
            "link": "/handel/side4"
          }
        ]
      }
    ],
    "/kontor/": [
      {
        "text": "Kontor",
        "items": [
          {
            "text": "Forsiden",
            "link": "/kontor/"
          },
          {
            "text": "Side 2",
            "link": "/kontor/side2"
          },
          {
            "text": "Side 3 rettet i json",
            "link": "/kontor/side3"
          },
          {
            "text": "Side 4 tilføjet",
            "link": "/kontor/side4"
          }
        ]
      }
    ],
    "/event/": [
      {
        "text": "Event",
        "items": [
          {
            "text": "Forsiden",
            "link": "/event/"
          },
          {
            "text": "Side 2",
            "link": "/event/side2"
          },
          {
            "text": "Side 3 rettet i json",
            "link": "/event/side3"
          },
          {
            "text": "Side 4 tilføjet",
            "link": "/event/side4"
          }
        ]
      }
    ]
  },
  "socialLinks": []
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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