Skip to content

BayBreezy/nuxt-pdfmake

Repository files navigation

Nuxt PDFMake

npm version npm downloads License Nuxt

Easily add pdfMake to your Nuxt application.

Features

  • usePDFMake composable auto-imported on the client
  • Server-side PDF generation via createPDFBuffer, createPDFBase64, and useServerPDFMake
  • Pre-built POST /_pdfmake/generate API endpoint (dev only by default)
  • Font management — embed custom fonts, load Google Fonts at build time, or reference CDN URLs
  • Nuxt DevTools panel to inspect fonts and module config

Quick Setup

# Using bun
bun add -D nuxt-pdfmake

# Using pnpm
pnpm add -D nuxt-pdfmake

# Using yarn
yarn add --dev nuxt-pdfmake

# Using npm
npm install --save-dev nuxt-pdfmake

Add nuxt-pdfmake to the modules section of nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["nuxt-pdfmake"],
});

That's it! You can now use Nuxt PDFMake in your Nuxt app ✨

Usage

Client-side

Use the auto-imported usePDFMake composable inside a Vue component:

const pdfMake = usePDFMake();

const doc = pdfMake!.createPdf({ content: ["Hello, world!"] });
doc.open(); // opens in a new browser tab
doc.download("my-file.pdf");

Or access the instance directly via the Nuxt app plugin:

const { $pdfMake } = useNuxtApp();

Server-side (Nitro handlers)

Use the server utilities inside server/api/ or server/routes/:

// server/api/report.get.ts
export default defineEventHandler(async (event) => {
  const buffer = await createPDFBuffer({ content: ["Hello from the server!"] });
  setHeader(event, "Content-Type", "application/pdf");
  return buffer;
});
Utility Returns Description
createPDFBuffer(docDefinition) Promise<Buffer> Generate a PDF as a Node.js Buffer
createPDFBase64(docDefinition) Promise<string> Generate a PDF as a base64 string
useServerPDFMake() pdfmake instance Access the raw server-side pdfmake instance

Pre-built API endpoint

A POST /_pdfmake/generate endpoint is included and enabled in development. Send a docDefinition in the request body to receive a PDF:

const { data } = await useFetch("/_pdfmake/generate", {
  method: "POST",
  body: { docDefinition: { content: ["Hello, PDF!"] } },
  responseType: "blob",
});

To enable in production, set enableApiRoute: true in your module options and add your own auth middleware.

Font Configuration

Configure fonts via the pdfmake key in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["nuxt-pdfmake"],
  pdfmake: {
    fonts: {
      // Local font files (embedded as base64 at build time — ~270 KB per variant)
      custom: {
        MyFont: {
          normal: "assets/fonts/MyFont-Regular.ttf",
          bold: "assets/fonts/MyFont-Bold.ttf",
        },
      },

      // Google Fonts downloaded and cached at build time (~1 MB per family)
      googleFonts: ["Roboto", "Lato"],

      // CDN/HTTP URLs fetched at PDF-creation time
      cdn: {
        OpenSans: {
          normal: "https://fonts.example.com/OpenSans-Regular.ttf",
        },
      },

      // Set to false to opt out of the default Roboto font
      useDefaultRoboto: true,
    },
  },
});

When no fonts are configured, the default Roboto font from the pdfmake CDN is used automatically.

Module Options

Option Type Default Description
enabled boolean true Enable or disable the module
enableComposable boolean true Auto-import usePDFMake and server utilities
enableDevtools boolean true Show the PDFMake panel in Nuxt DevTools
enableApiRoute boolean true (dev only) Expose POST /_pdfmake/generate
fonts.custom Record<string, TFontFamilyTypes> Local font files embedded at build time
fonts.googleFonts string[] Google Font family names fetched at build time
fonts.cdn Record<string, TFontFamilyTypes> CDN font URLs passed directly to pdfmake
fonts.useDefaultRoboto boolean true (when no fonts set) Include pdfmake's default Roboto CDN font

Development

# Install dependencies
bun install

# Generate type stubs
bun run dev:prepare

# Develop with the playground
bun run dev

# Build the playground
bun run dev:build

# Run linter
bun run lint

# Run tests
bun run test
bun run test:watch

# Build the module
bun run prepack

# Release a new version
bun run release