邮件(Resend)

Nuxt 模板中基于 Resend 的事务性邮件。

事务邮件通过一个轻量提供商抽象完整接入。验证邮件、密码重置与联系消息均 遵循同一路径:sendEmailResendProvider → 本地化 Vue Email 模板。

已提供的能力

  • MailProvider 接口,支持模板邮件与原始邮件。
  • websiteConfig.mail.provider 延迟初始化提供商。
  • 使用 NUXT_RESEND_API_KEY 的 Resend 投递。
  • 通过中英文语言包渲染 Vue Email。
  • 已接通 Better Auth 验证/重置与联系表单。
  • 附带 newsletter 模板资源,但没有订阅业务流程。

重要文件

文件作用
server/email/types.ts模板名、提供商接口与发送结果类型
server/email/index.ts提供商生命周期、sendEmail、模板/语言映射与 getTemplate
server/email/provider/resend.tsResend 实现与默认发件人
server/email/templates/*.vueVue Email 事务模板
app/components/email/*共用邮件布局与按钮
server/utils/auth.tsBetter Auth 验证与重置调用
server/api/contact.post.ts校验后的联系消息投递
app/config/website-config.ts提供商、发件人与支持邮箱

配置

配置 Resend

创建 Resend API key,并仅在服务端设置:

NUXT_RESEND_API_KEY=re_your_key

不要使用 NUXT_PUBLIC_ 前缀暴露它。

设置邮件身份

websiteConfig.mail.fromEmail 改为已验证域名的发件地址,把 supportEmail 改为接收联系表单的邮箱。除非实现了另一个 MailProvider, 否则保持 provider: "resend"

验证域名

按 Resend 要求添加 DNS 记录并等待验证。生产邮件必须使用允许的 From 地址; 仅有 API key 并不足够。

模板与上下文

getTemplate() 会选择 Vue 组件,注入 locale 与对应的 en-us.json/zh-cn.json,通过 @vue-email/render 生成 HTML,并派生纯文本 备用内容。主题来自语言包中的 mail 文案。

模板键组件已接通流程传入的上下文
verifyEmailverify-email.vueurlname
forgotPasswordforgot-password.vueurlname
contactMessagecontact-message.vuenameemailsubjectmessage
subscribeNewslettersubscribe-newsletter.vuename

Better Auth 在 server/utils/auth.ts 调用前两个模板,但目前没有传可选的 locale,所以验证与重置邮件会回退为英文。如需双语认证邮件,应显式传入用户 语言。联系接口用 Zod 校验请求,将 contactMessage 发到 supportEmail,并在 表单传入语言时按该语言渲染。

subscribe-newsletter.vue 只是可复用模板资源。starter 不包含订阅接口、订阅者 持久化、确认流程或退订处理。

自定义或新增提供商

修改 Vue 模板时,同时更新两个语言 JSON 中的 mail.* 键。新增语言还需扩展 server/email/index.tsmessagesMap

若要替换 Resend,实现 MailProvider,在 initializeMailProvider() 中初始化, 并保留现有 sendEmail() 调用点。新实现应返回结构化错误,同时支持 HTML 与 纯文本。

验证

  • 注册用户并收到验证邮件(目前默认英文)。
  • 请求重置密码,链接能到达重置页。
  • 提交 /contact,配置的支持邮箱收到消息。
  • 显式以 en/zh 渲染模板;接通认证语言后,再检查两种语言的主题、正文、 链接与响应式布局。
  • 发送失败可在应用日志和 Resend 控制台中追踪。

生产注意事项

监控投递、退信与投诉;若邮件属于关键业务,增加队列或重试。不要记录正文或 收件人等敏感信息。配置 SPF/DKIM/DMARC,确保验证链接使用生产域名,并在启用 强制邮箱验证前测试发件限制。

相关页面

On this page