integrations
SendGrid
Learn how to send an email using Vue Email and the SendGrid Node.js SDK.
1. Install dependencies
Get the SendGrid Node.js SDK.
pnpm
pnpm add @sendgrid/mail
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 sendgrid from '@sendgrid/mail';
sendgrid.setApiKey(process.env.SENDGRID_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',
html: template,
};
await sendgrid.send(options);
return { message: 'Email sent' };
});