{"id":11535,"library":"pdf-viewer-vue","title":"Vue 2 & Vue 3 PDF Viewer Component","description":"The `pdf-viewer-vue` package offers a straightforward Vue component for embedding and displaying PDF documents directly within Vue 2 and Vue 3 applications. It acts as a wrapper around the `vue-pdf` library, which itself leverages Mozilla's PDF.js for rendering PDF content. The current stable version is 0.2.7. This library is designed for developers seeking a basic, easy-to-integrate PDF viewer without the need for extensive customization or advanced interactive features like sophisticated annotations or form filling, which might be found in more comprehensive or commercially backed alternatives. Its release cadence has been infrequent, focusing primarily on maintaining compatibility with Vue versions 2 and 3.","status":"active","version":"0.2.7","language":"javascript","source_language":"en","source_url":"https://github.com/DingRui12138/vue-pdf-viewer","tags":["javascript","vue","vuejs","pdf","typescript"],"install":[{"cmd":"npm install pdf-viewer-vue","lang":"bash","label":"npm"},{"cmd":"yarn add pdf-viewer-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add pdf-viewer-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for Vue application integration.","package":"vue","optional":false}],"imports":[{"note":"The primary component is a default export from the package.","wrong":"import { PdfViewer } from 'pdf-viewer-vue';","symbol":"PdfViewer","correct":"import PdfViewer from 'pdf-viewer-vue';"},{"note":"When using in the Options API, register the component directly by its imported name.","wrong":"components: { 'pdf-viewer-vue': PdfViewer }","symbol":"PdfViewer (within component)","correct":"components: { PdfViewer }"}],"quickstart":{"code":"\n\n\n\n","lang":"typescript","description":"This quickstart demonstrates how to integrate and display a PDF document using the PdfViewer component in a Vue 3 Composition API setup, with TypeScript."},"warnings":[{"fix":"For development, use a local proxy or browser extensions to bypass CORS. For production, configure the hosting server (e.g., Apache, Nginx, S3 bucket) to include 'Access-Control-Allow-Origin: *' or specific origins for PDF files.","message":"When loading PDFs from external domains, ensure that the server hosting the PDF has appropriate Cross-Origin Resource Sharing (CORS) headers configured. Without correct CORS headers, the browser's security policy will block the PDF from loading.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always apply `height` and `width` styles to the `` component or its parent container. For example: ``.","message":"The component requires explicit height and width styles to render correctly, as the underlying PDF.js canvas element needs defined dimensions. If the viewer appears blank, it's often due to missing or incorrect sizing.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Refer to the documentation and issue trackers for `vue-pdf` (FranckFreiburger/vue-pdf) and `pdf.js` (mozilla/pdf.js) for deeper insights into rendering problems or advanced configurations.","message":"This package wraps `vue-pdf`, which in turn uses `pdf.js`. Issues related to `pdf.js` (e.g., compatibility with specific PDF features, rendering quirks, or `pdf.worker.js` loading) may apply and debugging might require understanding the underlying libraries.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"For new projects, prioritize Vue 3. For existing Vue 2 projects, plan an upgrade path to Vue 3 to ensure long-term support and access to new features.","message":"While the `pdf-viewer-vue` package explicitly supports both Vue 2 and Vue 3, Vue 2 is officially in its End of Life (EOL) phase as of December 31, 2023. Continuing new development on Vue 2 is generally discouraged.","severity":"deprecated","affected_versions":"<=0.2.7"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify the `src` prop URL is correct and accessible. If loading from a different domain, ensure the server hosting the PDF has appropriate `Access-Control-Allow-Origin` headers set to allow your application's domain.","cause":"The PDF file could not be fetched, most commonly due to Cross-Origin Resource Sharing (CORS) restrictions or an incorrect URL.","error":"Failed to load PDF file: NetworkError when attempting to fetch resource."},{"fix":"Apply inline styles or CSS classes to the `` component or its immediate parent to give it a defined `height` and `width`, for example: ``.","cause":"The underlying canvas element used by PDF.js requires explicit dimensions (height and/or width) to render correctly within the DOM, which are often not automatically inherited.","error":"The PDF viewer component is rendered, but no PDF content is visible (blank space)."},{"fix":"Ensure Vue is properly initialized and the `PdfViewer` component is correctly imported and registered within your Vue component's `components` option or via `app.component()` in Vue 3.","cause":"This error can occur if the Vue application context is not correctly established when using the component, or if a global Vue instance is expected but not present (more common in Vue 2 or CDN setups).","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'register')"}],"ecosystem":"npm"}