{"id":15271,"library":"vue-html2pdf","title":"Vue.js HTML to PDF Generator","description":"vue-html2pdf is a Vue.js wrapper component that facilitates client-side PDF generation directly from HTML content within Vue components, leveraging the robust capabilities of the html2pdf.js library internally. The package allows developers to easily convert any Vue component's template or arbitrary HTML element into a downloadable PDF document. Currently, the stable version is 1.8.0. While there isn't a strict release cadence specified, updates address breaking changes and new features. Key differentiators include its simple component-based API, extensive props for controlling PDF quality, format, orientation, and content width, and a comprehensive event system for managing the entire generation lifecycle, including pagination and pre-download hooks. It provides specific integration guidance for Nuxt.js projects and offers fine-grained control over the underlying html2pdf.js library through event arguments.","status":"active","version":"1.8.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","pdf-generation","vuejs","client-side","html","canvas","html2pdf"],"install":[{"cmd":"npm install vue-html2pdf","lang":"bash","label":"npm"},{"cmd":"yarn add vue-html2pdf","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-html2pdf","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library for client-side HTML to PDF conversion, used internally by vue-html2pdf.","package":"html2pdf.js","optional":false}],"imports":[{"note":"The component is exported as a default export. Use this for direct component registration or local usage.","wrong":"import { VueHtml2pdf } from 'vue-html2pdf'","symbol":"VueHtml2pdf","correct":"import VueHtml2pdf from 'vue-html2pdf'"},{"note":"When using in Nuxt.js, register this as a client-side plugin. Ensure the plugin configuration in `nuxt.config.js` sets `mode: 'client'`.","wrong":"const VueHtml2pdf = require('vue-html2pdf'); Vue.use(VueHtml2pdf)","symbol":"VueHtml2pdf (as Plugin)","correct":"import VueHtml2pdf from 'vue-html2pdf'; Vue.use(VueHtml2pdf)"}],"quickstart":{"code":"import VueHtml2pdf from 'vue-html2pdf';\n\nexport default {\n  components: {\n    VueHtml2pdf\n  },\n  methods: {\n    generateReport() {\n      // This method is called to trigger PDF generation.\n      // It accesses the component via its ref and calls the generatePdf method.\n      this.$refs.html2Pdf.generatePdf();\n    },\n    onProgress(event) {\n      console.log(`PDF generation progress: ${event}%`);\n    },\n    hasStartedGeneration() {\n      console.log('PDF generation has started.');\n    },\n    hasGenerated(event) {\n      console.log('PDF has been successfully generated.', event);\n    }\n  },\n  template: `\n    <div>\n      <button @click=\"generateReport\">Generate PDF</button>\n      <vue-html2pdf\n        :show-layout=\"false\"\n        :float-layout=\"true\"\n        :enable-download=\"true\"\n        :preview-modal=\"true\"\n        :paginate-elements-by-height=\"1400\"\n        filename=\"my-document\"\n        :pdf-quality=\"2\"\n        :manual-pagination=\"false\"\n        pdf-format=\"a4\"\n        pdf-orientation=\"landscape\"\n        pdf-content-width=\"800px\"\n        @progress=\"onProgress($event)\"\n        @hasStartedGeneration=\"hasStartedGeneration()\"\n        @hasGenerated=\"hasGenerated($event)\"\n        ref=\"html2Pdf\"\n      >\n        <section slot=\"pdf-content\">\n          <h1>Hello, Vue-HTML2PDF!</h1>\n          <p>This is a sample content that will be converted into a PDF document.</p>\n          <img src=\"https://via.placeholder.com/300x150.png?text=Image\" alt=\"Placeholder Image\" style=\"width: 300px; height: 150px;\" />\n          <p>More content here to potentially trigger pagination if height exceeds 1400px.</p>\n        </section>\n      </vue-html2pdf>\n    </div>\n  `\n}","lang":"javascript","description":"This quickstart demonstrates how to import and use the `VueHtml2pdf` component in a Vue application, trigger PDF generation programmatically, and listen to key lifecycle events like progress and completion."},"warnings":[{"fix":"Review and update all event listeners in your Vue components to use the new event names (`@startPagination`, `@hasDownloaded`, etc.) as per the 1.8.x migration guide.","message":"Several event names were changed in version 1.8.x. `hasStartedDownload` became `startPagination`, and `hasGenerated` became `hasDownloaded`. New events like `hasPaginated` and `beforeDownload` were also introduced.","severity":"breaking","affected_versions":">=1.8.0"},{"fix":"Set the props `:enable-download=\"false\"` and `:preview-modal=\"false\"` on the `vue-html2pdf` component when implementing custom logic within the `@beforeDownload` event.","message":"When using the `@beforeDownload` event to gain full control over the underlying html2pdf.js instance (e.g., for custom headers/footers or page numbering), you must manually disable automatic PDF generation and download.","severity":"gotcha","affected_versions":">=1.8.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"For Nuxt.js, ensure the plugin is configured with `mode: 'client'` in `nuxt.config.js` and wrap component usage in `<client-only>` tags in your templates. Example: `<client-only><VueHtml2pdf ...></VueHtml2pdf></client-only>`.","cause":"Attempting to use `vue-html2pdf` in a server-side rendering (SSR) context (e.g., Nuxt.js) without specifying client-side only.","error":"ReferenceError: VueHtml2pdf is not defined"},{"fix":"Ensure the `vue-html2pdf` component is present in the DOM and accessible via its ref. If calling immediately, consider wrapping the call in `this.$nextTick(() => this.$refs.html2Pdf.generatePdf())` to ensure the component is mounted.","cause":"The component reference (`this.$refs.html2Pdf`) is not available or the `generatePdf` method is called before the component is fully mounted or rendered.","error":"TypeError: Cannot read properties of undefined (reading 'generatePdf')"}],"ecosystem":"npm"}