在 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 的电子邮件模板

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

                    sign in to your account        hi {{ username }},        click the button below to sign in:        
or copy this link: {{ signinlink }}
this link expires in 1 hour. import { body, button, container, heading, html, link, section, text, hr} from "@vue-email/components";interface props { username?: string; signinlink?: string;}withdefaults(defineprops(), { username: "user", signinlink: "https://app.example.com/sign-in",});

发送电子邮件

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

为什么这个效果很好

随时切换提供商在 vue 中编写模板易于测试任何 js 后端中 adonisjs mail 的所有功能

自己尝试一下

想了解更多有关 adonisjs mail 的功能吗?查看他们的详细文档。

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

如果您正在构建 saas,请检查一下 – 它附带使用 trpc 的类型安全 api、企业级 rbac(基于角色的访问控制)以及身份验证、团队管理和计费等生产就绪功能.

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

以上就是在 Nuxt 中发送电子邮件 我如何在 SaaS 样板中处理电子邮件的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1499089.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 21:00:05
下一篇 2025年12月19日 21:00:12

相关推荐

发表回复

登录后才能评论
关注微信