ランタイム API

VitePress は、アプリデータにアクセスするためのいくつかの組み込み API を提供しています。VitePress には、グローバルに使用できる組み込みコンポーネントもいくつか付属しています。

ヘルパーメソッドは `vitepress` からグローバルにインポート可能で、通常はカスタムテーマの Vue コンポーネントで使用されます。ただし、Markdown ファイルは Vue の 単一ファイルコンポーネント にコンパイルされるため、`.md` ページ内でも使用できます。

`use*` で始まるメソッドは、`setup()` または `<script setup>` 内でのみ使用できる Vue 3 コンポジション API 関数（「Composable」）であることを示します。

`useData` コンポーザブル

ページ固有のデータを返します。返されるオブジェクトは次の型を持ちます

interface VitePressData<T = any> {
  /**
   * Site-level metadata
   */
  site: Ref<SiteData<T>>
  /**
   * themeConfig from .vitepress/config.js
   */
  theme: Ref<T>
  /**
   * Page-level metadata
   */
  page: Ref<PageData>
  /**
   * Page frontmatter
   */
  frontmatter: Ref<PageData['frontmatter']>
  /**
   * Dynamic route params
   */
  params: Ref<PageData['params']>
  title: Ref<string>
  description: Ref<string>
  lang: Ref<string>
  isDark: Ref<boolean>
  dir: Ref<string>
  localeIndex: Ref<string>
  /**
   * Current location hash
   */
  hash: Ref<string>
}

interface PageData {
  title: string
  titleTemplate?: string | boolean
  description: string
  relativePath: string
  filePath: string,
  headers: Header[]
  frontmatter: Record<string, any>
  params?: Record<string, any>
  isNotFound?: boolean
  lastUpdated?: number
}

例

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

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

<template>
  <h1>{{ theme.footer.copyright }}</h1>
</template>

`useRoute` コンポーザブル

次の型を持つ現在のルートオブジェクトを返します

interface Route {
  path: string
  data: PageData
  component: Component | null
}

`useRouter` コンポーザブル

VitePress ルータインスタンスを返すため、プログラムで別のページに移動できます。

interface Router {
  /**
   * Current route.
   */
  route: Route
  /**
   * Navigate to a new URL.
   */
  go: (to?: string) => Promise<void>
  /**
   * Called before the route changes. Return `false` to cancel the navigation.
   */
  onBeforeRouteChange?: (to: string) => Awaitable<void | boolean>
  /**
   * Called before the page component is loaded (after the history state is
   * updated). Return `false` to cancel the navigation.
   */
  onBeforePageLoad?: (to: string) => Awaitable<void | boolean>
  /**
   * Called after the route changes.
   */
  onAfterRouteChanged?: (to: string) => Awaitable<void>
}

`withBase` ヘルパー

• **型**: `(path: string) => string`

設定された `base` を指定された URL パスに追加します。ベース URL も参照してください。

`<Content />` コンポーネント

`<Content />` コンポーネントは、レンダリングされた Markdown コンテンツを表示します。独自のテーマを作成する場合に便利です。

<template>
  <h1>Custom Layout!</h1>
  <Content />
</template>

`<ClientOnly />` コンポーネント

`<ClientOnly />` コンポーネントは、クライアント側でのみスロットをレンダリングします。

VitePress アプリケーションは、静的ビルドの生成時に Node.js でサーバーレンダリングされるため、Vue の使用はユニバーサルコードの要件に準拠する必要があります。つまり、beforeMount または mounted フックでのみブラウザ / DOM API にアクセスするようにしてください。

SSR に対応していないコンポーネント（たとえば、カスタムディレクティブを含む）を使用またはデモしている場合は、`ClientOnly` コンポーネントでラップできます。

<ClientOnly>
  <NonSSRFriendlyComponent />
</ClientOnly>

• 関連: SSR 互換性

`$frontmatter` テンプレートグローバル

Vue 式で現在のページの フロントマター データに直接アクセスします。

---
title: Hello
---

# {{ $frontmatter.title }}

`$params` テンプレートグローバル

Vue 式で現在のページの 動的ルートパラメータ に直接アクセスします。

- package name: {{ $params.pkg }}
- version: {{ $params.version }}