Props in, events out, slots for your own parts. Get a complete PDF viewer with a single tag, or build your own with composables that give you refs. Made for Vue 3 and Nuxt, free and open source.
<script setup lang="ts">
import { PDFViewer } from '@embedpdf/viewer-vue';
</script>
<template>
<PDFViewer
src="/report.pdf"
style="height: 100vh"
/>
</template>Both run on the same engine and the same plugins, so nothing you learn in one is wasted in the other.
Toolbar, side panels, menus, dialogs and every feature, already designed and tested on phones and desktops. You set props, it does the rest.
$ npm install @embedpdf/viewer-vueVue viewer quick startNo ready-made UI at all. You get the PDF engine, the page view and every feature as composables, and you write the templates.
$ npm install @embedpdf/vue @embedpdf/engineVue headless quick startEvery feature comes with composables you call in <script setup>. useStage() gives you the actions, like zoomIn(). useStageState() gives you refs to show, like zoomLevel.
When the zoom changes, from your button, a pinch or a line of code, your template updates by itself. No watchers to wire up, no manual sync.
<script setup lang="ts">
import { useStage, useStageState } from '@embedpdf/vue/stage';
const stage = useStage();
const { zoomLevel } = useStageState();
</script>
<template>
<div>
<button @click="stage.zoomOut()">−</button>
<span>{{ Math.round(zoomLevel * 100) }}%</span>
<button @click="stage.zoomIn()">+</button>
</div>
</template>The ready-made viewer is not a closed box. Put any of your components in a <ToolbarItem> slot and tell the layout where it goes.
It stays your component: your styles, your Pinia stores, your props. The viewer only decides where it sits.
<script setup lang="ts">
import { PDFViewer, ToolbarItem, type Layout } from '@embedpdf/viewer-vue';
import DocumentStatus from './DocumentStatus.vue';
const layout = (layout: Layout) => layout.add({ custom: 'status' }, { to: 'main', section: 'end' });
</script>
<template>
<PDFViewer src="/report.pdf" :layout="layout" style="height: 100vh">
<ToolbarItem id="status">
<DocumentStatus />
</ToolbarItem>
</PDFViewer>
</template>The things that usually take weeks are already done, tested and open source.
Turn features off with disable, or make the whole viewer read-only with readOnly. Both can change while the viewer runs.
PDF libraries usually crash on the server, because they reach for the browser the moment you import them. So you wrap them in <ClientOnly> and live with the flash.
@embedpdf/viewer-vue is safe to import on the server. Nuxt renders an empty box of the right size, the page does not jump, and the viewer starts as soon as the page loads in the browser.
<!-- pages/report.vue in Nuxt: no <ClientOnly> needed. -->
<script setup lang="ts">
import { PDFViewer } from '@embedpdf/viewer-vue';
</script>
<template>
<PDFViewer src="/report.pdf" style="height: 100vh" />
</template>Your users don't just look at PDFs. They mark them up, fill them in and sign them. All of that is built in.
Type a word and see every match highlighted in the pages and listed in a panel.
Highlights, drawings, shapes, text boxes and sticky notes with replies.
The standard PDF stamps, your own designs, or any image.
Text fields, checkboxes and dropdowns, saved back into the PDF.
Draw, type or upload a signature and place it on the page.
Remove private text and images from the file itself, not just cover them.
Can't find yours? Ask in GitHub Discussions.
Yes. Use <PDFViewer> in any Nuxt page or component. The package is safe to import on the server, so you don’t need <ClientOnly> or a .client.vue file. The server renders an empty box of the size you set, and the viewer starts in the browser. A custom viewer built with the headless composables goes inside <ClientOnly>.
Vue 3.4 and later. Both packages list vue >= 3.4 as their only peer dependency. Vue 2 is not supported.
vue-pdf-embed is a small component that draws PDF pages with PDF.js, with optional text and annotation layers. It leaves the rest to you: no toolbar, no search box, and no tools to add annotations, sign, or save a filled-in form back into the file. EmbedPDF includes all of that, ready to use, and runs on PDFium, the PDF engine inside Chrome.
Listen to @ready. It gives you the viewer once it is live, and every feature is a plugin you reach by name, for example viewer.get("search"). In the headless package, event composables such as useSearchEvent() call your function when something happens, and stop listening when your component unmounts.
Yes. It speaks English, German, French, Spanish, Italian, Dutch, Portuguese, Polish, Japanese, Simplified Chinese, Korean, Arabic and Hebrew, and follows the browser by default. Bind locale to your own i18n setting to switch it, and use strings to change any label.
The ready-made viewer is now @embedpdf/viewer-vue, and the headless composables live in @embedpdf/vue. The migration guide in the docs maps each version 2 name to its version 3 one.
No. The PDF engine runs as WebAssembly in a Web Worker in the browser, and its files are served from your own site. There is no account to create and no key to set.
Yes. EmbedPDF is open source under the Apache-2.0 license, so you can use it in paid and closed-source products at no cost.
One install and one tag. Your users get search, annotations, forms and signatures today, and you keep full control for tomorrow.
npm install @embedpdf/viewer-vue@next