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

首页

web前端

js教程

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

Dec 01, 2024 am 11:45 AM

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 () =&gt; {
  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 的电子邮件模板

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

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

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

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

登录后复制

发送电子邮件

import MagicLinkSignIn from "~/emails/MagicLinkSignIn.vue";
const mailer = await getMailer();
await mailer.send(async (message) =&gt; {
  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) =&gt; {
  calendar.createEvent({
    summary: 'Team Meeting',
    start: DateTime.local().plus({ minutes: 30 }),
    end: DateTime.local().plus({ minutes: 60 }),
  })
});

登录后复制