Vue component for embedding PDF documents
npm install @embedpdf/vue-pdf-viewer
The easiest way to embed PDF files in your Vue 3 application with a complete, readyโtoโuse interface.
---
The full walkthrough, advanced examples, and API reference live in our docs site:
๐ https://www.embedpdf.com/vue-pdf-viewer
---
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.
- 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.
---
``bash`
npm install @embedpdf/vue-pdf-vieweror
pnpm add @embedpdf/vue-pdf-vieweror
yarn add @embedpdf/vue-pdf-viewer
---
Import the PDFViewer component and render it with a PDF source.
`vue
src: 'https://snippet.embedpdf.com/ebook.pdf',
theme: { preference: 'light' },
}"
/>
`
That's it! You now have a fully functional PDF viewer.
The component works seamlessly with Nuxt 3. Since it uses browser APIs (Canvas, WebAssembly), wrap it in to avoid hydration errors:
`vue`
---
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`
src: '/document.pdf',
theme: {
preference: 'system',
light: {
accent: {
primary: '#42b883', // Custom brand color (Vue Green)
},
},
},
}"
/>
Easily customize the UI by disabling features you don't need via the disabledCategories option:
`vue`
src: '/document.pdf',
disabledCategories: ['annotation', 'print', 'export'],
}"
/>
Available categories include: zoom, annotation, redaction, document, page, panel, tools, selection, and history.
---
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. |
---
We emit standard Vue events for initialization and readiness.
`vue
`
- @init - Emitted when the viewer container is initialized.@ready
- - Emitted when the plugin registry is ready and plugins are loaded.
---
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.
---
EmbedPDF is MIT licensed. Commercial use is welcomeโjust keep the copyright headers intact.