Hello! 欢迎来到小浪资源网!



在 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(基于角色的访问控制)以及身份验证、团队管理和计费等生产就绪功能.

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

相关阅读