{"id":18080,"library":"vue-pdf-app","title":"Vue 2 PDF Viewer","description":"vue-pdf-app is a Vue 2 component that integrates Mozilla's PDF.js library to provide a full-featured PDF viewer within web applications. It offers 100% of PDF.js functionality, including zooming, opening, printing, downloading, rotating, text selection, search, password protection, and support for thumbnails, outlines, and annotation layers. The current stable version is 2.1.0, with major updates like v2.0.0 introducing significant changes. While there isn't a strict release cadence, updates are made as needed to introduce new features and address bugs. Key differentiators include an easily localizable and configurable toolbar, custom UI options, built-in TypeScript support, cross-browser compatibility (including IE11 for core functionality, though with some feature limitations), and customizable themes and button icons. The component also supports UMD/Unpkg distribution. It aims to provide a comprehensive and highly customizable PDF viewing experience for Vue 2 applications.","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/sandanat/vue-pdf-app","tags":["javascript","vue","vuejs","pdfjs","pdf","viewer","typescript"],"install":[{"cmd":"npm install vue-pdf-app","lang":"bash","label":"npm"},{"cmd":"yarn add vue-pdf-app","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-pdf-app","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The component is exported as a default export. For CommonJS, you might need `require('vue-pdf-app').default`.","wrong":"import { VuePdfApp } from 'vue-pdf-app';","symbol":"VuePdfApp","correct":"import VuePdfApp from 'vue-pdf-app';"},{"note":"This CSS file is essential for the default toolbar icons to display correctly. It must be imported from the `dist` directory.","wrong":"import 'vue-pdf-app/icons/main.css';","symbol":"main.css","correct":"import 'vue-pdf-app/dist/icons/main.css';"}],"quickstart":{"code":"<template>\n  <vue-pdf-app pdf=\"http://example.com/sample.pdf\"></vue-pdf-app>\n</template>\n\n<script lang=\"ts\">\nimport VuePdfApp from \"vue-pdf-app\";\n// import this to use default icons for buttons\nimport \"vue-pdf-app/dist/icons/main.css\";\n\nexport default {\n  components: {\n    VuePdfApp\n  }\n};\n</script>\n","lang":"typescript","description":"Demonstrates how to integrate the `VuePdfApp` component into a Vue 2 application, loading a PDF from a URL and applying default toolbar icons."},"warnings":[{"fix":"Consult the official CHANGELOG.md for migration instructions and updated API documentation.","message":"Major version `v2.0.0` likely introduced significant breaking changes to the API and component usage, as is common with major version bumps. Always consult the `CHANGELOG.md` when upgrading from `v1.x` to `v2.x` to understand necessary migration steps.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Set the `:fileName` prop to a descriptive string, e.g., `<vue-pdf-app :pdf=\"ArrayBuffer\" file-name=\"my-report.pdf\" />`.","message":"When providing a PDF document as an `ArrayBuffer` or `TypedArray` to the `pdf` prop, the default filename for downloads will be `document.pdf`. This can be misleading to users.","severity":"gotcha","affected_versions":">=2.1.0"},{"fix":"If targeting IE11, be aware of feature limitations, particularly regarding visual customizations. Ensure fallbacks or alternative experiences for IE11 users.","message":"While `vue-pdf-app` supports Internet Explorer 11 for core PDF viewing functionality, specific features like color customization for themes are not supported in this browser.","severity":"gotcha","affected_versions":"*"},{"fix":"Explicitly use the `:pageNumber` prop (e.g., `<vue-pdf-app :page-number=\"1\" />`) to override any stored page number and ensure the desired starting page is displayed.","message":"PDF.js, which `vue-pdf-app` is based on, stores the last viewed page of a document in `window.localStorage`. If you need to force a specific initial page, this local storage value might override your intention.","severity":"gotcha","affected_versions":">=2.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure `vue-pdf-app` is rendered within a visible and properly positioned DOM element. If on an older version, upgrade to `vue-pdf-app@1.0.1` or higher, as a fix for this was included.","cause":"This error, often related to layout calculations within PDF.js, typically occurs when the component's containing element lacks a proper `offsetParent` (e.g., it's hidden or not yet mounted correctly).","error":"OffsetParent is not set"},{"fix":"Add `import 'vue-pdf-app/dist/icons/main.css';` to your main application entry file or directly within the `<script>` section of your component, as shown in the quickstart example.","cause":"The default CSS stylesheet for the toolbar icons has not been imported into your application.","error":"Toolbar icons are missing or appear as broken images/text."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}