Plunk - Vue Email

1. Install dependencies

pnpm

pnpm add @plunk/node

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 Plunk from '@plunk/node';

const plunk = new Plunk(process.env.PLUNK_API_KEY);

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

  await plunk.emails.send({
    to: "hello@useplunk.com",
    subject: "Hello world",
    body: template,
  });

  return { message: 'Email sent' };
});

NodeMailer

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

Postmark

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