{"id":12607,"library":"vue-to-print","title":"Vue 3 Component for Printing","description":"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.","status":"active","version":"1.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/siaikin/vue-to-print","tags":["javascript","print","printer","typescript","vue3"],"install":[{"cmd":"npm install vue-to-print","lang":"bash","label":"npm"},{"cmd":"yarn add vue-to-print","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-to-print","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 3 integration.","package":"vue","optional":false}],"imports":[{"note":"Primary composable hook for programmatic printing. Vue-to-print is ESM-only.","wrong":"const { usePrint } = require('vue-to-print')","symbol":"usePrint","correct":"import { usePrint } from 'vue-to-print'"},{"note":"Named import for the renderless `Print` component, used as a wrapper for content to be printed. Not a default export.","wrong":"import Print from 'vue-to-print'","symbol":"Print","correct":"import { Print } from 'vue-to-print'"},{"note":"Optional default export for global registration via `app.use()`, though `usePrint` is preferred for explicit control.","wrong":"import { PrintPlugin } from 'vue-to-print'","symbol":"PrintPlugin","correct":"import PrintPlugin from 'vue-to-print'"}],"quickstart":{"code":"import { defineComponent, ref } from 'vue';\nimport { Print, usePrint } from 'vue-to-print';\n\nexport default defineComponent({\n components: { Print },\n setup() {\n const printContentRef = ref(null);\n const { print, isPrinting } = usePrint(() => printContentRef.value);\n\n return {\n printContentRef,\n print,\n isPrinting,\n };\n },\n template: `\n
\n

Document to Print

\n
\n

Printable Section

\n

This content will be sent to the printer.

\n \n

Current date: {{ new Date().toLocaleDateString() }}

\n
\n \n

Preparing document for print...

\n
\n `,\n});","lang":"typescript","description":"Demonstrates printing a specific DOM element's content using the `usePrint` composable and a ref."},"warnings":[{"fix":"Upgrade to v1.2.0-alpha.3 or higher to resolve potential dependency conflicts related to `@vue/composition-api`.","message":"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.","severity":"breaking","affected_versions":"<1.2.0-alpha.3"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<1.3.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.5.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<1.1.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to use `toValue()` on print event properties that no longer require it after a bug fix in v1.3.1.","error":"TypeError: Cannot read properties of undefined (reading 'toValue')"},{"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`).","cause":"Conflict with `@vue/composition-api` dependency in older `vue-to-print` versions and your project's Vue setup.","error":"npm ERR! ERESOLVE unable to resolve dependency tree"}],"ecosystem":"npm"}