Email & Notifications

Transactional emails, newsletters, and templates

Email & Notifications

Send beautiful transactional emails and manage newsletter subscriptions.

Email Providers

SaaS Pack supports multiple email providers:

  • Resend (recommended)
  • SendGrid
  • Mailgun
  • AWS SES
  • Postmark

Configuration

Environment Variables

# Resend
RESEND_API_KEY=re_xxx
EMAIL_FROM=[email protected]

# Or SendGrid
SENDGRID_API_KEY=SG.xxx

Sending Emails

Basic Email

await $fetch('/api/email/send', {
  method: 'POST',
  body: {
    to: '[email protected]',
    subject: 'Welcome to SaaS Pack',
    html: '<h1>Welcome!</h1><p>Thanks for signing up.</p>'
  }
})

Using Templates

// Send welcome email
await sendEmail('welcome', {
  to: user.email,
  data: {
    name: user.name,
    activationUrl: `${config.appUrl}/activate/${token}`
  }
})

Email Templates

Create email templates in server/templates/emails/:

<!-- server/templates/emails/welcome.vue -->
<template>
  <div>
    <h1>Welcome {{ name }}!</h1>
    <p>Click below to activate your account:</p>
    <a :href="activationUrl">Activate Account</a>
  </div>
</template>

Common Email Types

Welcome Email

export async function sendWelcomeEmail(user: User) {
  await sendEmail('welcome', {
    to: user.email,
    data: {
      name: user.name
    }
  })
}

Password Reset

export async function sendPasswordReset(email: string, token: string) {
  await sendEmail('password-reset', {
    to: email,
    data: {
      resetUrl: `${config.appUrl}/reset-password/${token}`
    }
  })
}

Subscription Confirmation

export async function sendSubscriptionConfirmation(user: User, plan: string) {
  await sendEmail('subscription-confirmed', {
    to: user.email,
    data: {
      name: user.name,
      plan: plan,
      dashboardUrl: `${config.appUrl}/dashboard`
    }
  })
}

Newsletter Management

// Subscribe to newsletter
await $fetch('/api/newsletter/subscribe', {
  method: 'POST',
  body: {
    email: '[email protected]'
  }
})

// Unsubscribe
await $fetch('/api/newsletter/unsubscribe', {
  method: 'POST',
  body: {
    email: '[email protected]'
  }
})

Best Practices

  1. Always include an unsubscribe link
  2. Use plain text alternatives
  3. Test emails before sending to all users
  4. Monitor bounce and complaint rates
  5. Comply with email regulations (GDPR, CAN-SPAM)

Next Steps