Registry / web-framework / pdfobject-vue

pdfobject-vue

library0.0.5jsnpmunverified

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.

web-framework

npm install pdfobject-vue

package ↗

INSTALL

IMPORT

SIG · PDFOBJECT-VUE

pdfobject-vue

web-frameworkjavascriptv0.0.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

PDFObjectPlugin

✓ import PDFObjectPlugin from 'pdfobject-vue';

✗ import { PDFObjectPlugin } from 'pdfobject-vue';

The global plugin is exported as a default export, typically used with `app.use()` in `main.ts` or `main.js`.

PdfObject

✓ import { PdfObject } from 'pdfobject-vue';

✗ import { PDFObject } from 'pdfobject-vue';

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).

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.

// main.ts (or main.js) import { createApp } from 'vue'; import App from './App.vue'; import PDFObjectPlugin from 'pdfobject-vue'; const app = createApp(App); app.use(PDFObjectPlugin); // Register the PDFObject Vue plugin globally app.mount('#app'); // App.vue (or any Vue component where you want to embed a PDF) <script setup lang="ts"> import { PdfObject } from 'pdfobject-vue'; // Define the URL for your PDF document const pdfUrl = '/documents/sample.pdf'; // Ensure this path is accessible // Define options for PDFObject (e.g., height, initial page, zoom) const pdfOptions = { height: '600px', // Set the height of the embedded PDF viewer pdfOpenParams: { view: 'FitV', // Fit view to width page: 1 } }; </script> <template> <div id="app"> <h1>My Document Viewer</h1> <p>Below is an embedded PDF document:</p>  <PdfObject :url="pdfUrl" :options="pdfOptions" /> <p>For more configuration options, refer to <a href="https://pdfobject.com" target="_blank">PDFObject.com</a>.</p> </div> </template> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; } #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); } h1 { color: #333; margin-bottom: 15px; } p { color: #666; line-height: 1.6; } a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; } </style>

Debug

Known issues

gotchaThe 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`.

fix

Ensure `pdfobject` is installed alongside `pdfobject-vue`: `npm install pdfobject vue pdfobject-vue`.

affects: >=0.0.1

gotchaThe 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.

fix

Always refer to the component as `PdfObject` (e.g., `<PdfObject />` in templates or `import { PdfObject } from 'pdfobject-vue'`).

affects: >=0.0.1

gotchaAs 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.

fix

For production deployments, consider pinning to exact versions (e.g., `"pdfobject-vue": "0.0.5"`) or thoroughly test any updates before integration.

affects: >=0.0.1

gotchaWhen 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.

fix

Always bind the `options` prop: `<PdfObject :url="pdfUrl" :options="{ height: '500px' }" />`.

affects: >=0.0.1

gotchaFor 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.

fix

If using in standalone mode, use `<pdf-object>`. For build mode, `<PdfObject>` is generally preferred for consistency with Vue best practices.

affects: >=0.0.1

Errors

Common errors & fixes

Error: Cannot find module 'pdfobject' or its corresponding type declarations.

The `pdfobject` peer dependency, which `pdfobject-vue` relies on, has not been installed in your project.

fix

Run `npm install pdfobject` in your project's root directory.

[Vue warn]: Failed to resolve component: PDFObject

You are attempting to use the component with incorrect casing, likely `PDFObject` instead of the required camelCase `PdfObject`.

fix

Ensure the component is used as `<PdfObject />` in your templates and imported as `import { PdfObject } from 'pdfobject-vue';`.

[Vue warn]: Invalid prop: type check failed for prop "options". Expected Object, got String.

The `options` prop was passed without Vue's binding syntax (`:`), leading it to be treated as a static string instead of a JavaScript object.

fix

Use `:options` (shorthand for `v-bind:options`) when passing an object: `<PdfObject :options="{ height: '500px' }" />`.

npm ERR! ERESOLVE unable to resolve dependency tree ... peer vue@"^3.0.0" from pdfobject-vue@0.0.5

Your project's Vue version does not satisfy the peer dependency requirements of `pdfobject-vue`, or there's a conflict in your dependency tree.

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.

Upgrade

Version history

0.0.5latest on npm

Audit

Dependencies

vuerequiredRuntime peer dependency for the Vue 3 framework.

pdfobjectrequiredCore JavaScript utility that pdfobject-vue wraps. It must be installed separately as a peer dependency.

Agent activity

2 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/pdfobject-vue ↗