{"id":12497,"library":"vue-html-to-paper","title":"Vue HTML to Paper","description":"Vue HTML to Paper is a plugin for Vue.js applications, primarily designed for Vue 3 (version 2.x), which provides functionality to print specific HTML elements to paper. It offers a convenient way to print custom content sections of a webpage, bypassing the default browser print behavior for entire pages. The plugin integrates into a Vue application by registering a global method, `$htmlToPaper`, accessible from any component, and can also be used via a `v-html-to-paper` directive. It supports comprehensive print customization, including setting window names, specific print window features (like fullscreen or scrollbars), and the inclusion of external stylesheets for consistent styling in print output. While the current stable version 2.0.3 is built for Vue 3, a version 1.x branch exists for Vue 2 applications, though its support is now considered low priority. The package's release cadence is irregular, with the latest major update (2.0.3) published approximately three years ago, suggesting a maintenance rather than active feature development phase. It ships with TypeScript types, aiding developers in building type-safe Vue projects.","status":"maintenance","version":"2.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/mycure-inc/vue-html-to-paper","tags":["javascript","html","printing","element","print html","print element","typescript"],"install":[{"cmd":"npm install vue-html-to-paper","lang":"bash","label":"npm"},{"cmd":"yarn add vue-html-to-paper","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-html-to-paper","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue.js framework integration.","package":"vue","optional":false}],"imports":[{"note":"The default export is the plugin itself, used with `app.use()` in Vue 3. CommonJS `require` is generally incorrect for modern Vue 3 projects which are ESM-first.","wrong":"const VueHtmlToPaper = require('vue-html-to-paper');","symbol":"VueHtmlToPaper","correct":"import VueHtmlToPaper from 'vue-html-to-paper';"},{"note":"The `$htmlToPaper` method is globally injected into Vue component instances after the plugin is installed. It is not directly imported.","wrong":"import { $htmlToPaper } from 'vue-html-to-paper';","symbol":"$htmlToPaper","correct":"this.$htmlToPaper('print-area-id', printOptions, callback);"},{"note":"The `v-html-to-paper` directive is automatically registered upon plugin installation and provides a declarative way to trigger print operations from elements.","wrong":"Vue.directive('html-to-paper', ...);","symbol":"v-html-to-paper directive","correct":""}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport VueHtmlToPaper from 'vue-html-to-paper';\n\nconst app = createApp(App);\n\nconst options = {\n name: '_blank',\n specs: [\n 'fullscreen=yes',\n 'titlebar=yes',\n 'scrollbars=yes'\n ],\n styles: [\n 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',\n '/my-custom-print-styles.css' // Ensure this path is correct and accessible from /public or build output\n ],\n timeout: 1000, // default timeout before the print window appears\n autoClose: true, // if false, the window will not close after printing\n windowTitle: 'Custom Print Title'\n};\n\napp.use(VueHtmlToPaper, options);\n\napp.mount('#app');\n\n// In a Vue component (e.g., App.vue):\n\n
\n
\n
Document to Print
\n
This is the content that will be sent to the printer.
\n
\n
Item 1
\n
Item 2
\n
\n
\n \n
\n\n\n","lang":"typescript","description":"Demonstrates how to install `vue-html-to-paper` as a Vue 3 plugin and use the injected `$htmlToPaper` method in a component to print a specific HTML element with custom styles and options."},"warnings":[{"fix":"For Vue 2 projects, install `vue-html-to-paper@^1.0.0` (e.g., `npm install vue-html-to-paper@1.4.5`). For new Vue 3 projects, ensure you are using `vue-html-to-paper@^2.0.0`.","message":"Version 2.x of `vue-html-to-paper` is designed exclusively for Vue 3. For Vue 2 applications, you must use version 1.x (specifically v1.4.5 or earlier). Attempting to use v2.x with Vue 2 will result in runtime errors due to fundamental API differences.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Replace `Vue.use(VueHtmlToPaper, options)` with `app.use(VueHtmlToPaper, options)` where `app` is your Vue 3 application instance (e.g., `const app = createApp(App);`).","message":"When migrating from Vue 2 to Vue 3, the plugin installation syntax changes from `Vue.use()` to `app.use()`. Using the old `Vue.use()` in a Vue 3 application will fail.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Ensure all local CSS files specified in `options.styles` are located in your project's `public` directory (or its equivalent) so they are directly accessible via their URL in the browser's print window. For example, if your file is at `public/css/print.css`, reference it as `/css/print.css`.","message":"Local stylesheets provided in the `styles` option (e.g., `/my-custom-print-styles.css`) might not load correctly if they are not placed in the `public` directory of your project (for Webpack or Vite-based builds). The build process often ignores `src` assets for direct public access.","severity":"gotcha","affected_versions":"*"},{"fix":"If you have multiple plugins, install them individually:\n`app.use(VueRouter);\napp.use(VueHtmlToPaper, options);`\nAvoid: `app.use(VueRouter, VueHtmlToPaper, options);`","message":"Do not attempt to register multiple Vue plugins within a single `app.use()` (or `Vue.use()`) call. Each plugin must be installed separately.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure `app.use(VueHtmlToPaper, options)` (for Vue 3) is called before your root Vue component is mounted, and always access `$htmlToPaper` using `this.$htmlToPaper` within component methods.","message":"The `$htmlToPaper` method and `v-html-to-paper` directive are only available after the plugin has been installed on the Vue application instance. Attempting to access them before installation or outside of a Vue component context will result in undefined errors.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For Vue 3, ensure `app` is a `createApp()` instance and the plugin is correctly imported. For Vue 2, use `Vue.use(VueHtmlToPaper, options);` and install `vue-html-to-paper@^1.0.0`.","cause":"Attempting to install the plugin using `app.use()` in a Vue 2 project, or using `Vue.use()` in a Vue 3 setup where `app` is not a Vue application instance.","error":"TypeError: app.use is not a function"},{"fix":"Verify that `app.use(VueHtmlToPaper, options)` is called in your `main.ts` (or `main.js`). For TypeScript, you may need to declare the global property in a declaration file (e.g., `shims-vue.d.ts`): `declare module 'vue' { interface ComponentCustomProperties { $htmlToPaper: (el: string, options?: object, callback?: Function) => void; } }`","cause":"The `vue-html-to-paper` plugin has not been correctly installed on the Vue application instance, or TypeScript isn't aware of the injected global property.","error":"Property '$htmlToPaper' does not exist on type 'ComponentPublicInstance<...>'"},{"fix":"Ensure the target HTML element has a unique and correct `id` attribute, and that the element is rendered and available in the DOM before `$htmlToPaper` is invoked.","cause":"The element ID passed to `$htmlToPaper` (or referenced by the directive) does not exist in the DOM when the print function is called.","error":"Element to print #my-element-id not found!"},{"fix":"Always use ES Module `import VueHtmlToPaper from 'vue-html-to-paper';` in modern Vue 3 projects.","cause":"Attempting to use CommonJS `require()` syntax in an ESM-only Vue 3 project, or a misconfiguration of module resolvers.","error":"Module parse failed: Unexpected token"}],"ecosystem":"npm"}