Core Concepts

Document & Pages

Every vue-pdf document is built using the <Document> root component and one or more <Page> children. Together they define the overall structure and page-level properties of your PDF.

The Document Component

<Document> is the root of every PDF. It accepts optional metadata props and wraps all pages. It is also responsible for providing the renderer context to all child components.

vue

<template>
  <Document title="My Report" author="John Doe">
      <Page size="A4">
        <Text>Hello, PDF!</Text>
      </Page>
    </Document>
</template>

Document Props

Prop	Type	Default	Description
`title`	`string`	—	PDF document title (metadata).
`author`	`string`	—	PDF document author (metadata).
`subject`	`string`	—	PDF document subject (metadata).
`keywords`	`string`	—	PDF document keywords (metadata).
`creator`	`string`	—	PDF document creator (metadata).
`producer`	`string`	—	PDF document producer (metadata).
`pageLayout`	`string`	—	Page layout mode for the PDF viewer.
`pageMode`	`string`	—	Page display mode for the PDF viewer.
`onRender`	`(props: OnRenderProps) => void`	—	Callback after each successful render.

The Page Component

Each <Page> represents a single page in the PDF. Pages define their dimensions and serve as containers for all content.

Page Props

Prop	Type	Default	Description
`size`	`PageSize \| [number, number]`	`'A4'`	Page size. Use named sizes ('A4', 'LETTER', 'LEGAL', etc.) or custom [width, height] in points.
`orientation`	`'portrait' \| 'landscape'`	`'portrait'`	Page orientation.
`style`	`Style`	—	Style object for the page container. Supports padding, background, and flex layout.
`wrap`	`boolean`	`true`	Whether content should wrap to the next page when it exceeds the current one.
`debug`	`boolean`	`false`	Display debug borders on layout elements.
`dpi`	`number`	`72`	DPI for the page. Affects image and canvas rendering.

Predefined Page Sizes

vue-pdf includes all common page sizes:

A0 — A10ISO 216 A-series

B0 — B10ISO 216 B-series

C0 — C10ISO 216 C-series

LETTER8.5 × 11 in

LEGAL8.5 × 14 in

TABLOID11 × 17 in

EXECUTIVE7.25 × 10.5 in

POSTCARD4 × 6 in

Custom Page Size

Pass an array of [width, height] in points (1 point = 1/72 inch):

vue

<template>
  <Document>
    <!-- 4x6 inches (288pt x 432pt) -->
    <Page :size="[288, 432]">
      <Text>Custom-sized page</Text>
    </Page>
  </Document>
</template>

Page Break

Use the break style property on any element to force a page break:

vue

<template>
  <Document>
    <Page>
      <View>
        <Text>This is on page 1</Text>
      </View>
      <View style="break: 'before'">
        <Text>This starts on a new page</Text>
      </View>
    </Page>
  </Document>
</template>