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

{
  "nav": [
    {
      "text": "Home",
      "link": "/"
    },
    {
      "text": "Unvus Core",
      "link": "/unvuscore/getting-started/tech-stack"
    },
    {
      "text": "Code Genie",
      "link": "/codegenie/tmpl-manage"
    },
    {
      "text": "Components",
      "link": "/components/panel"
    }
  ],
  "sidebar": {
    "/unvuscore/": [
      {
        "text": "Unvus Core",
        "items": [
          {
            "text": "Getting Started",
            "collapsed": true,
            "items": [
              {
                "text": "기술 스택",
                "link": "/unvuscore/getting-started/tech-stack"
              },
              {
                "text": "개발 환경 설정",
                "link": "/unvuscore/getting-started/dev-env-setting"
              }
            ]
          },
          {
            "text": "Code Genie",
            "collapsed": true,
            "items": [
              {
                "text": "신규 프로젝트 생성",
                "link": "/unvuscore/code-genie/project-init"
              },
              {
                "text": "템플릿 팩 관리",
                "link": "/unvuscore/code-genie/template-pack"
              },
              {
                "text": "프로젝트 관리",
                "link": "/unvuscore/code-genie/project-mng"
              },
              {
                "text": "유틸 함수",
                "link": "/unvuscore/code-genie/util-func"
              },
              {
                "text": "빌더 만들기",
                "link": "/unvuscore/code-genie/builder"
              }
            ]
          },
          {
            "text": "Unvus Core",
            "collapsed": true,
            "items": [
              {
                "text": "Pagination",
                "link": "/unvuscore/core/pagination"
              },
              {
                "text": "검색 조건",
                "link": "/unvuscore/core/search-condition"
              },
              {
                "text": "MyBatis Dynamic SQL",
                "link": "/unvuscore/core/dynamic-sql"
              }
            ]
          },
          {
            "text": "Skrull (구 코드지니)",
            "collapsed": true,
            "items": [
              {
                "text": "maven 명령",
                "link": "/unvuscore/skrull/maven-command"
              },
              {
                "text": "skrull 구성 파일 및 디렉토리",
                "link": "/unvuscore/skrull/compose-file-dir"
              },
              {
                "text": "skrull-config.xml",
                "link": "/unvuscore/skrull/skrull-config"
              },
              {
                "text": "entity-config.xml",
                "link": "/unvuscore/skrull/entity-config"
              }
            ]
          },
          {
            "text": "Frontend",
            "collapsed": true,
            "items": [
              {
                "text": "Vue.js",
                "link": "/unvuscore/frontend/vue"
              },
              {
                "text": "Vue3-ts",
                "link": "/unvuscore/frontend/vue3"
              }
            ]
          },
          {
            "text": "Convention",
            "collapsed": true,
            "items": [
              {
                "text": "Editor Config",
                "link": "/unvuscore/convention/editor-config"
              },
              {
                "text": "Google Style",
                "link": "/unvuscore/convention/google-style"
              },
              {
                "text": "Sonarqube",
                "link": "/unvuscore/convention/sonarqube"
              },
              {
                "text": "Practice",
                "link": "/unvuscore/convention/db"
              },
              {
                "text": "Java",
                "link": "/unvuscore/convention/java"
              }
            ]
          }
        ]
      }
    ],
    "/codegenie/": [
      {
        "text": "Code Genie",
        "items": []
      }
    ],
    "/components/": [
      {
        "text": "Components",
        "items": [
          {
            "text": "Panel",
            "link": "/components/panel"
          },
          {
            "text": "Search",
            "collapsed": false,
            "items": [
              {
                "text": "Search Form",
                "link": "/components/search/search"
              },
              {
                "text": "Search Form Items",
                "link": "/components/search/search-form"
              }
            ]
          },
          {
            "text": "Code Label",
            "link": "/components/code-label"
          },
          {
            "text": "Form",
            "collapsed": false,
            "items": [
              {
                "text": "Form Groups",
                "link": "/components/form/nv-form-groups"
              },
              {
                "text": "Form Group",
                "link": "/components/form/nv-form-group"
              },
              {
                "text": "Input Wrap",
                "link": "/components/form/nv-input-wrap"
              }
            ]
          },
          {
            "text": "Form Items",
            "collapsed": false,
            "items": [
              {
                "text": "CK Editor",
                "link": "/components/ck-editor"
              },
              {
                "text": "Editor",
                "link": "/components/codemirror"
              },
              {
                "text": "Date Picker",
                "link": "/components/datepicker"
              },
              {
                "text": "Date Range",
                "link": "/components/daterange"
              },
              {
                "text": "File Upload",
                "link": "/components/nv-file-upload"
              },
              {
                "text": "Numeric",
                "link": "/components/numeric"
              },
              {
                "text": "Radio Group",
                "link": "/components/radio-group"
              },
              {
                "text": "Select",
                "link": "/components/select"
              }
            ]
          },
          {
            "text": "Excel Download",
            "link": "/components/excel-download"
          },
          {
            "text": "Boolean Symbol",
            "link": "/components/boolean-symbol"
          },
          {
            "text": "Gird",
            "collapsed": false,
            "items": [
              {
                "text": "Nv List Body",
                "link": "/components/nv-list-body"
              },
              {
                "text": "Nv Grid",
                "link": "/components/nv-grid"
              },
              {
                "text": "Nv Grid Col",
                "link": "/components/nv-grid-col"
              },
              {
                "text": "Detail Button",
                "link": "/components/detail-button"
              }
            ]
          }
        ]
      }
    ]
  },
  "outline": [
    2,
    3
  ],
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ]
}

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.