Components

Document

The root component of every vue-pdf document. It wraps all pages and provides the rendering context that connects Vue components to the PDF output.

Props

Prop	Type	Default	Description
`title`	`string`	—	PDF document title — appears in document metadata.
`author`	`string`	—	PDF document author.
`subject`	`string`	—	PDF document subject.
`keywords`	`string`	—	Comma-separated keywords.
`creator`	`string`	—	Application that created the document.
`producer`	`string`	—	Application that produced the PDF.
`pageLayout`	`'singlePage' \| 'oneColumn' \| 'twoColumnLeft' \| 'twoColumnRight' \| 'twoPageLeft' \| 'twoPageRight'`	—	How pages are displayed in the PDF viewer.
`pageMode`	`'useNone' \| 'useOutlines' \| 'useThumbs' \| 'fullScreen'`	—	How the document appears when opened.
`onRender`	`(props: { blob?: Blob }) => void`	—	Called after each render with the resulting blob (browser only).

Usage

vue

<template>
  <Document
      title="Annual Report 2024"
      author="Acme Inc."
      subject="Financial Results"
      keywords="annual, report, 2024"
      creator="vue-pdf"
    >
      <Page size="A4">
        <Text>Document content...</Text>
      </Page>
    </Document>
</template>

How It Works

<Document> creates a rendering context via Vue's provide/inject. Child components (<Page>, <Text>, <View>, etc.) register themselves with this context. When the tree is complete, the reconciler walks the mounted DOM, builds an internal instance tree, and passes it to the PDF layout and render pipeline.

When used with usePDF or <PDFViewer>, the Document connects to a sink that receives the PDF output. When used standalone (on the server), it creates its own pdf() instance and calls updateContainer() on re-render.

<Document> expects only <Page> children. All content must be placed inside a <Page>.