recherche

Maison >interface Web >js tutoriel >Envoi d'e-mails dans Nuxt Comment gérer les e-mails dans mon passe-partout SaaS

Envoi d'e-mails dans Nuxt Comment gérer les e-mails dans mon passe-partout SaaS

Linda Hamilton
Linda Hamiltonoriginal
2024-12-01 11:45:10440parcourir

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

Si vous construisez quelque chose de sérieux dans Nuxt 3, vous devrez envoyer des e-mails.
Voici ma configuration qui vous permet de basculer entre Resend, SendGrid ou tout autre fournisseur sans réécrire le code.

La configuration

  • AdonisJS Mail (je l'ai fait fonctionner en dehors d'AdonisJS pour qu'il fonctionne avec n'importe quel backend JS)
  • Vue Email pour les modèles
  • Fonctionne avec n'importe quel fournisseur de messagerie (Resend, AWS SES, Mailgun, Sparkpost, Brevo, Custom SMTP)

Configuration de base 

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

Modèles d'e-mails avec Vue Email

Voici un modèle d'e-mail de lien magique simple :

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

Envoi d'e-mails 

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

Fonctionnalités intéressantes d'AdonisJS Mail

AdonisJS Mail est livré avec des tonnes de fonctionnalités puissantes que nous pouvons utiliser :

  1. Support de transport multiple : basculez entre les fournisseurs de messagerie avec une seule ligne de code
  2. Événements du calendrier : Joignez des invitations au calendrier à vos e-mails
  3. Pièces jointes : joignez facilement des fichiers, des flux ou des tampons
  4. Modèles HTML/Texte : Prise en charge des e-mails HTML et en texte brut

Par exemple, joindre une invitation d'agenda est aussi simple que :

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

Pourquoi cela fonctionne bien

  • Changez de fournisseur à tout moment
  • Écrire des modèles dans Vue
  • Facile à tester
  • Toute la puissance d'AdonisJS Mail dans n'importe quel backend JS

Essayez-le vous-même

Vous voulez en savoir plus sur ce qu'AdonisJS Mail peut faire ? Consultez leur documentation détaillée.

Cette configuration de messagerie fait partie de mon passe-partout Nuxt SaaS.

Si vous créez un SaaS, jetez-y un œil : il est livré avec des API de type sécurisé utilisant tRPC, un RBAC (contrôle d'accès basé sur les rôles) de niveau entreprise et des fonctionnalités prêtes pour la production telles que l'authentification, la gestion d'équipe et la facturation. .

Chaque fonctionnalité est conçue avec la même attention portée à l'expérience des développeurs que ce système de messagerie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html if switch for mail try Calendar using JS this Access Other
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment un bouton peut-il empêcher la soumission indésirable de formulaires sans JavaScript ?Article suivant：Comment un bouton peut-il empêcher la soumission indésirable de formulaires sans JavaScript ?

Articles Liés

Voir plus