Getting Started

Devtools

Use the Nuxt PDFMake DevTools panel while developing.

Nuxt PDFMake adds a PDFMake tab to Nuxt DevTools during development.

The panel is served from /_pdfmake/devtools and is only available in development. It helps you inspect the module runtime configuration without digging through generated files.

Registered Fonts

The first card lists every family pdfmake can use, with where it comes from:

  • Embedded and Google fonts, with the estimated size each adds to your bundle
  • CDN fonts, which are fetched when a PDF is created
  • Nuxt Fonts families resolved by @nuxt/fonts, with their font format and which of the four pdfmake slots (normal, bold, italics, bolditalics) they fill
  • The Default Roboto font when useDefaultRoboto is on
Nuxt Fonts families
In development @nuxt/fonts resolves families lazily, and this module packages them once when the server starts. Mark PDF fonts global: true so they are resolved up front, and restart the dev server after changing font config. See Nuxt Fonts Integration.

Test Generator

The second card posts a document definition to POST /_pdfmake/generate and previews the PDF in the panel.

  • Pick a Font family from the dropdown to set defaultStyle.font in the JSON, or type the family into defaultStyle.font yourself. Use the name exactly as shown in the table.
  • The sample document includes regular, bold, italic, and bold italic text so you can see each slot of a family.
  • If the API route is disabled, the card tells you to set enableApiRoute: true instead of showing the generator. The route is enabled in development by default.

Disable The Panel

Set enableDevtools to false if you do not want the panel registered.

ts

nuxt.config.ts

export default defineNuxtConfig({
  pdfmake: {
    enableDevtools: false,
  },
});

Disabling the panel does not disable PDF generation. It only removes the Nuxt DevTools integration.

Setup

Install Nuxt PDFMake and generate your first PDF.

Options

Configure Nuxt PDFMake behavior, routes, devtools, and fonts.