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": "logo.svg",
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "Wiki",
      "link": "/design"
    }
  ],
  "sidebar": [
    {
      "text": "Main Wiki",
      "items": [
        {
          "text": "🎨 Design",
          "link": "/design"
        },
        {
          "text": "🛠️ Development",
          "link": "/development"
        },
        {
          "text": "📚 Miscellaneous",
          "link": "/miscellaneous"
        },
        {
          "text": "📜 Reference",
          "link": "/reference"
        }
      ]
    },
    {
      "text": "Side Kicks",
      "items": [
        {
          "text": "🎉 Fun",
          "link": "/fun"
        },
        {
          "text": "❓I might use it later",
          "link": "/maybe"
        },
        {
          "text": "⚔️ No Idea Why",
          "link": "/noidea"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/mandipadk/zinegarden"
    }
  ],
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2023 zine.garden"
  },
  "search": {
    "provider": "local"
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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

Markdown Extension Examples

This page demonstrates some of the built-in markdown extensions provided by VitePress.

Syntax Highlighting

VitePress provides Syntax Highlighting powered by Shikiji, with additional features like line-highlighting:

Input

```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

Output

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

Custom Containers

Input

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

Output

INFO

This is an info box.

TIP

This is a tip.

WARNING

This is a warning.

DANGER

This is a dangerous warning.

Details

This is a details block.

More

Check out the documentation for the full list of markdown extensions.