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

{
  "logo": "https://vitepress.dev/vitepress-logo-mini.svg",
  "nav": [
    {
      "text": "主页",
      "link": "/"
    },
    {
      "text": "axios",
      "link": "/posts/axios"
    },
    {
      "text": "新窗口打开",
      "link": "https://vitepress.dev/zh/reference/site-config"
    },
    {
      "text": "前端",
      "items": [
        {
          "text": "axios",
          "link": "/posts/axios"
        },
        {
          "text": "Express",
          "link": "/posts/Express"
        },
        {
          "text": "git+gitee",
          "link": "/posts/git+gitee"
        },
        {
          "text": "github_action_deploy_hexo",
          "link": "/posts/github_action_deploy_hexo"
        },
        {
          "text": "import的对象不能解构",
          "link": "/posts/import的对象不能解构"
        },
        {
          "text": "less",
          "link": "/posts/less"
        },
        {
          "text": "node中的模块",
          "link": "/posts/node中的模块"
        },
        {
          "text": "publish_to_npm",
          "link": "/posts/publish_to_npm"
        },
        {
          "text": "sass",
          "link": "/posts/sass"
        },
        {
          "text": "socket.io",
          "link": "/posts/socket.io"
        },
        {
          "text": "vercelApi+mongoAtlas",
          "link": "/posts/vercelApi+mongoAtlas"
        },
        {
          "text": "Vue-cli4+",
          "link": "/posts/Vue-cli4+"
        },
        {
          "text": "vue-cli配置留存",
          "link": "/posts/vue-cli配置留存"
        },
        {
          "text": "vue使用小计",
          "link": "/posts/vue使用小计"
        },
        {
          "text": "webpack",
          "link": "/posts/webpack"
        },
        {
          "text": "公众号开发",
          "link": "/posts/公众号开发"
        },
        {
          "text": "公众号打开小程序",
          "link": "/posts/公众号打开小程序"
        },
        {
          "text": "头部nav增加下拉菜单",
          "link": "/posts/头部nav增加下拉菜单"
        },
        {
          "text": "资料收集",
          "link": "/posts/资料收集"
        }
      ]
    },
    {
      "text": "vue相关",
      "items": [
        {
          "items": [
            {
              "text": "element-ui扩展",
              "link": "/lee-element-ui/index",
              "activeMatch": "/lee-element-ui/"
            }
          ]
        },
        {
          "text": "vant-扩展",
          "link": "/vant-extend/index",
          "activeMatch": "/vant-extend/"
        }
      ]
    }
  ],
  "sidebar": {
    "/lee-element-ui/": [
      {
        "text": "配置化element-ui-表格-改",
        "collapsed": false,
        "items": [
          {
            "text": "安装",
            "link": "/lee-element-ui/"
          },
          {
            "text": "灵活表格",
            "items": [
              {
                "text": "灵活表格-使用",
                "link": "/lee-element-ui/lee-easy-table"
              }
            ]
          }
        ]
      }
    ],
    "/vant-extend/": [
      {
        "text": "vant-组合组件",
        "collapsed": false,
        "items": [
          {
            "text": "介绍",
            "link": "/vant-extend/"
          },
          {
            "text": "插件等内置方法",
            "link": "/vant-extend/fns"
          },
          {
            "text": "直接用.vue文件",
            "link": "/vant-extend/useVue"
          }
        ]
      }
    ]
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    },
    {
      "icon": "twitter",
      "link": "..."
    },
    {
      "icon": {
        "svg": "<svg height=\"20\" width=\"20\">\n        <image height=\"20\" width=\"20\" xlink:href=\"https://vitepress.dev/vitepress-logo-mini.svg\"  />\n      </svg>"
      },
      "link": "https://vitepress.dev/vitepress-logo-mini.svg",
      "ariaLabel": "cool link"
    }
  ],
  "search": {
    "provider": "local"
  },
  "outline": {
    "level": [
      2,
      6
    ],
    "label": "目录"
  },
  "lastUpdatedText": "最近更新",
  "editLink": {
    "pattern": "https://github.com/jia0213",
    "text": "github主页"
  },
  "docFooter": {
    "prev": "前一篇",
    "next": "后一篇"
  },
  "footer": {
    "message": "Released under the MIT License.",
    "copyright": "Copyright © 2019-present lee"
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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