Styling and layout

The style prop accepts a typed PDF style object. It resembles a subset of CSS, but no browser stylesheet or cascade is involved.

Core rules

• Use camelCase keys such as backgroundColor and marginTop.
• Unitless numbers are PDF points.
• Length strings accept pt, in, mm, cm, and px where the property supports them.
• Percentages are strings such as '50%'.
• The default flex direction is column.
• Font family, size, weight, style, line height, color, opacity, and text alignment can inherit through the document tree. Set other layout explicitly.

<PdfView
  :style="{
    alignItems: 'center',
    backgroundColor: '#f4f6f4',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 12,
  }"
>
  <PdfText>Invoice total</PdfText>
  <PdfText>EUR 1,250.00</PdfText>
</PdfView>

Type shared styles

Use satisfies PdfStyle so TypeScript checks keys and values without widening the object:

import type { PdfStyle } from '@lupinum/nuxt-pdf'

export const eyebrow = {
  color: '#566159',
  fontSize: 7,
  letterSpacing: 1.4,
  textTransform: 'uppercase',
} satisfies PdfStyle

Style arrays merge left to right. Nested arrays are flattened, and false, null, and undefined entries are ignored:

<PdfText :style="[base, isTotal && total]">
  {{ amount }}
</PdfText>

Share geometry once

When a table header and its rows must align, define the column widths in one TypeScript module and import that definition from both components. A table is a column of rows. Each row uses flexDirection: 'row' and the same fixed widths. The header and body then cannot drift apart.

The style reference contains the exact property, unit, inheritance, and primitive matrix. The recipe guide shows tables, totals, headers, and page-break patterns.