API en Tiempo de Ejecución

VitePress ofrece varias API integradas para permitir el acceso a los datos de la aplicación. VitePress también viene con algunos componentes integrados que se pueden utilizar globalmente.

Los métodos auxiliares son importaciones globales de vitepress y se utilizan a menudo en componentes Vue de temas personalizados. Sin embargo, también se pueden utilizar dentro de páginas .md porque los archivos de rebajas se compilan en Componentes de Archivo Único Vue (SFC).

Métodos que comienzan con use* indican que es una función de API de Composición Vue 3 ("Composable") que solo puede ser utilizada dentro de setup() o <script setup>.

useData composable

Retorna datos específicos de la página. El objeto devuelto tiene el siguiente tipo:

interface VitePressData<T = any> {
  /**
   * Metadátos a nivel del sitio
   */
  site: Ref<SiteData<T>>
  /**
   * themeConfig de .vitepress/config.js
   */
  theme: Ref<T>
  /**
   * Metadátos a nível de la página
   */
  page: Ref<PageData>
  /**
   * Frontmatter de la página
   */
  frontmatter: Ref<PageData['frontmatter']>
  /**
   * Parámetros de ruta dinámica
   */
  params: Ref<PageData['params']>
  title: Ref<string>
  description: Ref<string>
  lang: Ref<string>
  isDark: Ref<boolean>
  dir: Ref<string>
  localeIndex: 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
}

Ejemplo:

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

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

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

useRoute composable

Devuelve el objeto de ruta actual con el siguiente tipo:

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

useRouter composable

Devuelve la instancia del enrutador VitePress para que pueda navegar mediante programación a otra página.

interface Router {
  /**
   * Ruta atual.
   */
  route: Route
  /**
   * Navegar para una nueva URL.
   */
  go: (to?: string) => Promise<void>
  /**
   * Llamado antes del cambio de ruta. Devuelve 'falso' para cancelar la navegación.
   */
  onBeforeRouteChange?: (to: string) => Awaitable<void | boolean>
  /**
   * Se llama antes de que se cargue el componente de la página (después de que se haya actualizado el estado del historial).
   * atualizado). Retorne `false` para cancelar la navegación.
   */
  onBeforePageLoad?: (to: string) => Awaitable<void | boolean>
  /**
   * Llamado después del cambio de ruta.
   */
  onAfterRouteChanged?: (to: string) => Awaitable<void>
}

withBase helper

• Tipo: (path: string) => string

agrega la base configurada a una ruta URL determinada. Consulte también Base URL.

<Content /> component

El componente <Content /> muestra el contenido de markdown renderizado. Útil al crear tu propio tema.

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

<ClientOnly /> component

El componente <ClientOnly /> muestra tu slot solo del lado del cliente.

Debido a que las aplicaciones VitePress se interpretan en el lado del servidor en Node.js cuando generan compilaciones estáticas, cualquier uso de Vue debe seguir los requisitos del código universal. En resumen, asegúrese de acceder solo a las API del navegador/DOM en ganchos beforeMount o mounted.

Si está utilizando o demostrando componentes que no son compatibles con SSR (por ejemplo, contienen directivas personalizadas), puede incluirlos dentro del componente. ClientOnly.

<ClientOnly>
  <NonSSRFriendlyComponent />
</ClientOnly>

• Relacionado: Compatibilidad SSR

$frontmatter template global

Accede directamente a los datos frontmatter de la página actual en expresiones Vue.

---
title: Olá
---

# {{ $frontmatter.title }}

$params template global

Accede directamente a los parámetros de ruta dinámica de la página actual en expresiones Vue.

- nombre del paquete: {{ $params.pkg }}
- versión: {{ $params.version }}