Vue 3 Component for Printing

Common errors

• TypeError: Cannot read properties of undefined (reading 'toValue')

  cause Attempting to use `toValue()` on print event properties that no longer require it after a bug fix in v1.3.1.
  fix Update `vue-to-print` to version `1.3.1` or newer. Remove explicit `toValue()` calls from print event handlers, as the values are now directly accessible.

• npm ERR! ERESOLVE unable to resolve dependency tree

  cause Conflict with `@vue/composition-api` dependency in older `vue-to-print` versions and your project's Vue setup.
  fix Upgrade `vue-to-print` to version `1.2.0-alpha.3` or later. If the issue persists, ensure your project's `package.json` correctly specifies `vue` as a peer dependency matching the library's requirements (`^3.0.0`).

Warnings

• breaking Prior to v1.2.0-alpha.3, the package included `@vue/composition-api` internally, which could cause Vue version conflicts during installation or runtime, especially in projects not using a `vue-demi` setup.
  Fix: Upgrade to v1.2.0-alpha.3 or higher to resolve potential dependency conflicts related to `@vue/composition-api`.
• gotcha In versions prior to v1.3.1, accessing print event values might have required using `toValue()` which was later fixed as unnecessary, suggesting potential incorrect usage or a bug in earlier implementations.
  Fix: Ensure you are on v1.3.1 or later. If on an older version and facing issues with print event data, try removing `toValue()` calls if they seem redundant or cause issues.
• gotcha Version 1.5.0 introduced 'AI assistant integration features' and new documentation formats (`llms.txt`, `llms-full.txt`). This feature addition is unusual for a printing utility and might introduce unexpected dependencies or expanded scope beyond printing functionalities.
  Fix: Review the package's dependencies and generated bundles for any unexpected changes or additions, particularly if bundle size or external network requests are a concern.
• gotcha The package internally augmented `vue` rather than `@vue/runtime-core` prior to v1.1.1. This could lead to type inference issues or conflicts for TypeScript users who had custom type augmentations or specific runtime core imports.
  Fix: Update to v1.1.1 or newer. If maintaining older versions, manually check and adjust TypeScript configurations (`tsconfig.json`) or custom type declarations if you encounter type conflicts.

Install

• npm install vue-to-print npm
• yarn add vue-to-print yarn
• pnpm add vue-to-print pnpm

Imports

• usePrint
  wrong:

  const { usePrint } = require('vue-to-print')

  correct:

  import { usePrint } from 'vue-to-print'

  Primary composable hook for programmatic printing. Vue-to-print is ESM-only.
• Print
  wrong:

  import Print from 'vue-to-print'

  correct:

  import { Print } from 'vue-to-print'

  Named import for the renderless `Print` component, used as a wrapper for content to be printed. Not a default export.
• PrintPlugin
  wrong:

  import { PrintPlugin } from 'vue-to-print'

  correct:

  import PrintPlugin from 'vue-to-print'

  Optional default export for global registration via `app.use()`, though `usePrint` is preferred for explicit control.

Quickstart

Demonstrates printing a specific DOM element's content using the `usePrint` composable and a ref.

import { defineComponent, ref } from 'vue';
import { Print, usePrint } from 'vue-to-print';

export default defineComponent({
  components: { Print },
  setup() {
    const printContentRef = ref(null);
    const { print, isPrinting } = usePrint(() => printContentRef.value);

    return {
      printContentRef,
      print,
      isPrinting,
    };
  },
  template: `
    <div>
      <h1>Document to Print</h1>
      <div ref="printContentRef" style="padding: 20px; border: 1px solid #ccc;">
        <h2>Printable Section</h2>
        <p>This content will be sent to the printer.</p>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
        <p>Current date: {{ new Date().toLocaleDateString() }}</p>
      </div>
      <button @click="print" :disabled="isPrinting" style="margin-top: 20px; padding: 10px 20px;">
        {{ isPrinting ? 'Printing...' : 'Print Document' }}
      </button>
      <p v-if="isPrinting">Preparing document for print...</p>
    </div>
  `,
});