Best Vue PDF viewer libraries (2026): options compared

Nutrient Web SDK is the pick for a PDF viewer for Vue when the viewer must do more than display pages: Annotate, fill forms, sign, redact, and open Word, Excel, and PowerPoint files inside a Vue 3 single-file component. vue-pdf-embed, @tato30/vue-pdf, and pdf-vue3 fit teams that want a free, MIT-licensed rendering component built on PDF.js. Vue PDF Viewer is a licensed Vue 3 viewer with a ready-made toolbar, and Apryse WebViewer and Syncfusion offer commercial viewers with Vue setup guides. What decides the choice is how much UI you want to build yourself, which document features your users need, and how actively the library is maintained.

This guide mirrors our React PDF viewer comparison for Vue 3. It covers setup in a Vite-based Vue project, then compares each library against the same criteria. Release dates come from each package’s npm page and repository, checked on October 25, 2026.

PDF.js wrapper, viewer component, or SDK?

Vue PDF libraries have confusingly similar names, and they solve different problems:

• vue-pdf-embed (by hrynko): A rendering component. It draws pages with PDF.js and lets you build the controls.
• @tato30/vue-pdf (by TaTo30): A composable (usePDF) and a component (VuePDF) that expose PDF.js features in Vue 3.
• vue-pdf (by FranckFreiburger): The original Vue 2 wrapper. It’s a different package from @tato30/vue-pdf, and its last npm release was in 2021.
• @vue-pdf-viewer/viewer: A licensed viewer with a toolbar, sidebar, and theming, published as Vue PDF Viewer.
• @nutrient-sdk/viewer: Nutrient Web SDK, a commercial JavaScript PDF SDK that you mount inside a Vue component.

The rule of thumb: A wrapper gives you pages on a canvas, a viewer component gives you a toolbar, and an SDK gives you the document workflow behind the toolbar.

Criteria that matter in a Vue 3 app

Setup in a Vue 3 project

Check whether the library works with <script setup>, the Composition API, and Vite, and whether it needs extra assets copied into public/. PDF.js-based wrappers need a worker file, and SDKs that use WebAssembly need their library assets served from a known path or a content delivery network (CDN).

Rendering fidelity

Every PDF.js wrapper renders with the PDF.js version it pins, so fidelity follows PDF.js. Test fonts, scanned pages, large files, and documents with form fields from your own corpus.

Annotations, forms, and signatures

Displaying existing annotations differs from letting users create, edit, and save them. Decide whether you need markup that persists into the PDF, fillable forms, electronic or digital signatures, and redaction.

Office formats

If users upload DOCX, XLSX, or PPTX files, a PDF-only viewer means a separate conversion step. Check whether the library renders Office files in the browser or needs a server.

Licensing, TypeScript, and bundle size

Open source wrappers are free under MIT or Apache 2.0. Commercial viewers need a license key, and some show a watermark until you add one. Check that the package ships TypeScript declarations, and measure bundle size in your own build, because worker and WebAssembly assets load separately from your JavaScript.

Maintenance activity

Look at the latest npm release, the PDF.js version it depends on, and recent repository activity. A wrapper that pins an old PDF.js release also inherits that release’s rendering and security fixes, or lack of them.

Vue PDF viewers at a glance

The table lists each option as its own documentation describes it. Release dates are from npm, checked October 25, 2026.

1. Nutrient Web SDK

Nutrient Web SDK is a commercial JavaScript PDF library that mounts inside any Vue 3 single-file component. Its Vue getting started guide uses <script setup>, a template ref, and the onMounted and onUnmounted lifecycle hooks, and it works the same way with the Options API or in a Nuxt project.

Key features of Nutrient Web SDK in Vue

• Built-in, customizable UI: A viewer with search, zoom, and thumbnails. You can replace UI components through the slot system or run headless.
• Annotations: 17+ annotation types, created from the UI or in code and persisted to the document.
• Forms: Fill interactive forms, create forms with drag and drop, and read field values back into your Vue state.
• Signatures and redaction: Electronic and certificate-based digital signatures, plus permanent content removal.
• Office and image files: Word, Excel, and PowerPoint files render client-side, as do PNG, JPEG, and TIFF images.
• Client- or server-side processing: WebAssembly in the browser, or optional server-side rendering with Document Engine.
• TypeScript: The public API ships with complete TypeScript declarations.

Getting started with Nutrient in Vue

1. Create a Vue project with Vite if you don’t have one:

npm create vite@latest nutrient-vue-example -- --template vue
cd nutrient-vue-example

2. Add the SDK:

npm i @nutrient-sdk/viewer

pnpm add @nutrient-sdk/viewer

yarn add @nutrient-sdk/viewer

3. Load a document in App.vue:

<script setup lang="ts">
import { onMounted, onUnmounted, useTemplateRef } from "vue";

const containerRef = useTemplateRef("container");
let NutrientViewer:
  | typeof import("@nutrient-sdk/viewer").default
  | undefined;

onMounted(async () => {
  NutrientViewer = (await import("@nutrient-sdk/viewer")).default;
  const container = containerRef.value;

  if (container && NutrientViewer) {
    NutrientViewer.load({
      container,
      document: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
      useCDN: true,
    });
  }
});

onUnmounted(() => {
  const container = containerRef.value;

  if (container && NutrientViewer) {
    NutrientViewer.unload(container);
  }
});
</script>

<template>
  <div ref="container" class="container" />
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>

useCDN: true loads the SDK’s assets from the Nutrient CDN. To self-host them, pass a baseUrl instead, as the Vue guide shows. Without a license key, the viewer shows an evaluation notice; the free trial needs no payment information.

Tutorials for this path:

• How to build a Vue.js PDF viewer
• Open and annotate PDFs from your Vue.js app
• How to sign a PDF using Vue
• How to build a Vue.js Word viewer

2. vue-pdf-embed

vue-pdf-embed(opens in a new tab) is an MIT-licensed PDF embed component for Vue 3. It renders documents with PDF.js and leaves the UI to you. Current versions support Vue 3 only; the README points Vue 2 projects to vue-pdf-embed@1.

Key features of vue-pdf-embed

• Text and annotation layers: Searchable, selectable text, plus an annotation layer for links and existing annotations.
• Forms prop: Renders interactive form fields when the annotation layer is on.
• Page, rotation, and scale props, plus print() and download() methods.
• Password-protected documents through a password-requested event.

Getting started with vue-pdf-embed

npm install vue-pdf-embed

<script setup>
import VuePdfEmbed from "vue-pdf-embed";
import "vue-pdf-embed/dist/styles/annotationLayer.css";
import "vue-pdf-embed/dist/styles/textLayer.css";
</script>

<template>
  <VuePdfEmbed annotation-layer text-layer source="/example.pdf" />
</template>

The README notes that the library relies on browser APIs and can’t be server-rendered, so wrap it in a client-only boundary under Nuxt. It also warns that the default blob-URL worker may be blocked by some content security policy (CSP) configurations. On October 25, 2026, npm listed version 2.1.7, published October 11, 2026, depending on pdfjs-dist ^6.4.299.

3. @tato30/vue-pdf

@tato30/vue-pdf(opens in a new tab) is an MIT-licensed Vue 3 component that wraps PDF.js. Its README says all main PDF.js features are supported, exposed through the usePDF composable and the VuePDF component.

Key features of @tato30/vue-pdf

• Text layer and annotation layer props for selection and link interaction.
• Annotation editor layer (editor-layer) for PDF.js FreeText, Highlight, Ink, and Stamp annotations.
• XFA form support with enableXfa: true in usePDF.
• Minimal build for a custom worker setup.

Getting started with @tato30/vue-pdf

npm i @tato30/vue-pdf

<script setup>
import { VuePDF, usePDF } from "@tato30/vue-pdf";

const { pdf } = usePDF("/example.pdf");
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>

On October 25, 2026, npm listed version 2.3.0, published October 21, 2026, pinned to pdfjs-dist 6.4.299. Its documentation site(opens in a new tab) covers the props and events.

4. pdf-vue3

pdf-vue3(opens in a new tab) is an MIT-licensed Vue 3 viewer built on pdfjs-dist 4.10.38 and aimed at long documents. Virtual scrolling renders only pages near the viewport and releases canvases that are far away. It also exposes goToPage, print, and download methods and defers browser-only code so it can run in Nuxt.

<script setup>
import PDF from "pdf-vue3";
</script>

<template>
  <PDF src="/example.pdf" />
</template>

Its README doesn’t mention a text layer or annotations. The latest release on npm, checked October 25, 2026, was 2.0.1 from May 19, 2026, and the README advises avoiding 2.0.0.

5. Vue PDF Viewer

Vue PDF Viewer(opens in a new tab) (@vue-pdf-viewer/viewer) is a licensed, client-side PDF viewer component for Vue 3 and Nuxt, built by the React PDF Kit team. Its documentation(opens in a new tab) lists a default layout with toolbar, thumbnails, table of contents, search, print, download, localization, themes, and annotation tools for highlight, underline, strikethrough, free text, and images, plus an AcroForm form layer. Digital signatures aren’t mentioned.

Its licensing page(opens in a new tab) says you can test developer and organization features for free, and a valid license removes the watermark. Developer and organization licenses use domain-bound tokens, applied with a useLicense call. On October 25, 2026, npm listed version 4.4.0, published September 17, 2026, with pdfjs-dist 5.4.530 as a dependency.

6. PDF.js directly

PDF.js(opens in a new tab) is Mozilla’s Apache 2.0 PDF library. Its core layer parses PDFs, its display layer exposes the rendering API, and its prebuilt viewer is the UI used in Firefox. Using pdfjs-dist directly in Vue gives you full control, at the cost of building page navigation, zoom, search, and any annotation UI yourself.

<script setup>
import { onMounted, useTemplateRef } from "vue";
import * as pdfjsLib from "pdfjs-dist";

pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.mjs",
  import.meta.url,
).toString();

const canvasRef = useTemplateRef("canvas");

onMounted(async () => {
  const pdf = await pdfjsLib.getDocument("/example.pdf").promise;
  const page = await pdf.getPage(1);
  const viewport = page.getViewport({ scale: 1.5 });
  const canvas = canvasRef.value;

  canvas.width = viewport.width;
  canvas.height = viewport.height;
  await page.render({ canvas, viewport }).promise;
});
</script>

<template>
  <canvas ref="canvas" />
</template>

This renders one page. On October 25, 2026, npm listed pdfjs-dist 6.4.299, published October 3, 2026. For a full walkthrough, see how to build a Vue.js PDF viewer with PDF.js.

7. EmbedPDF

EmbedPDF(opens in a new tab) ships a Vue drop-in viewer, @embedpdf/vue-pdf-viewer, with a toolbar and thumbnail sidebar, plus a headless library for custom UIs. The headless guide initializes a PDFium engine, and the plugin list includes annotation, form, redaction, and signature plugins. The npm package lists an MIT license; the repository’s licensing notice says it contains code under more than one license, so read it for the parts you use. Version 2.15.1 was published September 16, 2026.

8. Apryse WebViewer

Apryse WebViewer(opens in a new tab) (formerly PDFTron) is a commercial JavaScript SDK with a Vue 3 guide: Install @pdftron/webviewer, copy its static assets into public/lib/webviewer, and call WebViewer() in onMounted with a path, document, and license key. Its overview(opens in a new tab) lists viewing, annotation, form building, digital signatures, and redaction, and its file format table(opens in a new tab) lists client-side Office viewing with the Office Conversion add-on, while CAD and some other formats need WebViewer Server. Version 12.2.1 was published to npm on October 16, 2026. For a side-by-side view, see Nutrient vs. Apryse.

9. Syncfusion Vue PDF Viewer

Syncfusion’s Vue PDF Viewer(opens in a new tab) (@syncfusion/ej2-vue-pdfviewer) is part of its Essential JS 2 component suite. You register an ejs-pdfviewer component, point resourceUrl at the viewer library, and inject services such as Toolbar, Annotation, FormFields, FormDesigner, and PageOrganizer. The overview(opens in a new tab) lists text markup, shape, stamp, and free text annotations, form filling and design, and handwritten signatures. Syncfusion’s licensing page(opens in a new tab) says a registered license key is required and that a trial, paid license, or community license provides one. Version 35.1.41 was published October 20, 2026. See also Nutrient vs. Syncfusion.

Older Vue wrappers: vue-pdf and pdfvuer

Many tutorials still reference two older packages. vue-pdf(opens in a new tab) 4.3.0 was published June 17, 2021, pins pdfjs-dist 2.6.347, and targets Vue 2; its repository was last pushed July 24, 2024. pdfvuer(opens in a new tab) 1.10.0, the latest-tagged release, was published August 10, 2022, with a Vue 2 peer dependency, and its repository was last pushed March 28, 2023. Both still install, but both pin PDF.js releases several major versions behind 6.4.299. For a new Vue 3 project, start from a maintained package.

Scenario-based recommendations

• Choose Nutrient Web SDK when users must annotate, fill forms, sign, or redact documents in a Vue app and those changes must persist in the file.
• Choose Nutrient Web SDK when the same viewer must open PDFs, Office files, and images without a separate conversion service.
• Choose vue-pdf-embed when you only need to render pages in a Vue 3 component and your team will build the controls.
• Choose @tato30/vue-pdf when you want PDF.js’s own annotation editor and XFA support exposed through a Vue composable.
• Choose pdf-vue3 when long, read-only documents need virtual scrolling and you don’t need a text layer.
• Choose Vue PDF Viewer when you want a Vue-native toolbar viewer with basic markup and domain-based licensing.
• Choose PDF.js directly when you want full control over rendering and accept building the UI yourself.
• Choose Apryse WebViewer when your organization already licenses Apryse and needs its server-side format coverage.
• Choose Syncfusion when your Vue app already uses Syncfusion components and you want one vendor for the UI suite.

Run a fair proof of concept

1. Use your own documents. Include scanned pages, large files, forms, unusual fonts, and any Office files users upload.
2. Build the same feature in each finalist. For example, open a file, add a highlight, fill a form field, save, and reload.
3. Check persistence. Confirm annotations and form values are written to the PDF or exported in a format your backend stores.
4. Measure in production mode. Compare build output, worker and WebAssembly asset size, time to first page, and memory on a low-powered device.
5. Test your stack. Run under Nuxt server-side rendering (SSR), your CSP, and the browsers you support.
6. Read the release history and license. Note the last release, the PDF.js version pinned, and what a production license costs.

FAQ

Related reading

• Comparing the best React PDF viewers: The same comparison for React
• Top five JavaScript PDF viewers: Framework-agnostic options
• PDF.js vs. Nutrient: What a production SDK adds over PDF.js
• Vue PDF viewer and editor: Nutrient Web SDK for Vue