Nuxt Email Renderer
Components

Column

Create columns within rows for multi-column email layouts.

Create columns within rows for multi-column email layouts. Columns render as table cells optimized for email client compatibility.

Installation

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

Getting Started

Use columns inside rows to create horizontal layouts:

emails/WelcomeEmail.vue
<template>
  <EHtml>
    <EBody>
      <EContainer>
        <ERow>
          <EColumn style="width: 50%;">
            <EText>First column content</EText>
          </EColumn>
          <EColumn style="width: 50%;">
            <EText>Second column content</EText>
          </EColumn>
        </ERow>
      </EContainer>
    </EBody>
  </EHtml>
</template>

Technical Details

The column component renders as a table cell (<td>) for maximum email client compatibility:

<td role="presentation">
  <!-- Your content here -->
</td>

Best Practices

Width specification: Always specify column widths as percentages for consistent layout.
Total width: Ensure column widths add up to 100% within a row.
Mobile consideration: Plan how columns will stack on mobile devices.

Column Width Guidelines

<template>
  <!-- Good: Widths add up to 100% -->
  <ERow>
    <EColumn style="width: 30%;">30%</EColumn>
    <EColumn style="width: 70%;">70%</EColumn>
  </ERow>

  <!-- Good: Equal distribution -->
  <ERow>
    <EColumn style="width: 25%;">25%</EColumn>
    <EColumn style="width: 25%;">25%</EColumn>
    <EColumn style="width: 25%;">25%</EColumn>
    <EColumn style="width: 25%;">25%</EColumn>
  </ERow>

  <!-- Avoid: Widths over 100% -->
  <ERow>
    <EColumn style="width: 60%;">60%</EColumn>
    <EColumn style="width: 60%;">60% - This will cause issues</EColumn>
  </ERow>
</template>

Email Client Support

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

Mobile Behavior

On mobile devices, most email clients will automatically stack columns vertically. You can control this with CSS:

<template>
  <EHtml>
    <EHead>
      <EStyle>
        @media screen and (max-width: 600px) { .stack-column { display: block
        !important; width: 100% !important; } }
      </EStyle>
    </EHead>
    <EBody>
      <ERow>
        <EColumn class="stack-column" style="width: 50%;">
          Stacks first on mobile
        </EColumn>
        <EColumn class="stack-column" style="width: 50%;">
          Stacks second on mobile
        </EColumn>
      </ERow>
    </EBody>
  </EHtml>
</template>

Related Components

CodeInline

An inline code component optimized for email client compatibility.

Container

A centered container element to wrap email content.