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

{
  "siteTitle": "归至",
  "logo": "/static/image/banana.svg",
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "VitePress",
      "link": "guide/getting-started"
    },
    {
      "text": "Codex",
      "items": [
        {
          "text": "",
          "items": [
            {
              "text": "Codex 基础",
              "link": "/codex/basic"
            }
          ]
        },
        {
          "text": "",
          "items": [
            {
              "text": "Codex 高阶",
              "link": "/codex/advanced"
            }
          ]
        }
      ]
    },
    {
      "text": "API",
      "link": "/api/"
    }
  ],
  "sidebar": {
    "/guide/": [
      {
        "text": "入门指南",
        "items": [
          {
            "text": "快速开始",
            "link": "/guide/getting-started"
          },
          {
            "text": "进阶篇",
            "link": "/guide/intermediate.md"
          },
          {
            "text": "高级篇",
            "link": "/guide/advanced"
          }
        ],
        "collapsed": true
      },
      {
        "text": "写作",
        "items": [
          {
            "text": "Markdown 扩展",
            "link": "/guide/writting/Markdown 扩展.md"
          },
          {
            "text": "在 Markdown 中使用 Vue",
            "link": "/guide/writting/在 Markdown 中使用 Vue.md"
          },
          {
            "text": "VitePress 自定义组件样式",
            "link": "/guide/writting/VitePress 自定义组件样式.md"
          },
          {
            "text": "VitePress 自定义页面",
            "link": "/guide/writting/VitePress 自定义页面.md"
          }
        ],
        "collapsed": true
      }
    ],
    "/codex/": [
      {
        "text": "Codex 使用教学",
        "collapsed": true,
        "items": [
          {
            "text": "入门篇",
            "link": "/codex/Codex 使用指南（基础篇·教科书完整版）.md"
          },
          {
            "text": "进阶篇",
            "link": "/codex/Codex 使用指南（进阶篇·教科书完整版）.md"
          }
        ]
      },
      {
        "text": "Codex 高级篇",
        "collapsed": false,
        "items": [
          {
            "text": "高级篇完整教程",
            "link": "/codex/advanced/Codex 使用指南（高级篇·教科书完整版）.md"
          },
          {
            "text": "高级篇2完整教程",
            "link": "/codex/advanced/Codex 使用指南（高级篇2·指令_Agent_Model_Skills 全解手册）.md"
          }
        ]
      },
      {
        "text": "Codex 查表",
        "items": [
          {
            "text": "斜杠指令极简速查表",
            "link": "/codex/lookup/Codex-CLI v0.142.0 斜杠指令极简速查表"
          }
        ],
        "collapsed": true
      }
    ],
    "/codex/advanced/": [
      {
        "text": "高级篇",
        "items": [
          {
            "text": "高级篇2完整教程",
            "link": "/codex/advanced/Codex 使用指南（高级篇2·指令_Agent_Model_Skills 全解手册）.md"
          }
        ],
        "collapsed": true
      }
    ],
    "/api/": [
      {
        "text": "API 文档",
        "items": [
          {
            "text": "概述",
            "link": "/api/"
          }
        ],
        "collapsed": true
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/AdnyWert/my-docs"
    },
    {
      "icon": "csdn",
      "link": "https://blog.csdn.net/m0_74197761"
    }
  ],
  "editLink": {
    "pattern": "https://github.com/AdnyWert/my-docs/edit/main/docs/:path",
    "text": "在 GitHub 上编辑此页"
  },
  "search": {
    "provider": "local"
  },
  "lastUpdated": {
    "text": "最后更新于",
    "formatOptions": {
      "year": "numeric",
      "month": "2-digit",
      "day": "2-digit",
      "hour": "2-digit",
      "minute": "2-digit",
      "second": "2-digit",
      "era": "narrow"
    }
  },
  "docFooter": {
    "prev": "上一页"
  },
  "langMenuLabel": "多语言",
  "returnToTopLabel": "回到顶部",
  "sidebarMenuLabel": "菜单",
  "darkModeSwitchLabel": "主题",
  "lightModeSwitchTitle": "切换到浅色模式",
  "outline": {
    "label": "页面目录",
    "level": "deep"
  }
}

Page Data

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md",
  "lastUpdated": 1784474279000
}

Page Frontmatter

{
  "outline": "deep"
}

More

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