Overview
The built-in E-prefixed components, optional ECodeBlock, and their shared safety rules.
Nuxt Email provides eighteen built-in E-prefixed components. They are auto-imported into email templates — you never import them. Configuring codeBlock adds ECodeBlock. All composition uses ordinary Vue slots, and all attributes use Vue and HTML names rather than React prop aliases.
The components
| Component | Reference |
|---|---|
EHtml, EHead, EBody, EPreview, EFont | Structure, EHead, EBody, EPreview, EFont |
EContainer, ESection, ERow, EColumn | EContainer, ESection, ERow, EColumn |
EText, EHeading, ELink, EImg, EHr, EButton | EText, EHeading, ELink, EImg, EHr, EButton |
ECodeInline, ECodeBlock | ECodeInline, ECodeBlock |
EMarkdown | EMarkdown |
ETailwind | ETailwind |
Rules every component shares
- Native attributes and
classare forwarded unless a component fixes an email-safety invariant (documented per component). styleaccepts the normal Vue object, string, or array forms. Object keys may be camelCase or kebab-case.- Vue interpolation and attribute serialization escape text by default.
- No raw HTML, no scripts. Every component rejects
innerHTML,textContent, and any attribute name beginning withon(case-insensitively). There is no raw-HTML primitive, and event handlers have no place in rendered email. - Required strings must be non-empty at runtime — for example
hrefandsrc. - No React shorthand props. React Email conveniences such as
mxare not supported; use ordinary CSS instyle.
A note on security
Nuxt Email renders trusted application templates. Supply untrusted values through normal escaped Vue bindings. It is not an HTML sanitizer.
General href and src values are escaped, but their URL schemes are not validated. Validate application-controlled URLs before rendering. EMarkdown is stricter: it rejects raw HTML and unsafe URL schemes. See the renderer's security boundary.