在 Nuxt 中发送电子邮件我如何在 SaaS 样板中处理电子邮件-js教程-PHP中文网

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

Linda Hamilton

发布： 2024-12-01 11:45:10

原创

444 人浏览过

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

如果您正在 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>
  <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>

登录后复制

发送电子邮件

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 附带了大量我们可以使用的强大功能：

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

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

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

登录后复制