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
EHtml renders the required document root.
| Prop | Type | Default | Required |
|---|---|---|---|
lang | string | — | Yes |
dir | Safe native dir value | ltr | No |
lang must be a non-empty string. EHtml also accepts the shared safe native attributes.
<EHtml lang="en"><EBody>Content</EBody></EHtml>EHead
EHead renders <head>. It inserts the UTF-8 content-type and Apple message-reformatting meta tags before its default slot. Put <title>, EFont, and other email head content in that slot.
| Prop | Type | Default | Required |
|---|---|---|---|
| — | No component-specific props; accepts shared safe native attributes. | — | — |
<EHead><title>Order confirmed</title></EHead>EBody
EBody renders <body> and a full-width presentation table. Author styles apply to the inner cell. Background values mirror to <body>, where supplied margin and padding reset properties become zero.
| Prop | Type | Default | Required |
|---|---|---|---|
lang | Safe native lang value | en | No |
dir | Safe native dir value | ltr | No |
EBody accepts shared safe native attributes. Its language and direction do not inherit from EHtml; set both wrappers when the email uses another language or right-to-left text.
<EBody :style="{ backgroundColor: '#f5f5f5' }">Content</EBody><EHtml lang="ar" dir="rtl">
<EHead>
<title>تم تأكيد الطلب</title>
</EHead>
<EBody lang="ar" dir="rtl">
<EText>تم تأكيد طلبك.</EText>
</EBody>
</EHtml>Localization and right-to-left text
Keep localization in application code. Either create one literal template per locale, such as welcome/en and welcome/ar, or pass already-resolved strings through typed props. Do not call application-context internationalization composables inside an email template. Email templates render in an isolated server application.
Set matching lang and dir values on both EHtml and EBody, as shown above. The wrappers do not inherit these values from one another.
EPreview
EPreview renders hidden inbox-preview text from a text-only default slot.
| Prop | Type | Default | Required |
|---|---|---|---|
| — | No component-specific props; accepts shared safe native attributes. | — | — |
Preview text is safely truncated at 200 UTF-16 code units. Compatibility filler is added when the text is shorter. Author styles cannot make the preview visible, and the preview is excluded from derived plain text.
<EPreview>Your order is confirmed.</EPreview>Use an explicit <title> inside EHead. EPreview does not generate or move a title into the head. This is an intentional divergence.
EFont
EFont declares an @font-face and a document-wide default font. Place it inside EHead.
| Prop | Type | Default | Required |
|---|---|---|---|
fontFamily | string | — | Yes |
fallbackFontFamily | FontFallback | readonly [FontFallback, ...FontFallback[]] | — | Yes |
webFont | { url: string, format: FontFormat } | — | No |
fontStyle | 'normal' | 'italic' | 'oblique' | normal | No |
fontWeight | number | 'normal' | 'bold' | 'bolder' | 'lighter' | 400 | No |
Supported fallbacks are Arial, Helvetica, Verdana, Georgia, Times New Roman, serif, sans-serif, monospace, cursive, and fantasy. Numeric weights must be from 1 through 1000. Web-font formats are woff, woff2, truetype, opentype, embedded-opentype, and svg.
EFont emits one <style> with the font-face rule and a global font stack. Outlook uses the first fallback through its specific mso-font-alt property. Invalid or empty values fail during rendering.
<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>