Vue to PDF in Vue 3 and Nuxt

To turn a Vue component into a PDF in the browser, install vue-pdf-export, put the document inside its #pdf-content slot, and call generatePdf() from a component ref. Choose Canvas rendering when visual CSS fidelity matters most, or selectable-text rendering when people must search and copy body text.

Generate a PDF from a Vue component

<script setup lang="ts">
import { ref } from 'vue'
import { Html2Pdf } from 'vue-pdf-export'
import 'vue-pdf-export/style.css'

const pdf = ref<InstanceType<typeof Html2Pdf> | null>(null)

async function downloadReport() {
  await pdf.value?.generatePdf()
}
</script>

<template>
  <button type="button" @click="downloadReport">Download report</button>
  <Html2Pdf ref="pdf" filename="report.pdf" render-mode="canvas">
    <template #pdf-content>
      <article><h1>Report</h1><p>Rendered from a Vue component.</p></article>
    </template>
  </Html2Pdf>
</template>

The package's default is Canvas. The explicit render-mode above makes the choice visible. For a JavaScript Options API example and download settings, use the quick start. For Nuxt 3 and Nuxt 4, import the component safely during SSR and generate only after the browser mounts; see the Nuxt guide.

Which Vue PDF approach fits the document?

The html2pdf.js project documents that its Canvas path renders content as an image, so text is not searchable or selectable. vue-pdf-export exposes that style of capture as its Canvas mode and also provides a selectable-text renderer. These modes share the component API, pagination controls, preview, download and print flow.

Can Vue-generated PDFs be searched?

Yes, when you use render-mode="text" for the document body. PDF viewers can then select and search the emitted text. Canvas mode keeps the body as page images. Custom TTF or TrueType-outline OTF files can be registered for selectable text; CFF-outline OTF and WOFF/WOFF2 are not supported for embedding. See fonts, charts, SVG and images for the renderer-specific limits.

Can I combine PDFs in Vue?

You can prepend or append existing PDF pages to a generated document using the published composition options. This combines whole pages; it does not provide arbitrary editing of their internal content.

What should I test before shipping?

Export a representative document in each target browser. Check page breaks, font loading, remote-image CORS, output size, links and text selection as applicable. For long reports, use page-aware progress, cancellation and generation metrics and test a realistic page count. The production guide covers release checks.