integrations
NodeMailer
Learn how to send an email using Vue Email and Nodemailer.
1. Install dependencies
Get the nodemailer package.
pnpm
pnpm add nodemailer
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 nodemailer from 'nodemailer';
export default defineEventHandler(async (event) => {
const template = await useCompiler('welcome.vue', {
props: {
url: 'https://vuemail.net/',
}
})
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: 'you@example.com',
to: 'user@gmail.com',
subject: 'hello world',
html: template,
};
await transporter.sendMail(options);
return { message: 'Email sent' };
});