vue-email

Simple way to build email templates in vue

Documentation | GitHub

What is Vue email?

After see react-email and svelte-email, i took the decision to build the same idea but for vue 😀, there you can design email templates using vue3 and render them to HTML or simple text.

Now TailwindCSS its supported! You can see here

Installation :sunglasses:

It's so simple as install the package in your project:

npm install vue-email

yarn add vue-email

pnpm install vue-email

Getting started 💪

Vue Email provides you a series of components to build a email template

1. Creating a template

This example is based on Nuxt 3 app

components/template-email.vue

<template>
   <e-html lang="en">
      <e-text>Hello, {{ user }}!</e-text>
      <e-hr />
      <e-button href="vuejs.org">Visit vue</e-button>
   </e-html>
</template>

<script setup>
import { EButton, EHr, EHtml, EText } from 'vue-email';
import { ref } from 'vue';
   
const user = ref('Dave');
</script>

2. Send email

This basic example uses Nodemailer and Nuxt 3 to send email. You easily can use other email service provider.

In this example i pass the template by params in a request.

server/api/email.post.ts

import nodemailer from 'nodemailer';

export default defineEventHandler(async (event) => {
  const body = await readBody(event);

  const testAccount = await nodemailer.createTestAccount();

  const transporter = nodemailer.createTransport({
    host: process.env.HOST || 'smtp.ethereal.email',
    port: 587,
    secure: false,
    auth: {
      user: testAccount.user,
      pass: testAccount.pass,
    },
  });

  const options = {
    from: '[e-mail]',
    to: '[e-mail]',
    subject: 'hello world',
    html: body.template,
  };

  const info = await transporter.sendMail(options);

  return { messageId: info.messageId, previewUrl: nodemailer.getTestMessageUrl(info) as string };
});

You can see the full example here

Documentation

You can see the documentation here

Components

You can see the components, listed below:

• Html
• Head
• Body
• Button
• Container
• Font
• Column
• Section
• Heading
• Hr
• Image
• Link
• Preview
• Row
• Tailwind
• Text

Integrations

Emails built with vue-email can be converted into HTML or plain text, and sent using any email service provider. You can see examples here:

• Nodemailer
• Nuxt

Roadmap

This a list of features to add in the future:

• TailwindCSS support
• Plugin for Nuxt 3
• i18n support

Author

• David Arenas @dave136

Annotations 📝

This project is originally written in react (react-email) by:

• Bu Kinoshita (@bukinoshita)
• Zeno Rocha (@zenorocha)

License

This project is licensed under MIT