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 ​

{
  "mainColor": "#56728B",
  "title": {
    "en": "Qubik's Site",
    "zh-Hans": "Qubik的小站"
  },
  "description": {
    "en": "Qubik65536's Personal and Blog Site",
    "zh-Hans": "Qubik65536的个人博客站点"
  },
  "siteName": "qubik-site",
  "author": {
    "name": "Qian Qian \"Qubik\"",
    "username": "qubik65536"
  },
  "toolbar": {
    "nav": [
      {
        "text": {
          "en": "Docs",
          "zh-Hans": "文档"
        },
        "link": "/docs/",
        "icon": "fa-solid fa-book",
        "items": [
          {
            "text": {
              "en": "Getting Started",
              "zh-Hans": "快速开始"
            },
            "link": "/docs/guide/getting-started",
            "icon": "fa-solid fa-rocket"
          },
          {
            "text": {
              "en": "Configuration",
              "zh-Hans": "配置"
            },
            "link": "/docs/configuration/theme-config",
            "icon": "fa-solid fa-sliders"
          },
          {
            "text": {
              "en": "Markdown Demo",
              "zh-Hans": "Markdown 演示"
            },
            "link": "/markdown-examples",
            "icon": "fa-solid fa-hashtag"
          },
          {
            "text": {
              "en": "Explorer Demo",
              "zh-Hans": "浏览器演示"
            },
            "link": "/demo/",
            "icon": "fa-solid fa-flask"
          }
        ]
      },
      {
        "text": {
          "en": "Posts",
          "zh-Hans": "文章"
        },
        "link": "/posts",
        "icon": "fa-solid fa-feather",
        "items": [
          {
            "text": {
              "en": "Categories",
              "zh-Hans": "分类"
            },
            "link": "/categories",
            "icon": "fa-solid fa-folder"
          },
          {
            "text": {
              "en": "Tags",
              "zh-Hans": "标签"
            },
            "link": "/tags",
            "icon": "fa-solid fa-tags"
          },
          {
            "text": {
              "en": "Series",
              "zh-Hans": "系列"
            },
            "link": "/series",
            "icon": "fa-solid fa-layer-group"
          }
        ]
      },
      {
        "text": {
          "en": "Archives",
          "zh-Hans": "归档"
        },
        "link": "/archives",
        "icon": "fa-solid fa-box-archive"
      },
      {
        "text": {
          "en": "Projects",
          "zh-Hans": "项目"
        },
        "link": "/projects",
        "icon": "fa-solid fa-diagram-project"
      },
      {
        "text": {
          "en": "About",
          "zh-Hans": "关于"
        },
        "link": "/about",
        "icon": "fa-solid fa-user"
      },
      {
        "text": {
          "en": "Friends",
          "zh-Hans": "友链"
        },
        "link": "/friends",
        "icon": "fa-solid fa-user-group"
      }
    ],
    "actions": [
      {
        "icon": "fa-brands fa-github",
        "link": "https://github.com/iXORTech/vitepress-theme-terminal",
        "label": "GitHub"
      }
    ]
  },
  "taxonomy": {
    "tags": {
      "theme": {
        "en": "theme",
        "zh-Hans": "主题"
      },
      "color": {
        "en": "color",
        "zh-Hans": "色彩"
      }
    },
    "categories": {
      "Guides": {
        "en": "Guides",
        "zh-Hans": "指南"
      },
      "Design": {
        "en": "Design",
        "zh-Hans": "设计"
      }
    }
  },
  "series": {
    "inArchives": true,
    "inCategories": true,
    "inTags": true
  },
  "home": {
    "command": "whoami",
    "greeting": {
      "en": "Hi, I'm the Terminal theme",
      "zh-Hans": "你好，我是终端主题"
    },
    "tagline": {
      "en": "A TUI-inspired VitePress theme for blogs and personal sites.",
      "zh-Hans": "一个受 TUI 界面风格启发的 VitePress 博客与个人网站主题。"
    },
    "body": {
      "en": "Everything on this demo — the shell chrome, cards, explorer, and these very pages — is the theme showing itself off. Browse the docs, posts, and projects below.",
      "zh-Hans": "本演示中的一切——外壳界面、卡片、资源管理器，以及这些页面本身——都是主题在自我展示。欢迎浏览下方的文档、文章与项目。"
    },
    "links": [
      {
        "text": {
          "en": "Read the docs",
          "zh-Hans": "阅读文档"
        },
        "link": "/docs/",
        "icon": "fa-solid fa-book"
      },
      {
        "text": {
          "en": "Browse posts",
          "zh-Hans": "浏览文章"
        },
        "link": "/posts",
        "icon": "fa-solid fa-feather"
      },
      {
        "text": "GitHub",
        "link": "https://github.com/iXORTech/vitepress-theme-terminal",
        "icon": "fa-brands fa-github"
      }
    ]
  },
  "friends": {
    "groups": {
      "group2": {
        "name": {
          "en": "Group 2",
          "zh-Hans": "第二组"
        },
        "desc": {
          "en": "Localized via themeConfig.friends.groups.",
          "zh-Hans": "通过 themeConfig.friends.groups 本地化。"
        }
      }
    }
  },
  "explorer": "auto",
  "footer": {
    "rss": "/feed.rss",
    "social": [
      {
        "icon": "fa-brands fa-github",
        "link": "https://github.com/iXORTech/vitepress-theme-terminal",
        "label": "GitHub"
      }
    ]
  },
  "comments": {
    "waline": {
      "serverURL": "https://waline.example.com"
    }
  }
}

Page Data ​

{
  "title": "Runtime API Examples",
  "description": "",
  "frontmatter": {
    "outline": "deep",
    "title": {
      "en": "Runtime API Examples",
      "zh-Hans": "运行时 API 示例"
    }
  },
  "headers": [],
  "relativePath": "api-examples.md",
  "filePath": "api-examples.md",
  "lastUpdated": 1785287664000
}

Page Frontmatter ​

{
  "outline": "deep",
  "title": {
    "en": "Runtime API Examples",
    "zh-Hans": "运行时 API 示例"
  }
}

More ​

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