Postmark - Vue Email

1. Install dependencies

pnpm

pnpm add postmark

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 postmark from 'postmark';

const client = new postmark.ServerClient(process.env.POSTMARK_API_KEY);

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

  const options = {
    From: 'you@example.com',
    To: 'user@gmail.com',
    Subject: 'hello world',
    HtmlBody: template,
  };

  await client.sendEmail(options);
  return { message: 'Email sent' };
});

Plunk

Learn how to send an email using Vue Email and Plunk Node.js SDK.

Resend

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