{"name":"vue-pdf-embed: A Robust PDF Embed Component for Vue 2 and Vue 3","description":"vue-pdf-embed is a powerful and easy-to-use PDF embed component designed for Vue applications. It supports both Vue 2 and Vue 3, offering features like password-protected document handling, text and annotation layers, and no external peer dependencies. This component simplifies the integration of PDF viewing directly into your web projects.","github":"https://github.com/hrynko/vue-pdf-embed","url":"https://osrepos.com/repo/hrynko-vue-pdf-embed","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/hrynko-vue-pdf-embed","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/hrynko-vue-pdf-embed.md","json":"https://osrepos.com/repo/hrynko-vue-pdf-embed.json","topics":["pdf","vue","typescript","frontend","component","web-development"],"keywords":["pdf","vue","typescript","frontend","component","web-development"],"stars":null,"summary":"vue-pdf-embed is a powerful and easy-to-use PDF embed component designed for Vue applications. It supports both Vue 2 and Vue 3, offering features like password-protected document handling, text and annotation layers, and no external peer dependencies. This component simplifies the integration of PDF viewing directly into your web projects.","content":"## Introduction\n\nvue-pdf-embed is a versatile PDF embed component designed for Vue.js applications. It allows developers to easily display PDF documents directly within their Vue 2 and Vue 3 projects, providing a seamless user experience. This component stands out for its robust feature set, including controlled rendering of PDF documents, handling of password-protected files, and support for interactive text and annotation layers, making documents searchable and selectable. Built with TypeScript, vue-pdf-embed offers a reliable and type-safe solution for integrating PDF viewing capabilities.\n\n## Installation\n\nGetting started with vue-pdf-embed is straightforward. You can install the package using npm or yarn, or include it directly via a script tag in your HTML.\n\nshell\nnpm install vue-pdf-embed\n\n\nshell\nyarn add vue-pdf-embed\n\n\nFor direct browser usage, include the script:\n\nhtml\n<script src=\"https://unpkg.com/vue-pdf-embed\"></script>\n\n\n## Examples\n\nIntegrating vue-pdf-embed into your Vue application is simple. Here is a basic usage example:\n\nvue\n<script setup>\nimport VuePdfEmbed from 'vue-pdf-embed'\n\n// Optional styles\nimport 'vue-pdf-embed/dist/styles/annotationLayer.css'\nimport 'vue-pdf-embed/dist/styles/textLayer.css'\n\n// Either URL, Base64, binary, or document proxy\nconst pdfSource = '<PDF_URL>'\n</script>\n\n<template>\n  <VuePdfEmbed annotation-layer text-layer :source=\"pdfSource\" />\n</template>\n\n\nFor more advanced scenarios and live demonstrations, explore the official JSFiddle examples:\n*   [Basic Usage Demo](https://jsfiddle.net/hrynko/atcn32yp)\n*   [Advanced Usage Demo](https://jsfiddle.net/hrynko/273a59qr)\n*   [Lazy Loading Demo](https://jsfiddle.net/hrynko/u149my7h)\n\n## Why Use vue-pdf-embed?\n\nvue-pdf-embed simplifies the complex task of embedding PDF documents into Vue applications. Its key advantages include:\n\n*   **Comprehensive Features**: It supports essential functionalities like text selection, annotations, and password protection right out of the box, enhancing user interaction with PDF content.\n*   **Ease of Use**: With no complex peer dependencies or additional configuration required, setup is quick and hassle-free.\n*   **Vue 2 and Vue 3 Compatibility**: The component is designed to work seamlessly across both major versions of Vue, ensuring broad applicability.\n*   **Controlled Rendering**: Developers have fine-grained control over document rendering, including specific pages, rotation, and scaling.\n*   **Public Methods**: It provides convenient public methods for downloading and printing documents directly from the component instance.\n\n## Links\n\n*   **GitHub Repository**: [hrynko/vue-pdf-embed](https://github.com/hrynko/vue-pdf-embed)\n*   **npm Package**: [vue-pdf-embed](https://npmjs.com/package/vue-pdf-embed)","metrics":{"detailViews":4,"githubClicks":1},"dates":{"published":null,"modified":"2026-06-20T16:22:29.000Z"}}