Nuxt Email Renderer

Components

Head

The head element containing meta information for your email.

The head element that contains meta information, styles, and other non-visible content for your email. Essential for proper email rendering across different clients.

Installation

The EHead component is automatically available when you install nuxt-email-renderer. No additional imports needed.

Getting Started

Add the component inside EHtml before EBody:

emails/WelcomeEmail.vue

<template>
  <EHtml>
    <EHead>
      <title>Welcome Email</title>
    </EHead>
    <EBody>
      <!-- Your email content -->
    </EBody>
  </EHtml>
</template>

Default Meta Tags

The EHead component automatically includes essential meta tags:

Content-Type: text/html; charset=UTF-8
x-apple-disable-message-reformatting for Apple Mail

Best Practices

Always include: The EHead component should always be included in your email templates for proper rendering.

Keep it simple: Avoid complex meta tags that might not be supported by email clients.

Email Client Support

✅ Gmail (Desktop & Mobile)
✅ Apple Mail
✅ Outlook 2016+
✅ Yahoo Mail
✅ Thunderbird
✅ Samsung Email
✅ HEY

EHtml - The root HTML element
EStyle - Add CSS styles
EFont - Load web fonts
EPreview - Email preview text

Edit this pageorReport an issue

Font

A component for defining and loading custom fonts in email templates.

Heading

Create semantic headings with customizable margins and styling.