网站开发 · 2024年12月3日

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

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

收藏

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《在 Nuxt 中发送电子邮件 我如何在 SaaS 样板中处理电子邮件》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

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

  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 样板中处理电子邮件》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~米云公众号也会发布文章相关知识，快来关注吧！

版本声明 本文转载于：dev.to 如有侵犯，请联系删除

如何使用 Canvas 实现动态图像模糊效果？

您可能还喜欢...