Build And Send Responsive Emails with vue-email

vue-email is a Vue component library designed to streamline building and sending HTML emails. It provides a collection of lightweight, tested components to create professional emails using Vue.

Components Included:

• HTML
• Head
• Button
• Column
• Row
• Container
• Font
• Heading
• Hr
• Image
• Link
• Markdown
• Preview
• Section
• Tailwind
• Text

Basic usage:

1. Create a new email template as follows:

<template>
  <e-html lang="en">
    <e-head />
    <e-preview preview="Welcome to vue-email" />
    <e-section :style="main">
      <e-container :style="container">
        <e-img
          src="https://avatars.githubusercontent.com/u/6128107?s=200&v=4"
          alt="Vue logo"
          :style="logo"
          width="200"
          height="50"
        />
        <e-text :style="paragraph">{{ name }}, welcome to vue-email</e-text>
        <e-text :style="paragraph">A Vue component library for building responsive emails</e-text>
        <e-section :style="btnContainer">
          <e-button :px="12" :py="12" :style="button" href="https://github.com/Dave136/vue-email">
            View on GitHub
          </e-button>
        </e-section>
        <e-text :style="paragraph">Happy coding!</e-text>
        <e-hr :style="hr" />
        <e-text :style="footer">David Arenas</e-text>
      </e-container>
    </e-section>
  </e-html>
</template>
<script lang="ts" setup>
import { EButton, EContainer, EHead, EHr, EHtml, EImg, EPreview, ESection, EText } from 'vue-email';
defineProps<{ name: string }>();
const fontFamily =
  '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
const main = {
  backgroundColor: '#ffffff',
};
const container = {
  margin: '0 auto',
  width: '100%',
  padding: '20px 0 48px',
};
const logo = {
  margin: '0 auto',
  height: '6em',
  width: '6em',
};
const paragraph = {
  fontFamily,
  fontSize: '16px',
  lineHeight: '26px',
};
const btnContainer = {
  textAlign: 'center' as const,
};
const button = {
  fontFamily,
  backgroundColor: '#41b883',
  borderRadius: '3px',
  color: '#fff',
  fontSize: '16px',
  textDecoration: 'none',
  textAlign: 'center' as const,
  display: 'block',
};
const hr = {
  borderColor: '#cccccc',
  margin: '20px 0',
};
const footer = {
  fontFamily,
  color: '#8898aa',
  fontSize: '12px',
};
</script>

2. Render the email template.

<template>
  <h2>Send email with nodemailer</h2>
  <input type="text" v-model="name" />
  <button @click="sendEmail">Send email</button>
</template>
<script lang="ts" setup>
import { useRender } from 'vue-email';
import WelcomeTemplate from '~/components/emails/welcome.vue';
const name = ref('Dave');
// send email function
const sendEmail = async () => {
  const template = await useRender(WelcomeTemplate, { name: name.value });
  // call your API endpoint to send the email
  const data = await $fetch('/api/email', {
    method: 'post',
    body: {
      template,
    },
  });
};
</script>

3. Integration with your preferred email service provider:

• Nodemailer
• Resend
• SendGrid
• Postmark
• AWS SES
• MailSend
• Plunk

Preview:

Changelog:

v0.7.0 (09/19/2023)

• Add i18n to app context
• Inject i18n on render composable
• Bugfix
• Update the config to be more presise

v0.6.8 (09/14/2023)

• client: reload template without refreshing page

v0.6.7 (09/03/2023)

• Replace VueEmailPLuginOptions by VueEmailPluginOptions
• Improving nuxt devtools UI/UX

v0.6.6 (08/16/2023)

• Update

v0.6.4/5 (08/15/2023)

• Fixed: Node-html-parser nuxt preview error

v0.6.3 (08/14/2023)

• Fixed: Node-html-parser nuxt preview error

v0.6.2 (08/14/2023)

• Refactors

v0.6.1 (08/13/2023)

• Fixed SSR: Tailwind compiled html showing nothing

v0.6.0 (08/12/2023)

• SSR Support

v0.5.16 (08/10/2023)

• Add icon to playground header
• Add folder structure to nuxt preview
• Bug Fixes

v0.5.15 (07/31/2023)

• Update

v0.5.13 (07/28/2023)

• Bugfix and Refactor

v0.5.12 (07/26/2023)

• Bugfixes

v0.5.11 (07/25/2023)

• Bugfixes

v0.5.10 (07/24/2023)

• Removed tw-to-css from external libs

v0.5.0 (07/20/2023)

• better package types and release process

Download Details:

Author: Dave136

Live Demo: https://vue-email-demo.vercel.app/

Download Link: https://github.com/Dave136/vue-email/archive/refs/heads/main.zip

Official Website: https://github.com/Dave136/vue-email

Install & Download:

# Yarn
$ yarn add vue-email

# NPM
$ npm i vue-email