Structure

EHtml, EHead, EBody, EPreview, and EFont — the document shell, head, body, inbox preview text, and font declarations.

These components form the email document shell. Every render must contain exactly one <html> root and one <body>; EHtml and EBody are the supported wrappers.

Document components

Component	Output and important props	Defaults and fixed behavior
`EHtml`	Complete `<html>` root; accepts safe HTML attributes.	`lang="en"`, `dir="ltr"`. Exactly one `<html>` root and one `<body>` per render.
`EHead`	`<head>` with an optional default slot for `<title>`, `<meta>`, and email head content.	Always inserts UTF-8 content-type and Apple message-reformatting meta tags before slot content.
`EBody`	`<body>` containing the full-width presentation table used for reliable email layout.	`lang="en"`, `dir="ltr"`. User style applies to the inner cell; background values mirror to `<body>`, and specified body margin/padding reset properties are zeroed there.
`EPreview`	Hidden inbox-preview text from a text-only default slot.	Truncates safely at 200 UTF-16 code units, adds compatibility filler when shorter, cannot be made visible via style override, and is excluded from plain text.

Use an explicit <title> inside EHead. EPreview does not generate or hoist a title — unlike React 19, Vue SSR cannot safely hoist preview title into the head (an intentional divergence).

vue

<EHtml lang="en" dir="ltr">
  <EHead>
    <title>Order confirmed</title>
  </EHead>
  <EBody :style="{ backgroundColor: '#f5f5f5', margin: 0 }">
    <EPreview>Your order is confirmed.</EPreview>
    <EText>Visible content</EText>
  </EBody>
</EHtml>

EFont

EFont declares an @font-face and a document-wide default font. It must be placed inside EHead.

Prop	Contract
`fontFamily`	Required string. The primary font; use `fallbackFontFamily` for alternatives rather than a comma list.
`fallbackFontFamily`	Required. One `FontFallback` or a non-empty ordered array (`Arial`, `Helvetica`, `Verdana`, `Georgia`, `Times New Roman`, `serif`, `sans-serif`, `monospace`, `cursive`, `fantasy`).
`webFont`	Optional `{ url, format }`, where `format` is `woff`, `woff2`, `truetype`, `opentype`, `embedded-opentype`, or `svg`. Emits the `src` descriptor; not every client honors web fonts.
`fontStyle`	`normal`, `italic`, or `oblique`; defaults to `normal`.
`fontWeight`	A number from 1 through 1000, or `normal`, `bold`, `bolder`, or `lighter`; defaults to `400`.

EFont emits one <style> containing the @font-face rule and a global * { font-family } rule listing the primary font followed by every fallback. The Outlook mso-font-alt descriptor uses the first fallback.

Font names and web-font URLs are serialized for their CSS context before the trusted stylesheet is emitted. Empty names, empty fallback arrays, invalid formats, and unsupported style or weight values fail during rendering instead of producing invalid email CSS.

vue

<EHead>
  <EFont
    font-family="Roboto"
    :fallback-font-family="['Verdana', 'sans-serif']"
    :web-font="{ url: 'https://fonts.example.com/roboto.woff2', format: 'woff2' }"
    :font-weight="700"
  />
</EHead>

Client note

Web fonts are honored by only some clients (notably Apple Mail). The fallback stack is what most recipients see, so choose fallbacks that resemble the primary font. Outlook for Windows uses the mso-font-alt fallback.