GitHub
Getting Started

Quick Start

After installing @vuepdf/renderer (or @vuepdf/nuxt for Nuxt), you can start composing PDF documents using Vue components.

Minimal Document

Every PDF document starts with a <Document> containing one or more <Page> elements:

MyDocument.vue
<template>
  <Document>
    <Page size="A4">
      <View style="padding: 40px">
        <Text style="font-size: 18px; font-family: 'Helvetica'">
          Hello, World!
        </Text>
      </View>
    </Page>
  </Document>
</template>

Rendering in the Browser

Slot your document into <PDFViewer> to preview it in an iframe. It renders the PDF for you and re-renders whenever the document changes:

PDFPreview.vue
<script setup lang="ts">
import { PDFViewer } from '@vuepdf/renderer'
import MyDocument from './MyDocument.vue'
</script>

<template>
  <PDFViewer :style="{ width: '100%', height: '600px' }">
    <MyDocument />
  </PDFViewer>
</template>
Need the blob or the render loop itself? BlobProvider hands you { url, blob, error, loading } in a scoped slot, and usePDF gives you a [state, update] tuple to drive yourself.
These are browser-only. For server-side rendering, see the pdf() function and renderToFile APIs.

Adding Pages

Add multiple pages to your document. Each page can have its own size and orientation:

vue
<template>
  <Document>
    <Page size="A4" style="padding: 40px">
      <Text style="font-size: 24px; margin-bottom: 16px">
        Page 1 — Title
      </Text>
      <Text style="font-size: 12px">
        Content for the first page.
      </Text>
    </Page>

    <Page size="LETTER" style="padding: 40px">
      <Text style="font-size: 24px; margin-bottom: 16px">
        Page 2 — More Content
      </Text>
      <Text style="font-size: 12px">
        Content for the second page.
      </Text>
    </Page>
  </Document>
</template>

Styling with Flexbox

Every <View> is a flex container. Use standard flex properties for layout:

vue
<template>
  <Document>
    <Page size="A4">
      <View style="display: flex; flex-direction: row; padding: 40px">
        <View style="flex: 1; padding: 20px; background-color: #f0f0f0">
          <Text style="font-size: 16px">Left Column</Text>
        </View>
        <View style="flex: 1; padding: 20px; background-color: #e0e0e0">
          <Text style="font-size: 16px">Right Column</Text>
        </View>
      </View>
    </Page>
  </Document>
</template>

Generating a Download

Use PDFDownloadLink to create a downloadable link:

vue
<script setup lang="ts">
import { PDFDownloadLink } from '@vuepdf/renderer'
import MyDocument from './MyDocument.vue'
</script>

<template>
  <PDFDownloadLink file-name="report.pdf">
    <template #document>
      <MyDocument />
    </template>

    <template #default="{ loading }">
      {{ loading ? 'Preparing...' : 'Download PDF' }}
    </template>
  </PDFDownloadLink>
</template>

Server-Side Rendering

On Node.js, use the pdf() function to generate PDFs programmatically:

generate.ts
import { pdf } from '@vuepdf/renderer'
import { createSSRApp } from 'vue'
import MyDocument from './MyDocument.vue'

const app = createSSRApp(MyDocument)
const instance = pdf(app)

// Generate as buffer
const buffer = await instance.toBuffer()

// Or save to file
await instance.toBlob().then(blob => {
  // Write blob to file...
})

Next Steps