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

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 with untrusted values supplied through normal escaped Vue bindings. It is not an HTML sanitizer. General href and src component props are escaped but their URL schemes are not validated, so validate application-controlled URLs before rendering. EMarkdown is deliberately stricter: it rejects raw HTML and unsafe URL schemes. See the security boundary in the renderer reference.