vitepress/docs/es/reference/runtime-api.md

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

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

Devuelve el objeto de ruta actual con el siguiente tipo:

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

useRouter

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

• Tipo: (path: string) => string

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

<Content />

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

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

<ClientOnly />

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

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

---
title: Olá
---

# {{ $frontmatter.title }}

$params

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 }}