PDFObject Vue 3 Component

Common errors

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

  cause 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

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

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

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

Warnings

• gotcha 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`.
  Fix: Ensure `pdfobject` is installed alongside `pdfobject-vue`: `npm install pdfobject vue pdfobject-vue`.
• gotcha 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.
  Fix: Always refer to the component as `PdfObject` (e.g., `<PdfObject />` in templates or `import { PdfObject } from 'pdfobject-vue'`).
• gotcha 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.
  Fix: For production deployments, consider pinning to exact versions (e.g., `"pdfobject-vue": "0.0.5"`) or thoroughly test any updates before integration.
• gotcha 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.
  Fix: Always bind the `options` prop: `<PdfObject :url="pdfUrl" :options="{ height: '500px' }" />`.
• gotcha 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.
  Fix: If using in standalone mode, use `<pdf-object>`. For build mode, `<PdfObject>` is generally preferred for consistency with Vue best practices.

Install

• npm install pdfobject-vue npm
• yarn add pdfobject-vue yarn
• pnpm add pdfobject-vue pnpm

Imports

• PDFObjectPlugin
  wrong:

  import { PDFObjectPlugin } from 'pdfobject-vue';

  correct:

  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
  wrong:

  import { PDFObject } from 'pdfobject-vue';

  correct:

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

Quickstart

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>
    
    <!-- Use the PdfObject component to embed the PDF -->
    <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>