Vue PDF Viewer

The easiest way to embed PDF files in your Vue 3 application with a complete, ready‑to‑use interface.

---

📚 Documentation

The full walkthrough, advanced examples, and API reference live in our docs site:

👉 https://www.embedpdf.com/vue-pdf-viewer

---

🚀 Introduction

The @embedpdf/vue-pdf-viewer package provides a complete, production-ready PDF viewing experience for Vue 3 applications.

It is designed to be the fastest way to get a high-quality PDF viewer into your app. You don't need to build toolbars, handle layout logic, or worry about CSS—it just works.

$3

- Ready-to-use UI — Includes a polished toolbar, sidebar, and thumbnails.
- Responsive — Adapts seamlessly to mobile and desktop screens.
- Themable — Built-in light/dark modes and support for custom brand colors.
- Configurable — Easily disable features you don't need (e.g., printing or downloading).
- TypeScript — Fully typed for a great developer experience.
- Nuxt Ready — Works seamlessly with Nuxt 3 and SSR.

---

📦 Installation

``bash
npm install @embedpdf/vue-pdf-viewer


or

Import the PDFViewer component and render it with a PDF source.

`vue



`

That's it! You now have a fully functional PDF viewer.

$3

The component works seamlessly with Nuxt 3. Since it uses browser APIs (Canvas, WebAssembly), wrap it in to avoid hydration errors:

`vue

`

---

🎨 Customization

$3

The viewer includes a robust theming system. You can set the preference to 'light', 'dark', or 'system', and even override specific colors to match your brand.

`vue
:config="{
src: '/document.pdf',
theme: {
preference: 'system',
light: {
accent: {
primary: '#42b883', // Custom brand color (Vue Green)
},
},
},
}"
/>
`

$3

Easily customize the UI by disabling features you don't need via the disabledCategories option:

`vue
:config="{
src: '/document.pdf',
disabledCategories: ['annotation', 'print', 'export'],
}"
/>
`

Available categories include: zoom, annotation, redaction, document, page, panel, tools, selection, and history.

---

⚙️ Configuration Options

The config prop accepts the following top-level options:

| Option | Type | Description |
| :------------------- | :---------------------------------- | :--------------------------------------------- |
| src | string | URL or path to the PDF document. |
| theme | object | Theme configuration (preference, overrides). |
| tabBar | 'always' \| 'multiple' \| 'never' | Control visibility of the document tab bar. |
| disabledCategories | string[] | Hide specific UI features by category. |
| i18n | object | Configure locales and translations. |
| annotations | object | Configure annotation defaults (author, tools). |
| zoom | object | Configure default zoom levels and limits. |
| scroll | object | Configure scroll direction and logic. |

---

🔌 Events & Registry

We emit standard Vue events for initialization and readiness.

`vue



`

$3

- @init - Emitted when the viewer container is initialized.
- @ready - Emitted when the plugin registry is ready and plugins are loaded.

---

🧩 Headless Mode

Need complete control over the UI? Building a custom design system?

Check out our Headless Composables which provide reactive state and logic without the UI:

`bash
npm install @embedpdf/core @embedpdf/plugin-zoom ...
``

Read the Headless Documentation for more details.

---

📄 License

EmbedPDF is MIT licensed. Commercial use is welcome—just keep the copyright headers intact.