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>

<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": "资源库",
      "link": "/articles/library/"
    },
    {
      "text": "50 projects",
      "link": "/articles/50projects50days/"
    },
    {
      "text": "Examples",
      "link": "/examples/markdown-examples"
    }
  ],
  "sidebar": {
    "/examples/": [
      {
        "base": "/examples/",
        "text": "Examples",
        "items": [
          {
            "text": "Markdown Examples",
            "link": "markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "api-examples"
          }
        ]
      }
    ],
    "/articles/50projects50days/": [
      {
        "base": "/articles/50projects50days/",
        "text": "50个前端练手项目",
        "items": [
          {
            "text": "Day01-Expanding Cards",
            "link": "day01"
          },
          {
            "text": "Day02-Progress Steps",
            "link": "day02"
          }
        ],
        "link": "index"
      }
    ],
    "/articles/initial/": [
      {
        "base": "/articles/initial/",
        "text": "网站搭建",
        "items": [
          {
            "text": "搭建",
            "link": "1-build"
          },
          {
            "text": "部署",
            "link": "2-deploy"
          },
          {
            "text": "使用指南",
            "link": "3-guide"
          },
          {
            "text": "功能扩展",
            "link": "4-enhance"
          }
        ],
        "link": "index"
      }
    ],
    "/articles/library/": [
      {
        "base": "/articles/library/",
        "text": "资源库",
        "items": [
          {
            "base": "/articles/library/backend/",
            "text": "后端",
            "items": [],
            "link": "index"
          },
          {
            "base": "/articles/library/frontend/",
            "text": "前端",
            "items": [
              {
                "base": "/articles/library/frontend/vue/",
                "text": "Vue 3",
                "items": [
                  {
                    "text": "基础：模板项目",
                    "link": "1-template"
                  },
                  {
                    "text": "增强：自动引入",
                    "link": "2-autoimport"
                  },
                  {
                    "text": "增强：日志控制",
                    "link": "3-logger"
                  },
                  {
                    "text": "增强：Vuetify",
                    "link": "4-vuetify"
                  },
                  {
                    "text": "增强：Toast 消息",
                    "link": "5-toastification"
                  },
                  {
                    "text": "增强：使用配置文件",
                    "link": "6-config"
                  },
                  {
                    "text": "增强：封装 axios 请求",
                    "link": "7-axios"
                  }
                ],
                "link": "index"
              }
            ],
            "link": "index"
          },
          {
            "base": "/articles/library/others/",
            "text": "其他",
            "items": [
              {
                "text": "Raycast",
                "link": "Raycast"
              }
            ],
            "link": "index"
          },
          {
            "base": "/articles/library/server/",
            "text": "服务器",
            "items": [
              {
                "text": "nvim",
                "link": "nvim"
              },
              {
                "text": "tmux",
                "link": "tmux"
              },
              {
                "text": "zsh",
                "link": "zsh"
              }
            ],
            "link": "index"
          }
        ],
        "link": "index"
      }
    ]
  },
  "outline": [
    2,
    4
  ],
  "outlineTitle": "大纲",
  "docFooter": {
    "prev": "上一篇",
    "next": "下一篇"
  },
  "search": {
    "provider": "local"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/hf-xz"
    }
  ]
}

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.