E-Mails in Nuxt senden Wie ich E-Mails in meinem SaaS-Boilerplate verarbeite-js-Tutorial-php.cn

E-Mails in Nuxt senden Wie ich E-Mails in meinem SaaS-Boilerplate verarbeite

Linda Hamilton

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

Original

449 Leute haben es durchsucht

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

Wenn Sie in Nuxt 3 etwas Ernstes erstellen, müssen Sie E-Mails senden.
Hier ist mein Setup, mit dem Sie zwischen Resend, SendGrid oder einem anderen Anbieter wechseln können, ohne Code neu schreiben zu müssen.

Das Setup

AdonisJS Mail (Ich habe dafür gesorgt, dass es außerhalb von AdonisJS funktioniert, sodass es mit jedem JS-Backend funktioniert)
Vue-E-Mail für Vorlagen
Funktioniert mit jedem E-Mail-Anbieter (Resend, AWS SES, Mailgun, Sparkpost, Brevo, Custom SMTP)

Grundkonfiguration

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

Nach dem Login kopieren

E-Mail-Vorlagen mit Vue Email

Hier ist eine einfache E-Mail-Vorlage für magische Links:

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

Nach dem Login kopieren

E-Mails versenden

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

Nach dem Login kopieren

Coole Funktionen von AdonisJS Mail

AdonisJS Mail verfügt über unzählige leistungsstarke Funktionen, die wir nutzen können:

Unterstützung mehrerer Transporte: Wechseln Sie zwischen E-Mail-Anbietern mit einer Codezeile
Kalenderereignisse: Hängen Sie Kalendereinladungen an Ihre E-Mails an
Dateianhänge: Hängen Sie ganz einfach Dateien, Streams oder Puffer an
HTML-/Textvorlagen: Unterstützung sowohl für HTML- als auch für Nur-Text-E-Mails

Das Anhängen einer Kalendereinladung ist beispielsweise so einfach:

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

Nach dem Login kopieren

Warum das gut funktioniert

Jederzeit den Anbieter wechseln
Vorlagen in Vue schreiben
Einfach zu testen
Die ganze Leistung von AdonisJS Mail in jedem JS-Backend

Probieren Sie es selbst aus

Möchten Sie mehr darüber erfahren, was AdonisJS Mail leisten kann? Schauen Sie sich die ausführliche Dokumentation an.

Diese E-Mail-Einrichtung ist Teil meines Nuxt SaaS-Grundsatzes.

Wenn Sie ein SaaS erstellen, probieren Sie es aus – es verfügt über typsichere APIs mit tRPC, RBAC (rollenbasierte Zugriffskontrolle) der Enterprise-Klasse und produktionsbereite Funktionen wie Authentifizierung, Teamverwaltung und Abrechnung .

Jede Funktion wurde mit der gleichen Aufmerksamkeit für die Entwicklererfahrung entwickelt wie dieses E-Mail-System.

Das obige ist der detaillierte Inhalt vonE-Mails in Nuxt senden Wie ich E-Mails in meinem SaaS-Boilerplate verarbeite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!