在 Nuxt 中发送电子邮件 我如何在 SaaS 样板中处理电子邮件

如果您正在 Nuxt 3 中构建任何严肃的东西，您将需要发送电子邮件。
这是我的设置，可让您在 Resend、SendGrid 或任何其他提供程序之间切换，而无需重写代码。

设置

• AdonisJS Mail（我让它在 AdonisJS 之外工作，因此它可以与任何 JS 后端一起工作）
• 用于模板的 Vue 电子邮件
• 可与任何电子邮件提供商合作（Resend、AWS SES、Mailgun、Sparkpost、Brevo、自定义 SMTP）

基本配置

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;
};

使用 Vue Email 的电子邮件模板

这是一个简单的魔术链接电子邮件模板：

<template>
  
    
      <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 }}
        </text>
        <hr>
        <text>This link expires in 1 hour.</text>
      </container>
    
  
</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>

发送电子邮件

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,
      })
    );
});

AdonisJS Mail 的炫酷功能

AdonisJS Mail 附带了大量我们可以使用的强大功能：

1. 多种传输支持：只需一行代码即可在电子邮件提供商之间切换
2. 日历活动：将日历邀请附加到您的电子邮件
3. 文件附件：轻松附加文件、流或缓冲区
4. HTML/文本模板：支持 HTML 和纯文本电子邮件

例如，附加日历邀请非常简单：

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

为什么这个效果很好

• 随时切换提供商
• 在 Vue 中编写模板
• 易于测试
• 任何 JS 后端中 AdonisJS Mail 的所有功能

自己尝试一下

想了解更多有关 AdonisJS Mail 的功能吗？查看他们的详细文档。

此电子邮件设置是我的 Nuxt SaaS 样板的一部分。

如果您正在构建 SaaS，请检查一下 - 它配备了使用 tRPC 的类型安全 API、企业级 RBAC（基于角色的访问控制）以及身份验证、团队管理和计费等生产就绪功能.

每个功能的构建都与此电子邮件系统一样注重开发人员体验。

以上是在 Nuxt 中发送电子邮件 我如何在 SaaS 样板中处理电子邮件的详细内容。更多信息请关注PHP中文网其他相关文章！