deniz.in

Markets

Weather

Loading weather

· via dev.to (home feed)

vue-pdf-export: open-source library brings browser-side PDF generation to Vue 3 and Nuxt

A new open-source Vue 3 and TypeScript library generates PDFs entirely in the browser, with canvas and selectable-text rendering, pagination, encryption and Nuxt SSR-safe imports.

vue-pdf-export: open-source library brings browser-side PDF generation to Vue 3 and Nuxt

A developer has released vue-pdf-export, an open-source library that adds PDF generation to Vue 3 applications directly in the browser. In a post on dev.to, Saurabh Zaiswal explains that the project grew out of repeatedly implementing the same PDF features across different Vue projects and wanting a single reusable solution instead of rebuilding that logic every time.

What the library covers

According to the announcement, the library is written in TypeScript and offers two rendering paths: a canvas mode for when matching HTML and CSS output exactly is the priority, and a selectable-text mode for documents whose text needs to be selected, searched and copied. Around that core it bundles capabilities that usually have to be assembled piece by piece — automatic and manual pagination, headers and footers, watermarks with page targeting, clickable PDF links, password protection and permission settings, PDF metadata and compression, progress reporting with cancellation, and handling for large documents. Preview, download and browser print are supported out of the box.

The library also includes practical touches for fitting exports into an existing interface. A data-pdf-ignore attribute lets developers exclude specific UI elements from the export, and export-only page and body styling makes it possible to apply styles that appear only in the generated PDF.

Installation follows the usual pattern with npm install vue-pdf-export, and the author notes compatibility with npm, pnpm, Yarn — including Plug'n'Play mode — and Bun.

Component-based API

Usage is built around an Html2Pdf component. Content destined for the PDF goes into a pdf-content slot, and a template ref exposes methods such as generatePdf() for triggering an export from a button or elsewhere in the page. The rendering path is chosen via a prop: the canvas mode for highly visual layouts, the text mode for text-heavy documents such as reports, invoices, statements and documentation.

The output is not limited to a file download. The component additionally offers generatePdfArrayBuffer() and generatePdfBase64() alongside the Blob-returning generatePdf(), and the post also lists PDF data URLs among the supported outputs. According to the author, this covers cases where the PDF should be uploaded, stored, previewed or handed to another API rather than saved immediately.

Nuxt and server-side rendering

The package is designed so that importing it will not break Nuxt apps during server-side rendering, with SSR-safe imports for both Nuxt 3 and Nuxt 4. Actual PDF generation still happens in the browser, so a typical Nuxt integration may need ClientOnly or lazy client-side rendering — an acknowledgement that a browser-only API still requires the usual care in an SSR context.

Why it matters

Export-to-PDF is a feature that shows up in almost every business application and is rarely as simple as it looks. Pagination, headers, watermarks, encryption and consistent output across browsers tend to push teams toward either generic low-level libraries plus a lot of glue code, or server-side rendering infrastructure. A Vue-native component that handles those concerns — while remaining SSR-safe for Nuxt and supporting both pixel-accurate and selectable-text output — removes a meaningful chunk of that work for Vue teams.

The author frames the project as still evolving and is explicitly asking Vue and Nuxt developers for feedback, particularly on real-world PDF edge cases, API ergonomics, pagination behaviour and large-document performance, making this a library worth watching rather than a finished product.

  • #vue
  • #pdf
  • #typescript
  • #open-source
  • #front-end

Related posts