The ultimate Vue PDF viewer for your next project. Choose our pre-built viewer for instant results, or use our headless composables to build a completely custom UI.
Works seamlessly with your favorite libraries
Choose the level of control that fits your project
A complete, polished PDF viewer with toolbar and thumbnails. Drop it in and you're done.
Use our powerful composables to build a viewer that perfectly matches your design system.
Get a fully featured PDF viewer in your Vue app with just a few lines of code.
<template>
<PDFViewer
:config="{ src: 'https://snippet.embedpdf.com/ebook.pdf' }"
:style="{ height: '500px' }"
@ready="onReady"
/>
</template>
<script setup lang="ts">
import { PDFViewer } from '@embedpdf/vue-pdf-viewer';
function onReady(registry) {
console.log('PDF viewer ready!', registry);
}
</script>This is the default UI you get with the <PDFViewer /> component.
Want a different look? Scroll down to see our headless architecture.
Pick only the features you need. Each plugin is a separate package—your bundle stays lean, your app stays fast.
<script setup lang="ts">
import { EmbedPDF, createPluginRegistration }
from '@embedpdf/core/vue';
import { ZoomPluginPackage, useZoom }
from '@embedpdf/plugin-zoom/vue';
// Register only what you need
const plugins = [
createPluginRegistration(DocumentManagerPluginPackage),
createPluginRegistration(ZoomPluginPackage, {
defaultZoomLevel: ZoomMode.FitPage
}),
];
// Build your own UI with composables
const { zoomIn, zoomOut, currentZoomLevel } = useZoom(documentId);
</script>
Use useZoom(), useSelection(), or any composable with your own buttons, sliders, and components.
Technical excellence you can rely on. Designed for high-performance applications.
Not an afterthought. Every prop, composable, and event is fully typed, giving you a superior developer experience with robust autocomplete.
Handle documents with thousands of pages. We only render what is visible in the viewport, keeping your application memory usage low and frame rates high.
Works seamlessly with Server Side Rendering. Components handle client-only logic gracefully, so you don't have to fight with hydration errors.
Don't ship a 5MB viewer when you only need to show a simple invoice. Our modular architecture means you import only the parts you need, keeping your initial bundle size tiny.
Everything you need to know about integrating the viewer.
Most Vue libraries wrap PDF.js. EmbedPDF uses a custom WebAssembly engine powered by PDFium (Google Chrome's PDF engine). This delivers significantly faster rendering, better accuracy, and a true headless architecture that gives you full UI control.
Yes! All components are designed to work seamlessly with Nuxt 3. We handle the client-side browser APIs (like Canvas) gracefully, so you don't get hydration mismatches. Just wrap our components with <ClientOnly> when needed.
Absolutely. Since our headless composables don't render any opinionated styles, you have full control. You can use Vuetify or Quasar components for your toolbar and layout while using our viewer for PDF rendering.
No. The viewer runs entirely in the user's browser using WebAssembly. Your documents stay on the client, and you don't need to pay for any cloud processing or manage API keys.
We use a virtualization engine that only renders the pages currently visible in the viewport. This keeps memory usage low and scrolling smooth, even for documents with 1000+ pages.
Yes. The core library and all standard plugins are MIT licensed. You can use them in personal, commercial, and enterprise projects without any restrictions or hidden fees.
Join thousands of developers using EmbedPDF to create amazing experiences.