Build And Send Responsive Emails with vue-email

Install & Download:

# Yarn
$ yarn add vue-email
# NPM
$ npm i vue-email

Description:

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.8.11 (04/03/2024)

• Add components use

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