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 add @sendgrid/mail

2. Create an email using Vue

Start by building your email template in a .vue file.

<script lang="ts" setup>
defineProps<{ url: string }>()

  <e-html lang="en">
    <e-button :href="url">
      View on GitHub

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/
import sendgrid from '@sendgrid/mail'
import { useCompiler } from '#vue-email'


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

  const options = {
    from: '',
    to: '',
    subject: 'hello world',
    html: template.html,

  await sendgrid.send(options)
  return { message: 'Email sent' }