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": {
    "src": "/assets/logo/logo.png",
    "alt": "都是干货 | 老王的干货杂货铺"
  },
  "siteTitle": "",
  "search": {
    "provider": "local"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "xiaowang19.github.io"
    }
  ],
  "footer": {
    "message": "去掉水分，留下精华",
    "copyright": "Copyright © 2024 onlookee"
  },
  "docFooter": {
    "prev": "上一篇",
    "next": "下一篇"
  },
  "outline": [
    1,
    3
  ],
  "nav": [
    {
      "text": "首页",
      "link": "/"
    },
    {
      "text": "编程开发",
      "items": [
        {
          "text": "编程开发",
          "link": "/01-Dev/"
        },
        {
          "text": "大前端",
          "items": [
            {
              "text": "FrontEnd",
              "link": "/01-Dev/01-FrontEnd/"
            },
            {
              "text": "HTML",
              "link": "/01-Dev/01-FrontEnd/01-HTML/"
            },
            {
              "text": "CSS",
              "link": "/01-Dev/01-FrontEnd/02-CSS/"
            },
            {
              "text": "Javascript",
              "link": "/01-Dev/01-FrontEnd/03-Javascript/"
            },
            {
              "text": "VUE",
              "link": "/01-Dev/01-FrontEnd/04-VUE/"
            }
          ]
        },
        {
          "text": "Python",
          "link": "/01-Dev/02-Python/"
        },
        {
          "text": "PHP",
          "link": "/01-Dev/03-PHP/"
        },
        {
          "text": "Java",
          "link": "/01-Dev/04-Java/"
        }
      ]
    },
    {
      "text": "工具软件",
      "items": [
        {
          "text": "工具软件",
          "link": "/02-Soft/"
        }
      ]
    },
    {
      "text": "科技数码",
      "items": [
        {
          "text": "科技数码",
          "link": "/03-Tech/"
        }
      ]
    },
    {
      "text": "关于老王",
      "link": "/markdown-examples"
    }
  ],
  "sidebar": {
    "/": [
      {
        "text": "首页",
        "link": "/index"
      },
      {
        "text": "api-examples",
        "link": "/api-examples"
      },
      {
        "text": "markdown-examples",
        "link": "/markdown-examples"
      }
    ],
    "/01-Dev/": [
      {
        "text": "编程开发",
        "link": "/01-Dev/index"
      },
      {
        "text": "FrontEnd",
        "items": [
          {
            "text": "大前端",
            "link": "/01-Dev/01-FrontEnd/index"
          },
          {
            "text": "HTML",
            "items": [
              {
                "text": "HTML",
                "link": "/01-Dev/01-FrontEnd/01-HTML/index"
              }
            ]
          },
          {
            "text": "CSS",
            "items": [
              {
                "text": "CSS",
                "link": "/01-Dev/01-FrontEnd/02-CSS/index"
              }
            ]
          },
          {
            "text": "Javascript",
            "items": [
              {
                "text": "Javascript",
                "link": "/01-Dev/01-FrontEnd/03-Javascript/index"
              }
            ]
          },
          {
            "text": "Vue",
            "items": [
              {
                "text": "VUE",
                "link": "/01-Dev/01-FrontEnd/04-Vue/index"
              }
            ]
          }
        ]
      },
      {
        "text": "Python",
        "items": [
          {
            "text": "Python",
            "link": "/01-Dev/02-Python/index"
          },
          {
            "text": "Manim",
            "link": "/01-Dev/02-Python/Manim"
          }
        ]
      },
      {
        "text": "PHP",
        "items": [
          {
            "text": "PHP",
            "link": "/01-Dev/03-PHP/index"
          },
          {
            "text": "XDebug",
            "link": "/01-Dev/03-PHP/01.XDebug"
          }
        ]
      },
      {
        "text": "Java",
        "items": [
          {
            "text": "Java",
            "link": "/01-Dev/04-Java/index"
          }
        ]
      }
    ],
    "/02-Soft/": [
      {
        "text": "软件工具",
        "link": "/02-Soft/index"
      },
      {
        "text": "Dev",
        "items": [
          {
            "text": "编程开发工具",
            "link": "/02-Soft/Dev/index"
          },
          {
            "text": "编程开发工具",
            "link": "/02-Soft/Dev/BeyondCompare"
          }
        ]
      },
      {
        "text": "Obsidian",
        "items": [
          {
            "text": "Obsidian",
            "link": "/02-Soft/Obsidian/index"
          }
        ]
      },
      {
        "text": "Total Commander",
        "link": "/02-Soft/TotalCommander"
      }
    ],
    "/03-Tech/": [
      {
        "text": "科技数码",
        "link": "/03-Tech/index"
      }
    ]
  }
}

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.