Nuxt でのメールの送信 SaaS ボイラープレートでのメールの処理方法-jsチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-12-01 11:45:10

オリジナル

443 人が閲覧しました

Sending Emails in Nuxt How I Handle Emails in My SaaS Boilerplate

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>
  <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 行のコードで電子メールプロバイダーを切り替えます
カレンダーイベント: カレンダーの招待状をメールに添付します
ファイル添付: ファイル、ストリーム、またはバッファを簡単に添付します
HTML/テキストテンプレート: HTML メールとプレーンテキストメールの両方をサポート

たとえば、カレンダーの招待状を添付するのは次のように簡単です。

message.icalEvent((calendar) => {
  calendar.createEvent({
    summary: 'Team Meeting',
    start: DateTime.local().plus({ minutes: 30 }),
    end: DateTime.local().plus({ minutes: 60 }),
  })
});

ログイン後にコピー