Nuxt에서 이메일 보내기 SaaS 상용구에서 이메일을 처리하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Nuxt에서 이메일 보내기 SaaS 상용구에서 이메일을 처리하는 방법

Linda Hamilton

Dec 01, 2024 am 11:45 AM

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

Nuxt 3에서 중요한 것을 만들고 있다면 이메일을 보내야 합니다.
코드를 다시 작성하지 않고도 Resend, SendGrid 또는 기타 공급자 간에 전환할 수 있는 설정은 다음과 같습니다.

설정

AdonisJS 메일(AdonisJS 외부에서 작동하도록 만들었으므로 모든 JS 백엔드에서 작동함)
템플릿용 Vue 이메일
모든 이메일 제공업체(Resend, AWS SES, Mailgun, Sparkpost, Brevo, Custom 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에는 우리가 사용할 수 있는 수많은 강력한 기능이 포함되어 있습니다.

다중 전송 지원: 코드 한 줄로 이메일 제공업체 간 전환
캘린더 이벤트: 이메일에 캘린더 초대장 첨부
파일 첨부: 파일, 스트림, 버퍼를 쉽게 첨부
HTML/텍스트 템플릿: HTML 및 일반 텍스트 이메일 모두 지원

예를 들어 캘린더 초대장을 첨부하는 방법은 다음과 같이 간단합니다.

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

로그인 후 복사