Add images and fonts

Keep local images under pdfs/assets and fonts under pdfs/fonts. Nuxt PDF validates and embeds them in the Nitro server output.

In development, each render reads and validates local image files again. Image edits take effect without restarting the server.

Add a local image

Put a PNG or JPEG in pdfs/assets. Set PdfImage.src to the path relative to that directory:

<PdfImage
  src="brand/logo.png"
  :style="{ height: 40, objectFit: 'contain', width: 120 }"
/>

Public rendering accepts local paths, admitted PNG or JPEG byte sources, and allowlisted HTTPS URLs. It blocks data: URL strings, absolute filesystem paths, parent traversal, symlink escapes, and SVG files used as image sources.

Use PdfSvg for vector graphics authored in the document tree.

Register a local font

Put a TTF, OTF, or WOFF2 file in pdfs/fonts, then register one entry for each weight and style used by the document:

export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-pdf'],
  pdf: {
    fonts: [
      {
        family: 'Invoice Sans',
        src: 'InvoiceSans-Regular.ttf',
        fontStyle: 'normal',
        fontWeight: 400,
      },
      {
        family: 'Invoice Sans',
        src: 'InvoiceSans-Bold.ttf',
        fontStyle: 'normal',
        fontWeight: 700,
      },
    ],
  },
})

Set the family on a parent so text descendants inherit it:

<PdfPage :style="{ fontFamily: 'Invoice Sans' }">
  <PdfText>Invoice</PdfText>
</PdfPage>

If a requested family, weight, or style was not registered, rendering fails with PDF_LAYOUT_ERROR. If the configured file is invalid, module setup throws a TypeError before a template render starts.

Check language coverage

A font must contain the glyphs used by the document. Latin Extended, Greek, Cyrillic, and custom hyphenation are covered by the tested corpus with supplied fonts. CJK, combining marks, Arabic, bidirectional text, and variable fonts need application-specific semantic and raster tests. Emoji and fallback font chains are not supported; use an admitted image for an emoji graphic.

Resource validation

The module checks four things:

• Structure: images must decode as PNG or JPEG; fonts need a valid TTF, OTF, or WOFF2 structure and matching extension.
• Size: a local image is limited to 10 MB and a font to 5 MB.
• Location: the resolved path must remain inside its declared root.
• Embedding: validated bytes travel in the Nitro server output, so production rendering does not read these files from disk.

Development reloads local image bytes for the next preview render. The module-options reference lists the exact font fields. Use the remote-image guide for HTTPS sources.