{"id":11537,"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.","status":"active","version":"0.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/pipwerks/pdfobject-vue#readme","tags":["javascript","pdf","pdfobject","pdf embedding"],"install":[{"cmd":"npm install pdfobject-vue","lang":"bash","label":"npm"},{"cmd":"yarn add pdfobject-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add pdfobject-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for the Vue 3 framework.","package":"vue","optional":false},{"reason":"Core JavaScript utility that pdfobject-vue wraps. It must be installed separately as a peer dependency.","package":"pdfobject","optional":false}],"imports":[{"note":"The global plugin is exported as a default export, typically used with `app.use()` in `main.ts` or `main.js`.","wrong":"import { PDFObjectPlugin } from 'pdfobject-vue';","symbol":"PDFObjectPlugin","correct":"import PDFObjectPlugin from 'pdfobject-vue';"},{"note":"The component itself is a named export. Note the camelCase `PdfObject` to align with Vue's naming conventions, unlike the original library's `PDFObject` (all caps).","wrong":"import { PDFObject } from 'pdfobject-vue';","symbol":"PdfObject","correct":"import { PdfObject } from 'pdfobject-vue';"}],"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."},"warnings":[{"fix":"Ensure `pdfobject` is installed alongside `pdfobject-vue`: `npm install pdfobject vue pdfobject-vue`.","message":"The core `pdfobject` JavaScript utility is a peer dependency of `pdfobject-vue`. It is not automatically installed and must be explicitly added to your project via `npm install pdfobject`.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Always refer to the component as `PdfObject` (e.g., `<PdfObject />` in templates or `import { PdfObject } from 'pdfobject-vue'`).","message":"The Vue component adheres to Vue's naming conventions and is spelled `PdfObject` (camelCase). Using `PDFObject` (all caps, like the underlying library) for the component name will result in a component resolution failure.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"For production deployments, consider pinning to exact versions (e.g., `\"pdfobject-vue\": \"0.0.5\"`) or thoroughly test any updates before integration.","message":"As of version 0.0.5, `pdfobject-vue` is in an early development stage. While functional, its APIs might undergo changes in future minor or patch releases without the explicit breaking change notices typically associated with major version bumps.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Always bind the `options` prop: `<PdfObject :url=\"pdfUrl\" :options=\"{ height: '500px' }\" />`.","message":"When passing options to the `<PdfObject>` component, you must use Vue's attribute binding syntax (`:options` or `v-bind:options`) to ensure the value is interpreted as a JavaScript object. Forgetting the colon will pass the literal string 'options' instead of your configuration object.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"If using in standalone mode, use `<pdf-object>`. For build mode, `<PdfObject>` is generally preferred for consistency with Vue best practices.","message":"For standalone (client-side, no build step) Vue 3 usage, the component must be referenced using its hyphenated form (`<pdf-object>`) in templates, whereas in build-mode projects, both `<PdfObject>` and `<pdf-object>` are typically supported.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install pdfobject` in your project's root directory.","cause":"The `pdfobject` peer dependency, which `pdfobject-vue` relies on, has not been installed in your project.","error":"Error: Cannot find module 'pdfobject' or its corresponding type declarations."},{"fix":"Ensure the component is used as `<PdfObject />` in your templates and imported as `import { PdfObject } from 'pdfobject-vue';`.","cause":"You are attempting to use the component with incorrect casing, likely `PDFObject` instead of the required camelCase `PdfObject`.","error":"[Vue warn]: Failed to resolve component: PDFObject"},{"fix":"Use `:options` (shorthand for `v-bind:options`) when passing an object: `<PdfObject :options=\"{ height: '500px' }\" />`.","cause":"The `options` prop was passed without Vue's binding syntax (`:`), leading it to be treated as a static string instead of a JavaScript object.","error":"[Vue warn]: Invalid prop: type check failed for prop \"options\". Expected Object, got String."},{"fix":"Ensure your project is using Vue 3 (`npm install vue@next` for the latest Vue 3) and resolve any dependency conflicts by updating or manually adjusting versions if necessary.","cause":"Your project's Vue version does not satisfy the peer dependency requirements of `pdfobject-vue`, or there's a conflict in your dependency tree.","error":"npm ERR! ERESOLVE unable to resolve dependency tree ... peer vue@\"^3.0.0\" from pdfobject-vue@0.0.5"}],"ecosystem":"npm"}