런타임 API 예제

이 페이지는 VitePress에서 제공하는 일부 런타임 API 사용 방법을 보여줍니다.

주요 API 인 useData()를 사용하면 현재 페이지의 사이트, 테마 및 페이지 데이터를 액세스할 수 있습니다. .md 및 .vue 파일 모두에서 동작합니다.

<script setup>
import { useData } from 'vitepress'

const { theme, page, frontmatter } = useData()
</script>

## 결과

### 테마 데이터
<pre>{{ theme }}</pre>

### 페이지 데이터
<pre>{{ page }}</pre>

### 프론트매터
<pre>{{ frontmatter }}</pre>

결과

테마 데이터

{
  "nav": [
    {
      "text": "홈",
      "link": "/ko/"
    },
    {
      "text": "예제",
      "link": "/ko/markdown-examples"
    }
  ],
  "sidebar": [
    {
      "text": "Docker",
      "collapsed": false,
      "items": [
        {
          "text": "Docker 예제",
          "link": "/ko/markdown-examples"
        },
        {
          "text": "런타임 API 예제",
          "link": "/ko/api-examples"
        }
      ]
    }
  ],
  "outline": {
    "level": "deep",
    "label": "目录"
  },
  "socialLinks": [
    {
      "icon": "github",
      "link": "https://github.com/vuejs/vitepress"
    }
  ],
  "search": {
    "provider": "local"
  }
}

페이지 데이터

{
  "title": "런타임 API 예제",
  "description": "",
  "frontmatter": {
    "outline": "deep"
  },
  "headers": [],
  "relativePath": "ko/api-examples.md",
  "filePath": "ko/api-examples.md"
}

프론트매터

{
  "outline": "deep"
}

더 알아보기

런타임 API 전체 목록을 확인하세요.