MailerSend - Vue Email

1. Install dependencies

pnpm

pnpm add mailersend

2. Create an email using Vue

Start by building your email template in a .vue file.

emails/welcome.vue

<script lang="ts" setup>
defineProps<{ url: string }>();
</script>

<template>
  <e-html lang="en">
    <e-button :href="url">
      View on GitHub
    </e-button>
  </e-html>
</template>

Step 3: Convert to HTML and send email

Import the email template you just built, convert into a HTML string, and use the Nodemailer SDK to send it.

Nuxt 3

// server/api/send-email.post.ts
import { useCompiler } from '#vue-email'
import { MailerSend, EmailParams, Sender, Recipient } from "mailersend";

const mailerSend = new MailerSend({
  apiKey: process.env.MAILERSEND_API_KEY || '',
});

const sentFrom = new Sender("you@yourdomain.com", "Your name");
const recipients = [
  new Recipient("your@client.com", "Your Client")
];


export default defineEventHandler(async (event) => {
  const template = await useCompiler('welcome.vue', {
    props: {
      url: 'https://vuemail.net/',
    }
  })

  const options = new EmailParams()
    .setFrom(sentFrom)
    .setTo(recipients)
    .setSubject("This is a Subject")
    .setHtml(template)


  await mailerSend.email.send(options);
  return { message: 'Email sent' };
});

AWS SES

Learn how to send an email using Vue Email and the AWS SES Node.js SDK.

NodeMailer

Learn how to send an email using Vue Email and Nodemailer.