Menghantar E-mel dalam Nuxt Cara Saya Mengendalikan E-mel dalam Boilerplate SaaS Saya-tutorial js-php.cn

Menghantar E-mel dalam Nuxt Cara Saya Mengendalikan E-mel dalam Boilerplate SaaS Saya

Linda Hamilton

Lepaskan： 2024-12-01 11:45:10

asal

434 orang telah melayarinya

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

Jika anda sedang membina sesuatu yang serius dalam Nuxt 3, anda perlu menghantar e-mel.
Berikut ialah persediaan saya yang membolehkan anda bertukar antara Hantar Semula, SendGrid atau mana-mana pembekal lain tanpa menulis semula kod.

Persediaan

Mel AdonisJS (Saya membuatnya berfungsi di luar AdonisJS supaya ia berfungsi dengan mana-mana bahagian belakang JS)
E-mel Vue untuk templat
Berfungsi dengan mana-mana pembekal e-mel (Hantar Semula, AWS SES, Mailgun, Sparkpost, Brevo, Custom SMTP)

Konfigurasi Asas

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;
};

Salin selepas log masuk

Templat E-mel dengan E-mel Vue

Berikut ialah templat e-mel pautan ajaib yang ringkas:

<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>

Salin selepas log masuk

Menghantar E-mel

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,
      })
    );
});

Salin selepas log masuk

Ciri Hebat daripada AdonisJS Mail

AdonisJS Mail dilengkapi dengan banyak ciri hebat yang boleh kami gunakan:

Sokongan Pengangkutan Berbilang: Bertukar antara penyedia e-mel dengan satu baris kod
Acara Kalendar: Lampirkan jemputan kalendar pada e-mel anda
Lampiran Fail: Lampirkan fail, strim atau penimbal dengan mudah
Templat HTML/Teks: Sokongan untuk kedua-dua HTML dan e-mel teks biasa

Sebagai contoh, melampirkan jemputan kalendar adalah semudah:

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

Salin selepas log masuk

Mengapa ini berfungsi dengan baik

Tukar penyedia pada bila-bila masa
Tulis templat dalam Vue
Mudah untuk diuji
Semua kuasa AdonisJS Mail dalam mana-mana bahagian belakang JS

Cubalah sendiri

Ingin mengetahui lebih lanjut tentang perkara yang boleh dilakukan oleh AdonisJS Mail? Lihat dokumentasi terperinci mereka.

Persediaan e-mel ini adalah sebahagian daripada plat dandang Nuxt SaaS saya.

Jika anda sedang membina SaaS, semaknya—ia disertakan dengan API jenis selamat menggunakan tRPC, RBAC gred perusahaan (kawalan akses berasaskan peranan) dan ciri sedia pengeluaran seperti pengesahan, pengurusan pasukan dan pengebilan .

Setiap ciri dibina dengan perhatian yang sama terhadap pengalaman pembangun seperti sistem e-mel ini.

Atas ialah kandungan terperinci Menghantar E-mel dalam Nuxt Cara Saya Mengendalikan E-mel dalam Boilerplate SaaS Saya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!