DEV Community

Cover image for I built vue-pdf-export - a Vue 3 PDF Export library for real-world browser apps
Saurabh Choudhary
Saurabh Choudhary

Posted on

I built vue-pdf-export - a Vue 3 PDF Export library for real-world browser apps

#vue #nuxt #typescript #npm

Hey everyone 👋

I recently released vue-pdf-export, a Vue 3 + TypeScript library for generating PDFs directly in the browser.

I built it after repeatedly needing the same PDF features across different Vue projects and wanting one reusable solution instead of rebuilding the same logic each time.

What it supports

Some of the main features include:

  • Canvas and selectable-text PDF rendering
  • Automatic and manual pagination
  • Preview, download, and browser print
  • Headers and footers
  • Watermarks and page targeting
  • Clickable PDF links
  • Password protection and permissions
  • PDF metadata and compression
  • Progress reporting and cancellation
  • Large-document rendering
  • Blob, ArrayBuffer, Base64, and PDF data URL outputs
  • data-pdf-ignore for excluding UI elements from exports
  • Export-only page and body styling
  • Nuxt 3 and Nuxt 4 SSR-safe package imports

The package also has compatibility coverage for npm, pnpm, Yarn, Yarn Plug'n'Play, and Bun.

Install 

npm install vue-pdf-export
Enter fullscreen mode Exit fullscreen mode

Basic usage 

<script setup lang="ts">
import { ref } from 'vue'
import { Html2Pdf } from 'vue-pdf-export'
import 'vue-pdf-export/style.css'

const pdf = ref<InstanceType<typeof Html2Pdf> | null>(null)
</script>

<template>
  <button @click="pdf?.generatePdf()">
    Generate PDF
  </button>

  <Html2Pdf
    ref="pdf"
    filename="example.pdf"
  >
    <template #pdf-content>
      <h1>Hello from Vue</h1>
      <p>This content will be exported to PDF.</p>
    </template>
  </Html2Pdf>
</template>
Enter fullscreen mode Exit fullscreen mode

Canvas or selectable text

Use Canvas rendering when HTML/CSS fidelity is the priority:

<Html2Pdf render-mode="canvas">
Enter fullscreen mode Exit fullscreen mode

Or use selectable-text rendering when users need to select, search, and copy text from the generated PDF:

<Html2Pdf render-mode="text">
Enter fullscreen mode Exit fullscreen mode

This makes the package useful for both highly visual layouts and text-heavy documents such as reports, invoices, statements, and documentation.

Programmatic output

The generated PDF can also be used directly in your application:

const blob = await pdf.value?.generatePdf()
const buffer = await pdf.value?.generatePdfArrayBuffer()
const base64 = await pdf.value?.generatePdfBase64()
Enter fullscreen mode Exit fullscreen mode

This is useful when you want to upload, store, preview, or pass the PDF to another API instead of immediately downloading it.

Nuxt support

The package is designed so importing it does not crash Nuxt SSR.

Actual PDF generation still happens in the browser, so a typical Nuxt integration can use ClientOnly or lazy client-side rendering when needed.

Try it

🧪 Live Playground

https://vue-pdf-export-playground.vercel.app/

📖 Documentation

https://vue-pdf-export-docs.vercel.app/

📦 npm

https://www.npmjs.com/package/vue-pdf-export

💬 Feature requests & feedback

https://vue3-pdf-export.canny.io/

I’d really appreciate feedback from Vue and Nuxt developers, especially around real-world PDF edge cases, API ergonomics, pagination, large documents, or features you would expect from a Vue PDF library.

The project is still evolving, and real-world feedback is one of the most useful inputs for deciding what to improve next.

Top comments (0)