vue3-pdf-app

library1.0.3jsnpmunverified

Vue3 Pdf App is a comprehensive Vue 3 component designed for displaying PDF documents within web applications. It is built upon Mozilla's robust PDF.js library, ensuring full compatibility with core PDF functionalities such as zooming, printing, downloading, rotation, text selection, and searching. The package is currently stable at version 1.0.3, actively maintained as a fork of `vue-pdf-app`, and appears to follow a regular release cadence given its recent updates. Key differentiators include its 100% PDF.js feature parity, easily localizable and highly configurable toolbar allowing for custom UI, extensive cross-browser support, and options for color customization, button icon themes, and light/dark modes. It also boasts built-in TypeScript support, providing a smooth development experience for type-safe applications. This component offers a robust, feature-rich solution for integrating PDF viewing directly into Vue 3 projects.

web-framework aws gcp azure

npm install vue3-pdf-app

github ↗package ↗

INSTALL

IMPORT

SIG · VUE3-PDF-APP

vue3-pdf-app

web-frameworkjavascriptv1.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VuePdfApp

✓ import VuePdfApp from 'vue3-pdf-app';

✗ const VuePdfApp = require('vue3-pdf-app');

This is a default export of the Vue component. Ensure you are using ESM imports in a Vue 3 project.

main.css

✓ import 'vue3-pdf-app/dist/icons/main.css';

This import is required to load the default icons for the toolbar buttons. Without it, buttons may appear without visual cues.

VuePdfApp (TypeScript Type)

✓ import type { PropType } from 'vue'; // Example for types related to props

The library ships with built-in TypeScript types. While direct type imports for the component itself are less common for usage, prop types like `theme` or `pageScale` can be inferred or explicitly imported if available in the future for advanced configuration.

This quickstart demonstrates how to embed a PDF viewer component, loading a sample PDF from a URL, and correctly applying necessary styling for rendering and toolbar icons.

<template>   <div style="height: 100vh; width: 100%;"> <VuePdfApp pdf="https://file-examples-com.github.io/uploads/2017/10/file-example_PDF_1MB.pdf"></VuePdfApp> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import VuePdfApp from "vue3-pdf-app"; // Import this to use default icons for toolbar buttons import "vue3-pdf-app/dist/icons/main.css"; export default defineComponent({ name: 'PdfViewer', components: { VuePdfApp } }); </script> <style> body { margin: 0; padding: 0; overflow: hidden; /* Prevent body scroll if using 100vh/100vw */ } </style>

Debug

Known issues

gotchaThe `vue3-pdf-app` component will not render on the page, showing only an empty space without errors, if its parent container or the component itself does not have a defined height. This is a common issue, particularly in Firefox and Chrome.

fix

Ensure the component or its direct parent has an explicit CSS `height` property set (e.g., `height: 100vh;` or a fixed pixel height). The example uses `style="height: 100vh;"` on a wrapper div.

affects: >=1.0.0

gotchaDefault icons for the toolbar buttons (e.g., zoom, print, download) will not appear without importing the `main.css` stylesheet. Buttons will still be functional but lack visual cues.

fix

Add `import 'vue3-pdf-app/dist/icons/main.css';` to your component's script section or global styles.

affects: >=1.0.0

gotchaThe `theme` prop uses a `.sync` modifier in older Vue 2 conventions (`:theme.sync='theme'`) in some documentation snippets, but for Vue 3, two-way binding is achieved with `v-model:theme='theme'` or by handling emitted events.

fix

For Vue 3, use `v-model:theme="theme"` for two-way binding. If `theme` is only for initial setting, simply use `:theme="'dark'"` or `:theme="themeVariable"`.

affects: >=1.0.0

Errors

Common errors & fixes

Component <vue-pdf-app> renders as an empty white space or is not visible

The PDF viewer component or its container lacks a defined height in the CSS layout.

fix

Apply a CSS `height` property to the `<vue-pdf-app>` component directly, or wrap it in a `div` and set the `height` on the wrapper (e.g., `style="height: 100vh;"`).

Toolbar buttons appear as empty boxes or unstyled text instead of icons

The default icon stylesheet (`main.css`) for the `vue3-pdf-app` component has not been imported.

fix

Add `import 'vue3-pdf-app/dist/icons/main.css';` to your component's script section or to your main application's stylesheet entry point.

Property 'pdf' does not exist on type 'VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<LooseRequired<Readonly<{} & { ... }>>>'

This TypeScript error indicates a potential mismatch in how props are declared or passed. It could happen if you are using `v-bind` incorrectly or if a prop name is misspelled.

fix

Ensure you are passing props correctly using `:prop-name="value"` syntax (e.g., `:pdf="myPdfUrl"`) and that the prop name matches exactly (case-sensitive) the component's expected prop definitions.

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

vuerequiredPeer dependency for the Vue 3 framework

Agent activity

46 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/stellR42/vue3-pdf-app ↗

packagehttps://www.npmjs.com/package/vue3-pdf-app ↗