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 ​

{
  "logo": "/img/logo.png",
  "nav": [
    {
      "text": "导航",
      "link": "/nav/"
    },
    {
      "text": "个人成长",
      "items": [
        {
          "text": "大江南北游记",
          "link": "/column/Travel/"
        },
        {
          "text": "所思·所想",
          "link": "/column/Growing/"
        }
      ]
    },
    {
      "text": "前端开发",
      "link": "/front-end/"
    },
    {
      "text": "后端开发",
      "link": "/rear-end/"
    },
    {
      "text": "数据库",
      "items": [
        {
          "items": [
            {
              "text": "SQL 教程",
              "link": "/database/sql/"
            },
            {
              "text": "MySQL 教程",
              "link": "/database/mysql/"
            },
            {
              "text": "Oracle 教程",
              "link": "/database/oracle"
            }
          ]
        }
      ]
    },
    {
      "text": "Python",
      "link": "/config/"
    },
    {
      "text": "面试题",
      "items": [
        {
          "text": "",
          "items": [
            {
              "text": "Java",
              "link": "/interview/java/javabase"
            },
            {
              "text": "section-A-2",
              "link": "/test/sectionA-2"
            },
            {
              "text": "section-A-3",
              "link": "/test/sectionA-3"
            }
          ]
        },
        {
          "text": "item-3-B",
          "items": [
            {
              "text": "section-B-1",
              "link": "/test/setctionB-1"
            },
            {
              "text": "section-B-2",
              "link": "/test/setctionB-2"
            },
            {
              "text": "section-B-3",
              "link": "/test/setctionB-3"
            }
          ]
        },
        {
          "text": "item-3-3",
          "link": "/item3/3"
        },
        {
          "text": "item-3-4",
          "link": "/item3/4"
        }
      ]
    }
  ],
  "sidebar": {
    "/navz": [
      {
        "text": "Examples",
        "items": [
          {
            "text": "Markdown Examples",
            "link": "/markdown-examples"
          },
          {
            "text": "Runtime API Examples",
            "link": "/api-examples"
          }
        ]
      },
      {
        "text": "EnvStudy",
        "items": [
          {
            "text": "LinuxEnv",
            "link": "/env"
          }
        ]
      }
    ],
    "/front-end/": [
      {
        "text": "Front-end",
        "items": [
          {
            "text": "Index",
            "link": "/front-end/"
          },
          {
            "text": "One",
            "link": "/guide/one"
          },
          {
            "text": "Two",
            "link": "/guide/two"
          }
        ]
      }
    ],
    "/rear-end/": [
      {
        "text": "Rear-end",
        "items": [
          {
            "text": "Index",
            "link": "/rear-end/"
          },
          {
            "text": "One",
            "link": "/rear-end"
          },
          {
            "text": "Two",
            "link": "/rear-end"
          }
        ]
      }
    ],
    "/database/sql": [
      {
        "text": "SQL 教程",
        "items": [
          {
            "text": "主页",
            "link": "/database/sql"
          },
          {
            "text": "Three",
            "link": "/database/sql/5"
          },
          {
            "text": "Four",
            "link": "/database/four"
          }
        ]
      }
    ],
    "/database/mysql": [
      {
        "text": "MySQL 教程",
        "items": [
          {
            "text": "主页",
            "link": "/database/mysql"
          },
          {
            "text": "Three",
            "link": "/database/three"
          },
          {
            "text": "Four",
            "link": "/database/four"
          }
        ]
      }
    ],
    "/interview": [
      {
        "text": "",
        "items": [
          {
            "text": "Index",
            "link": "/interview/java"
          },
          {
            "text": "Three",
            "link": "/config/three"
          },
          {
            "text": "Four",
            "link": "/config/four"
          },
          {
            "text": "Index",
            "link": "/interview/java"
          },
          {
            "text": "Three",
            "link": "/config/three"
          },
          {
            "text": "Four",
            "link": "/config/four"
          }
        ]
      }
    ]
  },
  "outline": {
    "level": [
      1,
      4
    ],
    "label": "目录"
  },
  "docFooter": {
    "prev": "上一篇",
    "next": "下一篇"
  },
  "search": {
    "provider": "local"
  },
  "i18nRouting": false,
  "langMenuLabel": "英文",
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/zouyaowen/freewheeling"
    },
    {
      "icon": "twitter",
      "link": "..."
    },
    {
      "icon": {
        "svg": "<svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><title>Dribbble</title><path d=\"M12...6.38z\"/></svg>"
      },
      "link": "...",
      "ariaLabel": "cool link"
    }
  ],
  "footer": {
    "message": "<a href=\"https://beian.miit.gov.cn/\" target=\"_blank\">基于VitePress搭建</a>",
    "copyright": "Copyright © 2019-present Simon"
  },
  "darkModeSwitchLabel": "外观",
  "returnToTopLabel": "返回顶部",
  "lastUpdatedText": "上次更新",
  "externalLinkIcon": true
}

Page Data ​

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "rear-end/index.md",
  "filePath": "rear-end/index.md",
  "lastUpdated": 1697971576000
}

Page Frontmatter ​

{
  "outline": "deep"
}

More ​

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