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": "Linux",
          "link": "/linux/"
        },
        {
          "text": "MacOS",
          "link": "/macos/"
        },
        {
          "text": "Rust",
          "link": "/rust/"
        }
      ]
    },
    {
      "text": "运维与工具",
      "items": [
        {
          "text": "SSH",
          "link": "/ssh/"
        },
        {
          "text": "Git",
          "link": "/git/"
        },
        {
          "text": "k3s",
          "link": "/k3s/"
        },
        {
          "text": "软件工具",
          "link": "/devtools/"
        }
      ]
    },
    {
      "text": "示例",
      "items": [
        {
          "text": "Markdown 示例",
          "link": "/markdown-examples"
        },
        {
          "text": "API 示例",
          "link": "/api-examples"
        }
      ]
    }
  ],
  "sidebar": {
    "items": [
      {
        "text": "api-examples",
        "link": "api-examples"
      },
      {
        "text": "markdown-examples",
        "link": "markdown-examples"
      }
    ],
    "/devtools/": [
      {
        "text": "devtools",
        "link": "/devtools/",
        "items": [
          {
            "text": "vscode",
            "link": "/devtools/vscode"
          },
          {
            "text": "zip",
            "link": "/devtools/zip"
          }
        ]
      }
    ],
    "/git/": [
      {
        "items": [
          {
            "text": "git常用命令",
            "link": "/git/git常用命令"
          }
        ],
        "text": "git",
        "link": "/git/"
      }
    ],
    "/k3s/": [
      {
        "text": "k3s",
        "link": "/k3s/",
        "items": [
          {
            "text": "查明k3s节点所使用的容器运行时",
            "link": "/k3s/查明k3s节点所使用的容器运行时"
          }
        ]
      }
    ],
    "/linux/": [
      {
        "text": "linux",
        "link": "/linux/",
        "items": [
          {
            "text": "nvm切换node版本问题",
            "link": "/linux/nvm切换node版本问题"
          },
          {
            "text": "vscode拖放或粘贴创建文件规则",
            "link": "/linux/vscode拖放或粘贴创建文件规则"
          }
        ]
      }
    ],
    "/macos/": [
      {
        "items": [
          {
            "text": "MacOS多JDK版本切换",
            "link": "/macos/MacOS多JDK版本切换"
          },
          {
            "text": "MacOS搭建k3s容器化开发环境",
            "link": "/macos/MacOS搭建k3s容器化开发环境"
          },
          {
            "items": [
              {
                "text": "Mac安装软件时提示已损坏的解决方法",
                "link": "/macos/常见问题及解决/Mac安装软件时提示已损坏的解决方法"
              }
            ]
          }
        ],
        "text": "macos",
        "link": "/macos/"
      }
    ],
    "/public/": [
      {}
    ],
    "/rust/": [
      {
        "items": [
          {
            "text": "diesel_cli安装问题解决",
            "link": "/rust/diesel_cli安装问题解决"
          },
          {
            "text": "部署rust应用到k3s",
            "link": "/rust/部署rust应用到k3s"
          }
        ],
        "text": "rust",
        "link": "/rust/"
      }
    ],
    "/ssh/": [
      {
        "items": [
          {
            "text": "SSH密钥跨平台配置指南",
            "link": "/ssh/SSH密钥跨平台配置指南"
          }
        ],
        "text": "ssh",
        "link": "/ssh/"
      }
    ]
  },
  "search": {
    "provider": "local",
    "options": {}
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

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.