---
title: Nuxt
description: Lee y renderiza lo que publicas desde un sitio Nuxt con @hollware/nuxt, por un service binding o un token de lectura, con vistas previas e imágenes listas.
section: frameworks
order: 1
---

# Nuxt

`@hollware/nuxt` es un módulo de Nuxt: composables que leen el contenido publicado, componentes que lo renderizan, vistas previas de borradores y una caché que Hollware purga cuando publicas.

```sh
npm install @hollware/nuxt
```

## Configúralo

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@hollware/nuxt'],
  hollware: { site: 'my-site' },
  nitro: { preset: 'cloudflare_module', cloudflare: { deployConfig: true, nodeCompat: false } },
})
```

En Cloudflare, vincula tu Worker de Hollware en el `wrangler.jsonc` del sitio, y el módulo lee por ahí, sin red y sin token:

```jsonc
"services": [{ "binding": "HOLLWARE", "service": "my-cms", "entrypoint": "Hollware" }]
```

En cualquier otro lugar, pon en `hollware.url` la dirección de tu Hollware y un token de lectura (`npx hollware token create --read`) en `NUXT_HOLLWARE_TOKEN`. El token se queda en el servidor: las páginas leen por las rutas `/_hollware/` del propio sitio.

## Muestra una entrada

```vue
<script setup lang="ts">
const route = useRoute()
const { data } = await useHollwareEntry('blog', 'es', route.params.slug as string)
</script>

<template>
  <article v-if="data">
    <h1>{{ data.entry.frontmatter.title }}</h1>
    <HollwareImage :entry="data.entry" field="img" />
    <HollwareContent :entry="data.entry" :components="{ callout: Callout }" />
  </article>
</template>
```

- **`<HollwareContent>`** 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`) 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>`** renderiza la imagen que guarda un campo del frontmatter, como una portada, con su alt, su tamaño y las copias que Hollware hizo de ella. Cualquier atributo que le des gana: `<HollwareImage :entry field="img" loading="lazy" sizes="50vw" />`.

Una entrada que no está publicada responde un 404.

## Listas, traducciones y el sitio

```vue
<script setup lang="ts">
const { data } = await useHollwareEntries('blog', { locale: 'es', limit: 10 })
</script>

<template>
  <ul>
    <li v-for="post in data?.entries" :key="post.id">
      <HollwareImage :entry="post" field="img" loading="lazy" />
      <NuxtLink :to="`/blog/${post.slug}/`">{{ post.frontmatter.title }}</NuxtLink>
    </li>
  </ul>
</template>
```

| Composable | Entrega |
| --- | --- |
| `useHollwareEntry(collection, locale, slug)` | una entrada publicada, con su documento |
| `useHollwareEntries(collection, { locale, tag, limit, cursor })` | una página de entradas publicadas, de la más nueva a la más antigua |
| `useHollwareTranslations(collection, group)` | las entradas de un grupo de traducción |
| `useHollwareSite()` | el sitio: sus locales y colecciones |
| `useHollware(event)` (servidor) | el lector mismo, para rutas propias |

Los campos que tu colección deja a Hollware, como una fecha o el tiempo de lectura, llegan llenos en el frontmatter ([Configura tu contenido](/es/docs/configure-your-content/)).

## Vistas previas

**Vista previa en el sitio**, en el admin, abre la página de la entrada con un enlace firmado solo para esa entrada, válido por una hora. El módulo cambia el enlace por una cookie `HttpOnly`, lee la última revisión de la entrada, borrador incluido, y no deja que nada guarde lo que responde. Necesita la `url` del sitio en el admin, en **Sitio**.

## Caché

`hollware.cache: 'purge'` guarda las páginas de tu sitio en Workers Cache y deja que Hollware las purgue, por etiqueta, en cuanto publicas. Consulta [Caché](/es/docs/caching/).

Cada página lleva `<meta name="generator" content="Hollware">`; `hollware.generator: false` lo quita.

## Un sitio completo

`examples/nuxt-blog` en el repositorio es un blog en Nuxt sobre un Worker que lee el playground por un service binding, con vistas previas.