vue-to-print

library1.5.1jsnpmunverified

Vue-to-print is a JavaScript library providing a Vue 3 component and composable hook designed to facilitate printing the content of any DOM element or Vue component. It aims to offer a consistent API experience with its React counterpart, ReactToPrint. Currently stable at version 1.5.1, the library demonstrates an active release cadence, with several updates including minor features and bug fixes throughout the last year. Key differentiators include its direct lineage from ReactToPrint, ensuring a familiar API for developers transitioning between frameworks, and robust TypeScript support, making it suitable for modern Vue 3 applications that prioritize type safety. It focuses on rendering content to a new print window while retaining original CSS styles.

web-framework

npm install vue-to-print

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-TO-PRINT

vue-to-print

web-frameworkjavascriptv1.5.1

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.

usePrint

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

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

Primary composable hook for programmatic printing. Vue-to-print is ESM-only.

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

✗ 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

✓ import PrintPlugin from 'vue-to-print'

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

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

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> `, });

Debug

Known issues

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

affects: <1.2.0-alpha.3

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

affects: <1.3.1

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

affects: >=1.5.0

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

affects: <1.1.1

Errors

Common errors & fixes

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

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

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

Upgrade

Version history

1.5.1latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue 3 integration.

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/siaikin/vue-to-print ↗

packagehttps://www.npmjs.com/package/vue-to-print ↗

homepagehttps://vue-to-print.com ↗