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

{
  "aside": true,
  "outline": {
    "level": [
      2,
      3
    ],
    "label": "On this page"
  },
  "search": {
    "provider": "local"
  },
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "About",
      "link": "/introduce/about-me",
      "activeMatch": "/introduce/about"
    },
    {
      "text": "Examples",
      "link": "/examples/markdown-examples"
    }
  ],
  "sidebar": [
    {
      "text": "Introduction",
      "collapsed": false,
      "items": [
        {
          "text": "About me",
          "link": "/introduce/about-me"
        },
        {
          "text": "careers",
          "link": "/introduce/careers"
        },
        {
          "text": "WHY 개발자?",
          "link": "/introduce/my-develop"
        }
      ]
    },
    {
      "text": "Frontend",
      "items": [
        {
          "text": "vitepress",
          "collapsed": true,
          "items": [
            {
              "text": "vitepress 댓글 기능 구현",
              "link": "/frontend/vitepress/vitepress-comment"
            }
          ]
        },
        {
          "text": "Javascript",
          "collapsed": true,
          "items": [
            {
              "text": "정규식",
              "link": "/frontend/javascript/regular-expression"
            },
            {
              "text": "es-toolkit",
              "link": "/frontend/javascript/es-toolkit"
            },
            {
              "text": "JavaScript 배열 메서드",
              "link": "/frontend/javascript/array-methods"
            },
            {
              "text": "객체 복사 이제는 Structured Clone !",
              "link": "/frontend/javascript/structured-clone"
            }
          ]
        },
        {
          "text": "Vue",
          "collapsed": false,
          "items": [
            {
              "text": "내가 VueJS를 사용하는 이유",
              "link": "/frontend/vue/my-vue"
            },
            {
              "text": " Vue 라이브러리 추천",
              "link": "/frontend/vue/my-vue-library"
            },
            {
              "text": "Vue 코드 컨벤션",
              "link": "/frontend/vue/vue-code-convention"
            },
            {
              "text": "Vue 이벤트 및 이벤트 수정자",
              "link": "/frontend/vue/vue-event"
            },
            {
              "text": "폼 검증하기 VeeValidate",
              "link": "/frontend/vue/vee-validate"
            },
            {
              "text": "vue Cookie : 오늘 하루동안 보지 않기 기능 구현",
              "link": "/frontend/vue/vue-cookie"
            },
            {
              "text": "Quasar Tailwind 설치",
              "link": "/frontend/vue/quasar-tailwind"
            },
            {
              "text": "Vite Quasar에서 AOS로 애니메이션 적용하기",
              "link": "/frontend/vue/vite-quasar-aos"
            },
            {
              "text": "Vue Tailwind Brand Color 적용하기",
              "link": "/frontend/vue/tailwind-brand-color"
            }
          ]
        },
        {
          "text": "Vite",
          "collapsed": true,
          "items": [
            {
              "text": "Vite 경로 별칭 설정",
              "link": "/frontend/vite/vite-alias"
            },
            {
              "text": "Vite 포트 설정",
              "link": "/frontend/vite/vite-port"
            },
            {
              "text": "Vite Proxy 설정",
              "link": "/frontend/vite/proxy"
            }
          ]
        }
      ]
    },
    {
      "text": "Backend",
      "items": [
        {
          "text": "NestJS",
          "collapsed": true,
          "items": [
            {
              "text": "내가 NestJS를 사용하는 이유",
              "link": "/backend/nestjs/my-nestjs"
            }
          ]
        }
      ]
    },
    {
      "text": "Database",
      "items": [
        {
          "text": "조회한 데이터 업데이트 하기",
          "link": "/database/update-in"
        },
        {
          "text": "한글 정렬 하기",
          "link": "/database/korean-sort"
        }
      ]
    },
    {
      "text": "Git",
      "items": [
        {
          "text": "GitHub Readme 예시",
          "link": "/git/github-readme"
        }
      ]
    },
    {
      "text": "Examples",
      "collapsed": true,
      "items": [
        {
          "text": "Markdown Examples",
          "link": "/examples/markdown-examples"
        },
        {
          "text": "Runtime API Examples",
          "link": "/examples/api-examples"
        }
      ]
    }
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/raincoat98/vitepress"
    }
  ],
  "footer": {
    "message": "MIT 라이선스에 따라 릴리즈되었습니다.",
    "copyright": "저작권 © 2024-현재 SangWook Woo"
  }
}

Page Data

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

Page Frontmatter

{
  "outline": "deep"
}

More

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