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

{
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "Tags",
      "link": "/tags"
    },
    {
      "text": "Playground",
      "link": "/playground"
    },
    {
      "text": "Examples",
      "link": "/example/markdown-examples"
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/shockzinfinity/shockzinfinity.github.io"
    }
  ],
  "search": {
    "provider": "local",
    "options": {
      "detailedView": true
    }
  },
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2025-present shockz"
  },
  "sidebar": [
    {
      "text": "Dev-log",
      "items": [
        {
          "text": "Docker",
          "link": "/dev-log/docker"
        },
        {
          "text": "Efcore",
          "link": "/dev-log/efcore"
        },
        {
          "text": "Forkapp",
          "link": "/dev-log/forkapp"
        },
        {
          "text": "Github",
          "link": "/dev-log/github"
        },
        {
          "text": "Jenv",
          "link": "/dev-log/jenv"
        },
        {
          "text": "Konva",
          "link": "/dev-log/konva"
        },
        {
          "text": "Kubernetes",
          "link": "/dev-log/kubernetes"
        },
        {
          "text": "Linux",
          "link": "/dev-log/linux"
        },
        {
          "text": "Maria",
          "link": "/dev-log/maria"
        },
        {
          "text": "Mssql",
          "link": "/dev-log/mssql"
        },
        {
          "text": "Nginx",
          "link": "/dev-log/nginx"
        },
        {
          "text": "Npm",
          "link": "/dev-log/npm"
        },
        {
          "text": "Nvm",
          "link": "/dev-log/nvm"
        },
        {
          "text": "Path-polisher",
          "link": "/dev-log/path-polisher"
        },
        {
          "text": "Pnpm",
          "link": "/dev-log/pnpm"
        },
        {
          "text": "Podman",
          "link": "/dev-log/podman"
        },
        {
          "text": "Postgresql",
          "link": "/dev-log/postgresql"
        },
        {
          "text": "Seq",
          "link": "/dev-log/seq"
        },
        {
          "text": "Ssl",
          "link": "/dev-log/ssl"
        },
        {
          "text": "Synology",
          "link": "/dev-log/synology"
        },
        {
          "text": "Uv",
          "link": "/dev-log/uv"
        }
      ],
      "collapsed": false
    },
    {
      "text": "Etc",
      "items": [
        {
          "text": "DevEnv",
          "link": "/etc/devEnv"
        },
        {
          "text": "IPad",
          "link": "/etc/iPad"
        },
        {
          "text": "Mac-etc",
          "link": "/etc/mac-etc"
        },
        {
          "text": "Markdown",
          "link": "/etc/markdown"
        },
        {
          "text": "Tools",
          "link": "/etc/tools"
        },
        {
          "text": "Vscode-debugging",
          "link": "/etc/vscode-debugging"
        },
        {
          "text": "Vscode",
          "link": "/etc/vscode"
        },
        {
          "text": "Windows",
          "link": "/etc/windows"
        }
      ],
      "collapsed": false
    },
    {
      "text": "Game",
      "items": [
        {
          "text": "ReplacedFarmer",
          "link": "/game/replacedFarmer"
        }
      ],
      "collapsed": false
    },
    {
      "text": "Tutorials",
      "items": [
        {
          "text": "Auth",
          "link": "/tutorials/auth/auth"
        },
        {
          "text": "Geolocation",
          "link": "/tutorials/geolocation/geolocation"
        },
        {
          "text": "Todo",
          "items": [
            {
              "text": "README",
              "link": "/tutorials/todo/README"
            },
            {
              "text": "Todoapp.1",
              "link": "/tutorials/todo/todoapp.1"
            },
            {
              "text": "Todoapp.2",
              "link": "/tutorials/todo/todoapp.2"
            },
            {
              "text": "Todoapp.3",
              "link": "/tutorials/todo/todoapp.3"
            },
            {
              "text": "Todoapp.4",
              "link": "/tutorials/todo/todoapp.4"
            }
          ],
          "collapsed": false
        }
      ],
      "collapsed": false
    }
  ]
}

Page Data

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

Page Frontmatter

{
  "outline": "deep",
  "created": "2025-10-20",
  "updated": "2025-10-20"
}

More

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