Section

Install

Install component from your command line.

npm install @vuemaildev/vuemail -E

yarn add @vuemaildev/vuemail -E

pnpm add @vuemaildev/vuemail -E

Getting started

Add the component to your email template. Include styles where needed.

<script setup lang="ts">
import { Column, Row, Section, Text } from '@vuemaildev/vuemail';
</script>

<template>
  <!-- A simple `section` -->
  <Section>
    <Text>Hello World</Text>
  </Section>

  <!-- Formatted with `rows` and `columns` -->
  <Section>
    <Row>
      <Column>Column 1, Row 1</Column>
      <Column>Column 2, Row 1</Column>
    </Row>
    <Row>
      <Column>Column 1, Row 2</Column>
      <Column>Column 2, Row 2</Column>
    </Row>
  </Section>
</template>

Props

string

Classes for the inner cell of the section. Padding, from style or from Tailwind classes, is applied to that cell instead of the table, for better compatibility with Outlook.