Components
Container
A centered container element to wrap email content.
A responsive container component that centers your email content and provides optimal width constraints for different email clients.
Installation
The EContainer component is automatically available when you install nuxt-email-renderer. No additional imports needed.
Getting Started
Add the component to wrap your email content:
emails/WelcomeEmail.vue
<template>
<EHtml>
<EBody>
<EContainer>
<EText>Your email content goes here</EText>
</EContainer>
</EBody>
</EHtml>
</template>
Props
The EContainer component accepts all standard HTML table attributes and can be styled with CSS properties.
Default Styles
The container comes with email-optimized defaults:
- Max width:
37.5em(600px) - Alignment: Centered
- Width: 100% (up to max-width)
- Role:
presentationfor accessibility
Technical Details
The container component renders as a table-based layout for maximum email client compatibility:
<table
align="center"
width="100%"
role="presentation"
cellspacing="0"
cellpadding="0"
border="0"
style="max-width: 37.5em;"
>
<tbody>
<tr style="width: 100%">
<td>
<!-- Your content here -->
</td>
</tr>
</tbody>
</table>
This structure ensures proper rendering across all email clients, including:
- Outlook (all versions)
- Gmail (desktop and mobile)
- Apple Mail
- Yahoo Mail
- Thunderbird
Best Practices
Consistent widths: Use consistent max-width values across containers for visual harmony.
Avoid overflow: Don't set widths larger than 600px to prevent horizontal scrolling on mobile devices.
Mobile-first: Always test your containers on mobile devices and use media queries for responsive behavior.
Email Client Support
The container component is supported across all major email clients:
- ✅ Gmail (Desktop & Mobile)
- ✅ Apple Mail
- ✅ Outlook 2016+
- ✅ Outlook Web App
- ✅ Yahoo Mail
- ✅ Thunderbird
- ✅ Samsung Email
- ✅ HEY