{"id":12631,"library":"vue3-pdf-app","title":"Vue 3 PDF Viewer","description":"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.","status":"active","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/stellR42/vue3-pdf-app","tags":["javascript","vue","vuejs","pdfjs","pdf","viewer","typescript"],"install":[{"cmd":"npm install vue3-pdf-app","lang":"bash","label":"npm"},{"cmd":"yarn add vue3-pdf-app","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue3-pdf-app","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue 3 framework","package":"vue","optional":false}],"imports":[{"note":"This is a default export of the Vue component. Ensure you are using ESM imports in a Vue 3 project.","wrong":"const VuePdfApp = require('vue3-pdf-app');","symbol":"VuePdfApp","correct":"import VuePdfApp from 'vue3-pdf-app';"},{"note":"This import is required to load the default icons for the toolbar buttons. Without it, buttons may appear without visual cues.","symbol":"main.css","correct":"import 'vue3-pdf-app/dist/icons/main.css';"},{"note":"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.","symbol":"VuePdfApp (TypeScript Type)","correct":"import type { PropType } from 'vue'; // Example for types related to props"}],"quickstart":{"code":"<template>\n  <!-- Important: The viewer component requires an explicit height to render correctly. -->\n  <!-- You can set it directly or wrap it in a div with defined height. -->\n  <div style=\"height: 100vh; width: 100%;\">\n    <VuePdfApp pdf=\"https://file-examples-com.github.io/uploads/2017/10/file-example_PDF_1MB.pdf\"></VuePdfApp>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport VuePdfApp from \"vue3-pdf-app\";\n// Import this to use default icons for toolbar buttons\nimport \"vue3-pdf-app/dist/icons/main.css\";\n\nexport default defineComponent({\n  name: 'PdfViewer',\n  components: {\n    VuePdfApp\n  }\n});\n</script>\n\n<style>\nbody {\n  margin: 0;\n  padding: 0;\n  overflow: hidden; /* Prevent body scroll if using 100vh/100vw */\n}\n</style>","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add `import 'vue3-pdf-app/dist/icons/main.css';` to your component's script section or global styles.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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\"`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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;\"`).","cause":"The PDF viewer component or its container lacks a defined height in the CSS layout.","error":"Component <vue-pdf-app> renders as an empty white space or is not visible"},{"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.","cause":"The default icon stylesheet (`main.css`) for the `vue3-pdf-app` component has not been imported.","error":"Toolbar buttons appear as empty boxes or unstyled text instead of icons"},{"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.","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.","error":"Property 'pdf' does not exist on type 'VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<LooseRequired<Readonly<{} & { ... }>>>'"}],"ecosystem":"npm"}