Nuxt でのメールの送信 SaaS ボイラープレートでのメールの処理方法

Nuxt 3 で本格的なものを構築している場合は、電子メールを送信する必要があります。
コードを書き換えることなく、Resend、SendGrid、またはその他のプロバイダーを切り替えることができる私の設定は次のとおりです。

セットアップ

• AdonisJS Mail (AdonisJS の外部で動作するようにしたので、どの JS バックエンドでも動作します)
• テンプレート用の Vue メール
• あらゆるメールプロバイダー (再送信、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 電子メールを使用した電子メール テンプレート

これは簡単なマジック リンク メール テンプレートです:

<template>
  
    
      <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 }}
        </text>
        <hr>
        <text>This link expires in 1 hour.</text>
      </container>
    
  
</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. 複数のトランスポートのサポート: 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 ボイラープレートでのメールの処理方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。