Renderiza lo que publicas en una app de Vue 3 con @hollware/vue, desde un servidor que renderiza Vue o desde una app solo de navegador con un token de lectura.

Vue

@hollware/vue es para una app de Vue 3 que no es Nuxt (para Nuxt, usa @hollware/nuxt). Sus componentes renderizan entradas con tus propios componentes de Vue, en el servidor y en el navegador, y sus composables leen el contenido publicado desde una app solo de navegador.

npm install @hollware/vue

Una app solo de navegador

Los composables leen por HTTP con un token de lectura (npx hollware token create --read). El token queda en la página, así que cualquiera puede leerlo: lee el contenido publicado y nada más. Hollware lo acepta solo desde los orígenes de Orígenes que leen desde el navegador del sitio, en el admin, en Sitio: agrega el de tu app, y http://localhost:5173 para desarrollar.

// main.ts
import { createHollwarePlugin } from '@hollware/vue'

createApp(App)
  .use(createHollwarePlugin({ site: 'my-site', url: 'https://cms.example.com', token: 'hw_read_…' }))
  .mount('#app')

<script setup lang="ts">
import { HollwareContent, HollwareImage, useHollwareEntry } from '@hollware/vue'

const props = defineProps<{ slug: string }>()
const { data, error, pending } = useHollwareEntry('blog', 'es', () => props.slug)
</script>

<template>
  <p v-if="pending">Cargando…</p>
  <p v-else-if="error">{{ error.message }}</p>
  <article v-else-if="data">
    <HollwareImage :entry="data" field="img" />
    <HollwareContent :entry="data" :components="{ callout: Callout }" />
  </article>
  <p v-else>No encontrado</p>
</template>

Composable	Entrega
`useHollwareEntry(collection, locale, slug)`	`{ data, error, pending }` de una entrada publicada; cada argumento puede ser un ref o un getter
`useHollwareEntries(collection, { locale, tag, limit, cursor })`	`{ data, error, pending }` de una página de entradas, de la más nueva a la más antigua

Cuando cambia un argumento, el composable vuelve a leer y mantiene el data anterior mientras tanto. Una app solo de navegador no tiene vistas previas: el enlace de vista previa se convierte en una cookie que solo un servidor puede leer.

Un servidor que renderiza Vue

En Vite SSR, Vike o cualquier servidor propio, los helpers de servidor son los de React, reexportados: createHollware, getEntry, listEntries, previewRedirect y previewHeaders, por un service binding o un token de lectura. Renderiza la entrada en el servidor con <HollwareContent :entry> y envía la misma entrada al navegador para hidratarla. Las vistas previas funcionan como en React.

Los componentes

<HollwareContent :entry :components> renderiza la entrada desde el documento que Hollware guardó al escribirla: ningún parser de Markdown llega a la página. components asigna los componentes de tus entradas (::callout es callout) a tus propios componentes de Vue; todo lo demás se renderiza como su etiqueta. Sus imágenes llegan con su srcset, sizes, width y height.
<HollwareImage :entry field> renderiza la imagen que guarda un campo del frontmatter, con su alt, su tamaño y el srcset de sus copias. Cualquier atributo que le des gana.