Components

View

The <View> component is the fundamental layout building block — analogous to a <div> in HTML. Every View is a flex container by default.

Props

Prop	Type	Default	Description
`style`	`Style`	—	Standard style object. Supports all layout, box model, and appearance properties.
`fixed`	`boolean`	—	When true, the element is fixed to the page and repeated on every page.
`render`	`(props: { pageNumber: number, subPageNumber: number }) => Element \| Element[] \| null`	—	Render prop for conditional rendering per-page. Must return plain element objects whose type is a primitive string (e.g. 'VIEW'), not Vue vnodes.
`wrap`	`boolean`	`true`	Whether children can wrap to the next page.
`debug`	`boolean`	—	Show debug borders for this element.

Usage

vue

<template>
  <Document>
    <Page size="A4">
      <View :style="{
        padding: 20,
        backgroundColor: '#f0f0f0',
        borderRadius: 8,
        marginBottom: 16,
      }">
        <Text :style="{ fontSize: 16, fontWeight: 'bold' }">
          Section Title
        </Text>
        <Text :style="{ fontSize: 12, marginTop: 8 }">
          Section content goes here.
        </Text>
      </View>
    </Page>
  </Document>
</template>

Fixed Elements

A View with fixed is rendered on every page at the same position. Useful for headers and footers:

vue

<template>
  <Document>
    <Page size="A4">
      <!-- Fixed header -->
      <View :fixed="true" :style="{
        position: 'absolute',
        top: 20,
        left: 40,
        right: 40,
        borderBottomWidth: 1,
        borderBottomColor: '#000',
        paddingBottom: 8,
      }">
        <Text :style="{ fontSize: 10 }">Company Name — Report Title</Text>
      </View>

      <!-- Fixed footer -->
      <View :fixed="true" :style="{
        position: 'absolute',
        bottom: 20,
        left: 40,
        right: 40,
        borderTopWidth: 1,
        borderTopColor: '#000',
        paddingTop: 8,
      }">
        <Text :style="{ fontSize: 10, textAlign: 'center' }">
          Page <Text render="{(props) => props.pageNumber}" />
        </Text>
      </View>

      <!-- Main content -->
      <View :style="{ padding: 80, paddingTop: 50 }">
        <Text>Body content that spans multiple pages...</Text>
      </View>
    </Page>
  </Document>
</template>

Render Prop

The render prop on <Text> provides access to page numbering and sub-page data:

vue

<template>
  <Document>
    <Page size="A4">
      <Text
        :render="({ pageNumber, subPageNumber }) => `Page ${pageNumber}`&quot;
        :style=&quot;{ fontSize: 10 }&quot;
      />
    </Page>
  </Document>
</template>