Sending Emails in Nuxt How I Handle Emails in My SaaS Boilerplate-JS Tutorial-php.cn

Sending Emails in Nuxt How I Handle Emails in My SaaS Boilerplate

Linda Hamilton

Release： 2024-12-01 11:45:10

Original

444 people have browsed it

Sending Emails in Nuxt How I Handle Emails in My SaaS Boilerplate

If you're building anything serious in Nuxt 3, you'll need to send emails.
Here's my setup that lets you switch between Resend, SendGrid, or any other provider without rewriting code.

The Setup

AdonisJS Mail (I made it work outside AdonisJS so it works with any JS backend)
Vue Email for templates
Works with any email provider (Resend, AWS SES, Mailgun, Sparkpost, Brevo, Custom SMTP)

Basic Configuration

const generateMailer = async () => {
  const mailer = await generateMailer({
    default: "resend",
    from: {
      address: "hi@saas-boilerplate.dev",
      name: "SaaS Boilerplate",
    },
    mailers: {
      resend: transports.resend({
        key: process.env.RESEND_API_KEY || "",
        baseUrl: "https://api.resend.com",
      }),
      // Easy to add more providers!
      sendgrid: transports.sendgrid({
        key: process.env.SENDGRID_API_KEY || "",
      })
    },
  });

  return mailer;
};

Copy after login

Email Templates with Vue Email

Here's a simple magic link email template:

<template>
  <Html>
    <Body>
      <Container>
        <Heading>Sign In to Your Account</Heading>
        <Text>Hi {{ username }},</Text>
        <Text>Click the button below to sign in:</Text>
        <Section>
          <Button :href="signInLink">Sign In</Button>
        </Section>
        <Text>
          Or copy this link: 
          <Link :href="signInLink">{{ signInLink }}</Link>
        </Text>
        <Hr />
        <Text>This link expires in 1 hour.</Text>
      </Container>
    </Body>
  </Html>
</template>
<script setup lang="ts">
import {
  Body, Button, Container, Heading,
  Html, Link, Section, Text, Hr
} from "@vue-email/components";

interface Props {
  username?: string;
  signInLink?: string;
}

withDefaults(defineProps<Props>(), {
  username: "User",
  signInLink: "https://app.example.com/sign-in",
});
</script>

Copy after login

Sending Emails

import MagicLinkSignIn from "~/emails/MagicLinkSignIn.vue";
const mailer = await getMailer();
await mailer.send(async (message) => {
  message
    .to(email)
    .subject("Magic Link Sign In")
    .html(
      await render(MagicLinkSignIn, {
        username: user?.name,
        signInLink: url,
      })
    );
});

Copy after login

Cool Features from AdonisJS Mail

AdonisJS Mail comes with tons of powerful features that we can use:

Multiple Transport Support: Switch between email providers with one line of code
Calendar Events: Attach calendar invites to your emails
File Attachments: Easily attach files, streams, or buffers
HTML/Text Templates: Support for both HTML and plain text emails

For example, attaching a calendar invite is as simple as:

message.icalEvent((calendar) => {
  calendar.createEvent({
    summary: 'Team Meeting',
    start: DateTime.local().plus({ minutes: 30 }),
    end: DateTime.local().plus({ minutes: 60 }),
  })
});

Copy after login

Why this works well

Switch providers anytime
Write templates in Vue
Easy to test
All the power of AdonisJS Mail in any JS backend

Try it yourself

Want to learn more about what AdonisJS Mail can do? Check out their detailed documentation.

This email setup is part of my Nuxt SaaS boilerplate.

If you're building a SaaS, check it out—it comes with type-safe APIs using tRPC, enterprise-grade RBAC (role-based access control), and production-ready features like auth, team management, and billing.

Every feature is built with the same attention to developer experience as this email system.

The above is the detailed content of Sending Emails in Nuxt How I Handle Emails in My SaaS Boilerplate. For more information, please follow other related articles on the PHP Chinese website!