DEV Community

Cover image for Building Better PDF Workflows in Vue 3 with vue-pdf-export
Saurabh Choudhary
Saurabh Choudhary

Posted on

Building Better PDF Workflows in Vue 3 with vue-pdf-export

#vue #nuxt #typescript #npm

Hey Vue developers 👋

I’ve been working on vue-pdf-export, a Vue 3 + TypeScript package for generating PDFs directly in the browser.

I originally created it because I kept rebuilding the same PDF features across different Vue projects - pagination, preview, printing, headers, footers, progress handling, and long-document support.

Some of the things it supports today:

  • Canvas and selectable/searchable PDF text
  • Automatic and manual pagination
  • Preview, download, and browser print
  • Headers and footers
  • Watermarks
  • Password protection and PDF permissions
  • Clickable links
  • Progress reporting and cancellation
  • Blob, ArrayBuffer, and Base64 output
  • Export-only styling and data-pdf-ignore
  • Nuxt 3 and Nuxt 4 SSR-safe imports

Install 

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

Small example 

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

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

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

  <Html2Pdf ref="pdfRef" filename="report.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

Try it

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

I’d really like feedback from Vue developers who have worked with PDFs in production - especially around pagination, large documents, selectable text, and API ergonomics.

Top comments (0)