Skip to main content

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

ComponentReference
EHtml, EHead, EBody, EPreview, EFontStructure, EHead, EBody, EPreview, EFont
EContainer, ESection, ERow, EColumnEContainer, ESection, ERow, EColumn
EText, EHeading, ELink, EImg, EHr, EButtonEText, EHeading, ELink, EImg, EHr, EButton
ECodeInline, ECodeBlockECodeInline, ECodeBlock
EMarkdownEMarkdown
ETailwindETailwind

Rules every component shares

  • Native attributes and class are forwarded unless a component fixes an email-safety invariant (documented per component).
  • style accepts 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 with on (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 href and src.
  • No React shorthand props. React Email conveniences such as mx are not supported; use ordinary CSS in style.

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.