Vue 3 PDF Viewer

1.0.3 · active · verified Sun Apr 19

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.

Common errors

```
Component <vue-pdf-app> renders as an empty white space or is not visible
```
cause 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
```
cause 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<{} & { ... }>>>'
```
cause 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.

Warnings

gotcha The `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.
gotcha Default 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.
gotcha The `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"`.

Install

npm install vue3-pdf-app npm
yarn add vue3-pdf-app yarn
pnpm add vue3-pdf-app pnpm

Imports

VuePdfApp
wrong:
```
const VuePdfApp = require('vue3-pdf-app');
```
correct:
```
import VuePdfApp from '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.

Quickstart

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>
  <!-- Important: The viewer component requires an explicit height to render correctly. -->
  <!-- You can set it directly or wrap it in a div with defined height. -->
  <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>

view raw JSON →