vue-pdf-export
Get Started

Nuxt 3 & Nuxt 4 SSR

Use vue-pdf-export safely with Nuxt 3 and Nuxt 4 SSR, hydration, ClientOnly and lazy browser-side PDF generation.

Nuxt 3 + Nuxt 4 compatible

vue-pdf-export supports SSR-safe package imports in both Nuxt 3 and Nuxt 4. PDF generation itself uses browser APIs and must run on the client.

Validated integration paths include:

  • server-side package import
  • Nuxt 3 SSR build/runtime
  • Nuxt 4 SSR build/runtime
  • hydration
  • client navigation
  • lazy-loaded PDF consumers
  • <ClientOnly> integration
  • client-event composable generation

Browser-heavy PDF dependencies are loaded from generation paths instead of being eagerly evaluated during the server import path.

Recommended component pattern

Use <ClientOnly> when the export UI itself does not need to render on the server:

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

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

async function exportPdf() {
  await pdfRef.value?.generatePdf()
}
</script>

<template>
  <ClientOnly>
    <Html2Pdf
      ref="pdfRef"
      filename="nuxt-report.pdf"
      :enable-download="true"
    >
      <template #pdf-content>
        <article>
          <h1>Nuxt report</h1>
          <p>This PDF is generated in the browser.</p>
        </article>
      </template>
    </Html2Pdf>

    <button @click="exportPdf">
      Export PDF
    </button>
  </ClientOnly>
</template>

Lazy import on a client event

For routes where PDF functionality is only used after a user action, you can lazy-load the package from a client event:

async function loadPdfTools() {
  if (!import.meta.client) return

  const pdf = await import('vue-pdf-export')

  return pdf
}

This is optional. A normal package import is SSR-safe, but lazy loading can help keep PDF-specific code out of paths that never use it.

Composable generation

Call browser-side generation from mounted/client UI events rather than server setup work.

import { useHtml2Pdf } from 'vue-pdf-export'

const {
  generate,
  loading,
  error,
} = useHtml2Pdf()

async function onExportClick() {
  if (!import.meta.client) return

  await generate(/* browser DOM/content options */)
}

What not to do

Do not start PDF generation while Nuxt is rendering on the server:

// Avoid server-side generation calls.
if (import.meta.server) {
  // generatePdf() should not be called here.
}

The supported boundary is simple: imports may happen during SSR; PDF generation happens in the browser.

Nuxt compatibility
Nuxt 3 and Nuxt 4 are part of the automated SSR compatibility fixtures used for the package release gate.

Pagination

Configure manual and automatic pagination in vue-pdf-export with page-break helpers, no-break behavior and incremental Canvas rendering guidance.

Playground

Explore the live vue-pdf-export playground for Canvas and selectable-text rendering, PDF outputs, metrics, stress testing and interactive package features.

Copyright © 2026