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": "一串烤肉",
  "nav": [
    {
      "text": "数据库",
      "items": [
        {
          "text": "MySQL数据库",
          "items": [
            {
              "text": "简介",
              "link": "/mysql/"
            },
            {
              "text": "本机搭建",
              "link": "/mysql/install"
            },
            {
              "text": "Navicat Premium16安装",
              "link": "/mysql/NavicatPremium16安装破解激活图文教程"
            },
            {
              "text": "MySQL遇到锁表怎么办",
              "link": "/mysql/MySQL遇到锁表怎么办"
            },
            {
              "text": "常用SQL",
              "link": "/mysql/常用SQL"
            }
          ]
        },
        {
          "text": "CK数据库",
          "items": [
            {
              "text": "入门到精通",
              "link": "/clickhouse/"
            }
          ]
        }
      ]
    },
    {
      "text": "AI",
      "items": [
        {
          "text": "Stable diffusion",
          "items": [
            {
              "text": "SD入门到精通",
              "link": "/ai/sd/"
            },
            {
              "text": "langchain",
              "link": "/ai/langchain/"
            }
          ]
        }
      ]
    },
    {
      "text": "编程技术",
      "items": [
        {
          "text": "Java",
          "items": [
            {
              "text": "简介",
              "link": "/lang/java/"
            }
          ]
        },
        {
          "text": "设计模式",
          "items": [
            {
              "text": "Reactor",
              "link": "/reactor/"
            }
          ]
        }
      ]
    },
    {
      "text": "开源项目",
      "items": [
        {
          "text": "vitepress",
          "items": [
            {
              "text": "简介",
              "link": "/vitepressnote/"
            }
          ]
        }
      ]
    }
  ],
  "sidebar": {
    "/mysql/": [
      {
        "text": "MySQL",
        "collapsed": false,
        "items": [
          {
            "text": "简介",
            "link": "/mysql/"
          },
          {
            "text": "本机搭建",
            "link": "/mysql/install"
          },
          {
            "text": "Navicat Premium16安装",
            "link": "/mysql/NavicatPremium16安装破解激活图文教程"
          },
          {
            "text": "MySQL遇到锁表怎么办",
            "link": "/mysql/MySQL遇到锁表怎么办"
          },
          {
            "text": "常用SQL",
            "link": "/mysql/常用SQL"
          }
        ]
      }
    ],
    "/clickhouse/": [
      {
        "text": "Clickhouse",
        "collapsed": false,
        "items": [
          {
            "text": "介绍",
            "link": "/clickhouse"
          }
        ]
      }
    ],
    "/lang/": [
      {
        "text": "Java",
        "collapsed": false,
        "items": [
          {
            "text": "介绍",
            "link": "/lang/java/"
          },
          {
            "text": "java小工具",
            "link": "/lang/java/java小工具"
          },
          {
            "text": "javaparser处理lombok",
            "link": "/lang/java/javaparser处理lombok"
          }
        ]
      }
    ],
    "/ai/": [
      {
        "text": "SD",
        "collapsed": false,
        "items": [
          {
            "text": "SD入门到精通",
            "link": "/ai/sd/"
          }
        ]
      },
      {
        "text": "langchain",
        "collapsed": false,
        "items": [
          {
            "text": "langchain",
            "link": "/ai/langchain/"
          }
        ]
      }
    ],
    "/reactor/": [
      {
        "text": "Reactor模式",
        "collapsed": false,
        "items": [
          {
            "text": "概念介绍",
            "link": "/reactor/"
          },
          {
            "text": "project reactor",
            "link": "/reactor/projectreactor"
          }
        ]
      }
    ],
    "/vitepressnote/": [
      {
        "collapsed": false,
        "items": [
          {
            "text": "介绍",
            "link": "/vitepressnote/"
          },
          {
            "text": "VitePress入门",
            "link": "/vitepressnote/VitePress入门"
          },
          {
            "text": "Markdown与页面创建",
            "link": "/vitepressnote/Markdown与页面创建"
          },
          {
            "text": "主题定制与扩展",
            "link": "/vitepressnote/主题定制与扩展"
          },
          {
            "text": "博客功能增强",
            "link": "/vitepressnote/博客功能增强"
          },
          {
            "text": "社交媒体和网络互动",
            "link": "/vitepressnote/社交媒体和网络互动"
          },
          {
            "text": "性能优化与SEO",
            "link": "/vitepressnote/性能优化与SEO"
          },
          {
            "text": "高级功能与动态内容",
            "link": "/vitepressnote/高级功能与动态内容"
          },
          {
            "text": "安全性与部署",
            "link": "/vitepressnote/安全性与部署"
          },
          {
            "text": "VitePress的扩展与插件",
            "link": "/vitepressnote/VitePress的扩展与插件"
          },
          {
            "text": "维护与更新",
            "link": "/vitepressnote/维护与更新"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "footer": {
    "message": "生活、学习、工作",
    "copyright": "Copyright © 2019-present Evan You"
  },
  "docFooter": {
    "prev": "上一页",
    "next": "下一页"
  },
  "outline": {
    "label": "页面导航",
    "level": "deep"
  },
  "lastUpdated": {
    "text": "最后更新于",
    "formatOptions": {
      "dateStyle": "short",
      "timeStyle": "medium"
    }
  },
  "langMenuLabel": "多语言",
  "returnToTopLabel": "回到顶部",
  "sidebarMenuLabel": "菜单",
  "darkModeSwitchLabel": "主题",
  "lightModeSwitchTitle": "切换到浅色模式",
  "darkModeSwitchTitle": "切换到深色模式",
  "vite": {
    "plugins": [
      {
        "name": "unplugin-auto-import",
        "enforce": "post",
        "vite": {}
      },
      {
        "name": "unplugin-vue-components",
        "enforce": "post",
        "api": {},
        "vite": {}
      }
    ]
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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