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.

Key Features

• 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

npm install @embedpdf/vue-pdf-viewer
# or
pnpm add @embedpdf/vue-pdf-viewer
# or
yarn add @embedpdf/vue-pdf-viewer

🛠 Basic Usage

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

<template>
  <div style="height: 100vh">
    <PDFViewer
      :config="{
        src: 'https://snippet.embedpdf.com/ebook.pdf',
        theme: { preference: 'light' },
      }"
    />
  </div>
</template>

<script setup>
import { PDFViewer } from '@embedpdf/vue-pdf-viewer';
</script>

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

Nuxt 3 Usage

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

<template>
  <ClientOnly>
    <PDFViewer :config="{ src: '/document.pdf' }" />
  </ClientOnly>
</template>

🎨 Customization

Theme

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.

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

Disabling Features

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

<PDFViewer
  :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:

🔌 Events & Registry

We emit standard Vue events for initialization and readiness.

<template>
  <PDFViewer :config="{ src: '/doc.pdf' }" @ready="onReady" />
</template>

<script setup>
function onReady(registry) {
  const engine = registry.getEngine();
  console.log('Engine ready:', engine);
}
</script>

Available Events

• @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:

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.