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:

Build And Send Responsive Emails with vue-email

Changelog:

v0.8.10 (02/27/2024)

  • Updated font component

v0.8.9 (02/18/2024)

  • Update

v0.8.8 (02/05/2024)

  • ECodeBlock add option to show line numbers
  • ECodeBlock line highlighting
  • Enable access to vue email config inside code $vueEmail
  • Load tailwind from config
  • Nuxt devtools props editor Beta

v0.8.7 (02/01/2024)

  • Bugfixes

v0.8.6 (01/30/2024)

  • ECodeBlock rendering issues with ETailwind

v0.8.6 (01/21/2024)

  • Added Code block
  • Added Code Inline

v0.8.5 (12/23/2024)

  • Redoing tailwind component
  • Tailwind improvements
  • Add Style component

v0.8.2 (12/17/2023)

  • useRender composable will return html and text in one object
  • same effect on nuxt/compiler

v0.8.0 (12/14/2023)

  • Moving to organization and spliting packages
  • You no longer need to have vue-i18n installed for the i18n feature to work
  • Bug Fixes

v0.7.2 (09/28/2023)

  • Bugfixes

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: vue-email

Live Demo: https://vuemail.net/playground

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

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

Install & Download:

# Yarn
$ yarn add vue-email

# NPM
$ npm i vue-email
Tags:

Add Comment