Vue

@hollware/vue is for a Vue 3 app that is not Nuxt (for Nuxt, use @hollware/nuxt). Its components render entries with your own Vue components, on the server and in the browser, and its composables read published content from a browser-only app.

npm install @hollware/vue

A browser-only app

The composables read over HTTP with a read token (npx hollware token create --read). The token is in the page, so anyone can read it: it reads published content and nothing else. Hollware accepts it only from the origins of the site's Origins that read from the browser, in the admin under Site: add your app's, and http://localhost:5173 for development.

// 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', 'en', () => props.slug)
</script>

<template>
  <p v-if="pending">Loading…</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>Not found</p>
</template>

When an argument changes, the composable reads again and keeps the previous data meanwhile. A browser-only app has no previews: the preview link becomes a cookie that only a server can read.

A server that renders Vue

On Vite SSR, Vike or any server of your own, the server helpers are those of React, re-exported: createHollware, getEntry, listEntries, previewRedirect and previewHeaders, over a service binding or a read token. Render the entry on the server with <HollwareContent :entry> and send the same entry to the browser to hydrate. Previews work as in React.

The components

• <HollwareContent :entry :components> renders the entry from the document Hollware stored when it was written: no Markdown parser reaches the page. components maps the components of your entries (::callout is callout) to your own Vue components; anything else renders as its plain tag. Its images come with their srcset, sizes, width and height.
• <HollwareImage :entry field> renders the image a frontmatter field holds, with its alt, its size and the srcset of its copies. Any attribute you give wins.