{"library":"pdfobject-vue","title":"PDFObject Vue 3 Component","description":"pdfobject-vue is an official Vue 3 component designed to facilitate the embedding of PDF documents directly into Vue applications. It serves as a declarative and reactive wrapper for the underlying PDFObject JavaScript utility. Currently at version 0.0.5, this package offers a `<PdfObject>` component that accepts a PDF `url` and `options` (matching the core PDFObject API) as props, simplifying what would otherwise be direct DOM manipulation. As a relatively new and early-stage project, its release cadence is currently irregular, but it benefits from leveraging the mature PDFObject library itself. A key differentiator is its status as the official Vue 3 integration, ensuring compatibility and adherence to best practices for both libraries. It aims to provide a seamless, idiomatic Vue experience for PDF embedding, handling the complexities of the underlying utility.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install pdfobject-vue"],"cli":null},"imports":["import PDFObjectPlugin from 'pdfobject-vue';","import { PdfObject } from 'pdfobject-vue';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// main.ts (or main.js)\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport PDFObjectPlugin from 'pdfobject-vue';\n\nconst app = createApp(App);\napp.use(PDFObjectPlugin); // Register the PDFObject Vue plugin globally\napp.mount('#app');\n\n// App.vue (or any Vue component where you want to embed a PDF)\n<script setup lang=\"ts\">\nimport { PdfObject } from 'pdfobject-vue';\n\n// Define the URL for your PDF document\nconst pdfUrl = '/documents/sample.pdf'; // Ensure this path is accessible\n\n// Define options for PDFObject (e.g., height, initial page, zoom)\nconst pdfOptions = {\n  height: '600px', // Set the height of the embedded PDF viewer\n  pdfOpenParams: { \n    view: 'FitV', // Fit view to width\n    page: 1 \n  } \n};\n</script>\n\n<template>\n  <div id=\"app\">\n    <h1>My Document Viewer</h1>\n    <p>Below is an embedded PDF document:</p>\n    \n    <!-- Use the PdfObject component to embed the PDF -->\n    <PdfObject :url=\"pdfUrl\" :options=\"pdfOptions\" />\n\n    <p>For more configuration options, refer to <a href=\"https://pdfobject.com\" target=\"_blank\">PDFObject.com</a>.</p>\n  </div>\n</template>\n\n<style>\nbody { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; }\n#app { max-width: 960px; margin: 20px auto; background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }\nh1 { color: #333; margin-bottom: 15px; }\np { color: #666; line-height: 1.6; }\na { color: #007bff; text-decoration: none; }\na:hover { text-decoration: underline; }\n</style>","lang":"typescript","description":"This quickstart demonstrates how to register pdfobject-vue globally in `main.ts` and then use the `<PdfObject>` component in a Vue single-file component (`.vue` file) with props for the PDF URL and advanced options. It provides a complete, runnable example, including basic styling.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}