Integrations
Plunk
Learn how to send an email using Vue Email and Plunk Node.js SDK.
1. Install dependencies
Get the Plunk Node.js SDK.
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.
// server/api/send-email.post.ts
import Plunk from '@plunk/node'
import { useCompiler } from '#vue-email'
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.html,
})
return { message: 'Email sent' }
})