Usage & Setup

Sending transactional emails in Supersaas

Supersaas uses useEmail to send emails, it allows you to use multiple email providers using a unified API and we use vuemail for making the templates.

Set the credentials for your preferred provider in the .env file, read how here

Email Service

A small handy service to send emails, you can use it anywhere in your application.

server/services/email.ts

import { useEmail } from 'use-email';
import { env } from '@@/env';

const EMAIL_PROVIDER = env.EMAIL_PROVIDER;
const emailService = useEmail(EMAIL_PROVIDER);

export interface BaseEmailPayload {
  to: string | string[];
  subject: string;
}

export interface TextEmailPayload extends BaseEmailPayload {
  text: string;
  html?: string;
}

export interface HtmlEmailPayload extends BaseEmailPayload {
  text?: string;
  html: string;
}

export type EmailPayload = TextEmailPayload | HtmlEmailPayload;

export async function sendEmail({ to, subject, text, html }: EmailPayload) {
  try {
    await emailService.send({
      from: env.FROM_EMAIL,
      to,
      subject,
      text,
      html,
    });
  } catch (error) {
    throw createError({
      statusCode: 500,
      statusMessage: `Failed to send email: ${(error as Error).message}`,
    });
  }
}

Example Usage

/api/send-email

import { sendEmail } from '@@/server/services/email';

export default defineEventHandler(async (event) => {
  await sendEmail({
    to: 'fayaz@supersaas.dev',
    subject: 'Login from a new location',
    html: `<p>Hello World</p>`,
    text: 'Hello World',
  });
});

Email Templates

Supersaas uses vuemail for making the templates, you can read more about it here

There are 4 templates available in the emails folder, you can add more if you want.

emails/magic-link.vue
emails/member-invite.vue
emails/email-verification.vue
emails/login-notification.vue

Migrations

Create manage and push database migrations

Overview

Learn how authentication works in Supersaas