Rendering PDFs

A document, not a DOM screenshot

Use Forme's Document and Page primitives with pdfcn-vue components. Forme lays out its own document tree. Website CSS and HTML elements do not become PDF styles; use component props and theme tokens.

Render in the browser

Initialize the browser WASM renderer once, serialize your document, and render the result. In Nuxt, call this from a client event or onMounted. Keep the blob URL alive while the PDF is displayed.

import { serialize } from '@formepdf/vue'
import { init, renderSerializedDoc } from '@formepdf/core/worker'
import wasmUrl from '@formepdf/core/pkg-web/forme_bg.wasm?url'
import InvoiceMinimal from '@/components/pdf/blocks/invoice-minimal/InvoiceMinimal.vue'

await init(wasmUrl)

async function createInvoicePreview(): Promise<{ url: string; dispose: () => void }> {
  const serialized = await serialize(InvoiceMinimal)
  const bytes = await renderSerializedDoc(serialized)
  const blob = new Blob([new Uint8Array(bytes)], { type: 'application/pdf' })
  const url = URL.createObjectURL(blob)

  return { url, dispose: () => URL.revokeObjectURL(url) }
}

const preview = await createInvoicePreview()
// Bind preview.url to a preview or download link.
// Call preview.dispose() when replacing it or leaving the view.

Render on the server

Use the Node build of @formepdf/core in a server route. Send the PDF with the application/pdf content type. The Nuxt integration guide includes an endpoint example.

Handle failures and resources

• Show a loading state while fonts, WASM, and the document render.
• Catch renderer failures and offer an explicit retry.
• Revoke object URLs on replacement and unmount.
• Keep custom fonts available to the renderer. CSS font imports only affect the website.
• For frequent edits, debounce updates and discard outdated render results.