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": "首页",
      "link": "/"
    },
    {
      "text": "前端",
      "items": [
        {
          "text": "基础",
          "items": [
            {
              "text": "javascript",
              "link": "/web/basic/js"
            },
            {
              "text": "css",
              "link": "/web/basic/css"
            }
          ]
        },
        {
          "text": "框架",
          "items": [
            {
              "text": "vue",
              "link": "/web/vue/vue3"
            },
            {
              "text": "react",
              "link": "/web/react/index"
            }
          ]
        },
        {
          "text": "手写代码",
          "link": "/web/write"
        },
        {
          "text": "Typescript",
          "link": "/web/Typescript"
        },
        {
          "text": "浏览器",
          "items": [
            {
              "text": "Chrome",
              "link": "/web/chrom/index"
            }
          ]
        },
        {
          "text": "设计模式",
          "link": "/web/design"
        }
      ]
    },
    {
      "text": "算法",
      "link": "/algorithm/index"
    },
    {
      "text": "后端",
      "items": [
        {
          "text": "Rust",
          "items": [
            {
              "text": "rust 入门",
              "link": "/server/rust/index"
            }
          ]
        },
        {
          "text": "nest",
          "items": [
            {
              "text": "nest 入门",
              "link": "/server/nest/index"
            }
          ]
        },
        {
          "text": "Kafka",
          "link": "/server/kafka"
        }
      ]
    },
    {
      "text": "部署",
      "link": "/deploy/index"
    },
    {
      "text": "数据库",
      "link": "//ccc"
    },
    {
      "text": "计算机网络",
      "items": [
        {
          "text": "CURL",
          "link": "/network/curl"
        },
        {
          "text": "DNS",
          "link": "/network/dns"
        },
        {
          "text": "HTTPS",
          "link": "/network/https"
        },
        {
          "text": "TCP",
          "link": "/network/tcp"
        },
        {
          "text": "WEBRTC",
          "link": "/network/webrtc"
        }
      ]
    },
    {
      "text": "分享",
      "link": "/webintro"
    },
    {
      "text": "About",
      "link": "/about"
    }
  ],
  "sidebar": {
    "/exaple": [
      {
        "text": "Examples",
        "items": [
          {
            "text": "Markdown Examples",
            "link": "/markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "/api-examples"
          }
        ]
      }
    ],
    "/web/": [
      {
        "text": "基础",
        "items": [
          {
            "text": "javascript",
            "link": "/web/basic/js"
          },
          {
            "text": "css",
            "link": "/web/basic/css"
          }
        ]
      },
      {
        "text": "框架",
        "items": [
          {
            "text": "vue",
            "link": "/web/vue/vue3",
            "items": [
              {
                "text": "vue3",
                "link": "/web/vue/vue3"
              }
            ]
          },
          {
            "text": "react",
            "link": "/web/react/index",
            "items": [
              {
                "text": "guide",
                "link": "/web/react/index"
              },
              {
                "text": "hooks",
                "link": "/web/react/hooks"
              }
            ]
          }
        ]
      },
      {
        "text": "Typescript",
        "link": "/web/Typescript"
      },
      {
        "text": "手写代码",
        "link": "/web/write"
      },
      {
        "text": "浏览器",
        "items": [
          {
            "text": "Chrom",
            "link": "/web/chrom/index"
          },
          {
            "text": "Chrom 插件",
            "link": "/web/chrom/plug"
          }
        ]
      }
    ],
    "/algorithm/": [
      {
        "text": "首页",
        "link": "/algorithm/index"
      },
      {
        "text": "链表",
        "link": "/algorithm/链表"
      },
      {
        "text": "树",
        "link": "/algorithm/树"
      },
      {
        "text": "双指针",
        "link": "/algorithm/双指针"
      },
      {
        "text": "动态规划",
        "link": "/algorithm/动态规划"
      }
    ],
    "/deploy/": [
      {
        "text": "概览",
        "link": "/deploy/index"
      },
      {
        "text": "docker",
        "link": "/deploy/docker"
      },
      {
        "text": "k8s",
        "link": "/deploy/k8s"
      },
      {
        "text": "nginx",
        "link": "/deploy/nginx"
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2023-present wxs"
  },
  "lastUpdatedText": "Updated Date"
}

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.