Core Concepts

Math & Diagrams

Two optional packages extend vue-pdf beyond its core primitives. Both convert their source into vector paths using vue-pdf's own SVG primitives — no external fonts, no raster images, so output stays sharp at any zoom.

Math Expressions

@vuepdf/math renders LaTeX with MathJax and maps the result onto SVG paths.

bash

npm install @vuepdf/math

The expression goes in the default slot:

vue

<script setup lang="ts">
import { Math } from '@vuepdf/math'
</script>

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40 }">
      <Math :height="40">x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}</Math>
    </Page>
  </Document>
</template>

Props

Prop	Type	Default	Description
`inline`	`boolean`	`false`	Compact inline mode instead of centered display mode.
`width`	`number \| string`	—	Width of the expression. Derived from the aspect ratio if omitted.
`height`	`number \| string`	—	Height of the expression. Derived from the aspect ratio if omitted.
`color`	`string`	`'black'`	Colour of the rendered expression.
`debug`	`boolean`	`false`	Draw a border around the expression to debug layout.

Inline Mode

Set inline and place it in a row alongside <Text>:

vue

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40 }">
      <View :style="{ flexDirection: 'row', alignItems: 'center' }">
        <Text>The equation </Text>
        <Math inline :height="12">E = mc^2</Math>
        <Text> is famous.</Text>
      </View>
    </Page>
  </Document>
</template>

Vue templates treat {{ as interpolation. A LaTeX source containing double braces breaks the template parser, so bind it from script instead of inlining it:

vue

<template>
  <!-- Vue reads {{ }} as interpolation, so bind the source as a string -->
  <Math :height="40">{{ expression }}</Math>
</template>

<script setup lang="ts">
const expression = '\\sqrt{{a+b}^2}'
</script>

Standard MathJax coverage applies: fractions, roots, operators, Greek letters, summations, products, integrals, limits, derivatives, matrices, binomial coefficients, trigonometric functions, accents, piecewise functions, and aligned equations.

Mermaid Diagrams

@vuepdf/mermaid renders Mermaid definitions — flowcharts, sequence diagrams, class diagrams, state charts, and the rest of Mermaid's grammar.

bash

npm install @vuepdf/mermaid

vue

<script setup lang="ts">
import { Mermaid } from '@vuepdf/mermaid'

const diagram = `graph TD
  A[Start] --> B{Is it valid?}
  B -->|Yes| C[Process]
  B -->|No| D[Reject]
  C --> E[Done]`
</script>

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40 }">
      <Mermaid :width="400" :height="300">{{ diagram }}</Mermaid>
    </Page>
  </Document>
</template>

Props

Prop	Type	Default	Description
`width`	`number \| string`	—	Width of the diagram. Derived from the viewBox aspect ratio if omitted.
`height`	`number \| string`	—	Height of the diagram. Derived from the viewBox aspect ratio if omitted.
`theme`	`string`	—	Built-in palette. See the list below.
`color`	`string`	—	Foreground and text colour.
`bg`	`string`	—	Background colour of the diagram.
`transparent`	`boolean`	—	Render with no background fill.
`accent`	`string`	—	Accent colour for arrowheads and highlights.
`line`	`string`	—	Stroke colour for edges and connectors.
`muted`	`string`	—	Colour for secondary text and labels.
`surface`	`string`	—	Node fill tint.
`border`	`string`	—	Node stroke colour.
`debug`	`boolean`	`false`	Draw a border around the diagram to debug layout.

Theming

Pass a theme name, or override any individual colour. Explicit colours win over the theme, so you can pick a theme and adjust one part of it:

vue

<template>
  <Document>
    <Page size="A4" :style="{ padding: 40, backgroundColor: '#1a1b26' }">
      <!-- Built-in theme -->
      <Mermaid theme="tokyo-night" :width="400" :height="260">
        {{ diagram }}
      </Mermaid>

      <!-- Or drive the palette directly -->
      <Mermaid
        transparent
        color="#e6e6e6"
        line="#7aa2f7"
        accent="#bb9af7"
        surface="#24283b"
        border="#414868"
        :width="400"
        :height="260"
      >
        {{ diagram }}
      </Mermaid>
    </Page>
  </Document>
</template>

Available themes:

tokyo-night, tokyo-night-storm, tokyo-night-light
catppuccin-mocha, catppuccin-latte
nord, nord-light
dracula
github-dark, github-light
solarized-dark, solarized-light
one-dark
zinc-dark, zinc-light

Both components accept their source through the default slot, so a definition held in a ref re-renders the document when it changes — handy in the Playground.