vue-pdf-embed

vue-pdf-embed is a lightweight, dependency-free component for rendering PDF documents inside Vue 3 applications. Built on top of PDF.js, it handles URL, Base64, binary, and pre-loaded document sources while exposing an ergonomic props/events/slots API for controlling pages, scale, rotation, and rendering behavior.

Beyond basic display, it ships optional text and annotation layers for selectable, searchable, link-aware documents, plus composables for shared document loading and full-text search. Password-protected files, printing, and downloading are all supported out of the box with no extra configuration.

What You Get

• A drop-in <VuePdfEmbed> component for rendering PDFs from URL, Base64, binary, or a PDFDocumentProxy
• Optional text and annotation layers for selectable text, links, and interactive form fields
• Composables (usePdfDocument, usePdfSearch) for shared loading and highlighted full-text search
• Built-in password handling, page selection, rotation, scaling, printing, and downloading
• An essential build for manual web-worker configuration under strict CSP environments

Common Use Cases

• Displaying invoices, contracts, or reports inside a Vue dashboard
• Building a document viewer with search, print, and download controls
• Rendering password-protected or multi-page PDFs with per-page slots
• Embedding PDFs in the browser directly via a CDN script tag

Under The Hood

Architecture - The package centers on a single VuePdfEmbed.vue single-file component that drives PDF.js: it resolves a source into a PDFDocumentProxy, renders each requested page onto a canvas, and conditionally mounts text and annotation layers. Cross-cutting logic lives in src/composables.ts (usePdfDocument, usePdfSearch), src/highlighter.ts for search matching, and src/utils.ts, with a separate index.essential.ts entry that exposes GlobalWorkerOptions for manual worker configuration.

Tech Stack - Written in TypeScript for Vue 3, bundled with Vite via multiple config files (vite.config.ts, vite.config.essential.ts) and typed through several tsconfig variants. The sole runtime dependency is pdfjs-dist; there are no Vue peer-dependency requirements beyond Vue 3 itself.

Code Quality - The repository includes a tests suite run under Vitest, ESLint and Prettier configs, a .husky pre-commit hook with lint-staged, and strict TypeScript. Source is split cleanly by concern (component, composables, highlighter, utils, types), reflecting a well-maintained, disciplined codebase.

API Design - The public surface is idiomatic Vue: reactive props for source, page, scale, rotation, and layer toggles, emitted events for the load/render/password lifecycle, named slots for per-page content, and template-ref methods for print and download. Composables let advanced users pre-load and search documents, keeping the common case a one-line component while still exposing power features.