Comment envoyer des e-mails depuis votre application Vue.js avec EmailJS

Il y a quelques jours, j'ai décidé de travailler sur un projet Vue simple et j'avais besoin d'envoyer des emails via un contact que je venais de créer. Je souhaitais recevoir un e-mail automatisé chaque fois que quelqu'un remplissait mon formulaire de contact.

J'ai donc commencé à chercher et je suis tombé sur EmailJs. J'ai décidé d'écrire cet article car je trouvais que leur documentation était excellente et vraiment facile à utiliser. J'espère aussi que cela aide quelqu'un là-bas :)

Commençons!

Dans cet article, je vais vous montrer comment utiliser EmailJS pour envoyer des e-mails depuis votre application Vuejs.

Avant de continuer, je suppose que Vue CLI est installé sur votre ordinateur car je vais créer un mini projet de démonstration avec. Sinon, vous voudrez peut-être vérifier comment l'installer ici.

Nous allons créer le projet en utilisant cette commande:

vue create vue-emailjs-demo

Nous serons ensuite invités à choisir un préréglage par défaut ou à sélectionner manuellement des fonctionnalités. Sélectionnez default.

Un nouveau répertoire de projet sera créé et vous pourrez y accéder à l'aide de cette commande:

cd vue-emailjs-demo

Comment installer EmailJS

EmailJS vous aide à envoyer des e-mails en utilisant uniquement des technologies côté client. Aucun serveur n'est requis - connectez simplement EmailJS à l'un des services de messagerie pris en charge, créez un modèle d'e-mail et utilisez leur bibliothèque JavaScript pour déclencher un e-mail.

Avant de commencer à écrire notre code, vous voudrez créer un compte EmailJS. Avec votre compte, vous pourrez créer des modèles d'e-mails et choisir l'e-mail vers lequel vous souhaitez que vos e-mails automatisés soient envoyés.

Une fois connecté à votre nouveau compte, vous serez dirigé vers le tableau de bord.

Comment créer le modèle d'e-mail

Les modèles de courrier électronique peuvent éventuellement contenir des variables dynamiques dans presque tous les champs (par exemple, objet, contenu, courrier électronique TO, nom FROM, etc.). Ils sont renseignés à partir de l'appel JavaScript. Nous y reviendrons sous peu.

Ajoutons d'abord un service de messagerie. J'ai sélectionné Gmail, mais vous êtes libre de choisir le service le mieux adapté à vos besoins.

De plus, si vous ne voulez pas commencer à penser à un nom pour votre Service ID, appuyez sur l'icône de recherche et il sera automatiquement généré pour vous.

Ensuite, nous allons créer notre modèle d'e-mail. Accédez à la page des modèles. Créez un nouveau modèle. Notre modèle d'e-mail définira le sujet de notre e-mail, le contenu qu'il contiendra, l'endroit où il doit être envoyé, etc.

Les ensembles de doubles accolades montrées ci-dessus {{from_name}}sont des variables. Lorsqu'un utilisateur remplit notre formulaire, nous transmettrons ces informations à EmailJS en utilisant ces variables.

Vous trouverez ci-dessous une petite explication des champs disponibles dans notre modèle:

  • Objet: l'objet de l'e-mail.
  • Contenu: Lecorps de l'e-mail. Nous allons passer ici le message de l'utilisateur, son nom et son adresse de retour.
  • Vers l'e-mail: contient la destination de cet e-mail.
  • From Name : Ceci est facultatif. Mais vous pouvez y écrire votre nom.
  • De l'e-mail: l'adresse e-mail de l'expéditeur telle qu'elle apparaîtra pour le destinataire. Si la case à cocher de l'adresse e-mail par défaut est activée, EmailJS utilisera l'adresse e-mail associée au service de messagerie en cours d'utilisation.
  • Répondre à: définit l'adresse e-mail à laquelle les réponses doivent être envoyées.
  • BCC et CC: ces deux champs sont généralement utilisés pour envoyer une copie du message à toutes les personnes que vous avez répertoriées. Reply To,BCC and CCne sera pas utilisé dans ce guide car nous voulons le garder aussi simple que possible. Si vous avez besoin de plus d'informations, vous pouvez consulter la documentation EmailJS ici.

Remarque: À un moment donné de cet article, nous utiliserons les fichiers Service IDet Template ID. Nous aurons également besoin d'un fichier User ID. Vous pouvez trouver votre User IDdans la partie intégration du tableau de bord. Vous pouvez copier les détails dans votre presse-papiers et les coller lorsqu'ils sont nécessaires.

Comment installer EmailJS dans votre application

Passons maintenant au code :) Pour installer EmailJS dans votre application, utilisez cette commande:

npm install emailjs-com --save

Nous allons envoyer un e-mail à partir d'un formulaire de contact très simple. Il collectera des données, notamment: le nom (de l'expéditeur), l'e-mail (de l'expéditeur) et le contenu du message. Des trucs simples!

Vous pouvez modifier le HelloWorld.Vuecomposant qui a été créé automatiquement pour nous lorsque nous avons utilisé la CLI Vue ou vous pouvez créer un nouveau composant appelé ContactForm.vue. Je vais faire ce dernier.

Ci - dessous , nous construirons le formulaire de contact composant, ContactForm.vue.

Commençons par le template:

 Name  Email  Message 

Expliquer notre balisage

Comme je l'ai mentionné plus tôt, nous enverrons un e-mail à partir d'un formulaire de contact très simple. Créez donc un divélément qui contiendra le contenu de notre formulaire. Nous ajouterons du style à notre formulaire, alors ajoutez une classe containerà l' div élément.

 * {box-sizing: border-box;} .container { display: block; margin:auto; text-align: center; border-radius: 5px; background-color: #f2f2f2; padding: 20px; width: 50%; } label { float: left; } input[type=text], [type=email], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } 

Vous pouvez démarrer votre serveur avec la commande:

npm run serve

Maintenant, ouvrez votre navigateur sur localhost: 8080 et vous devriez voir votre formulaire:

Nous allons également créer une méthode appelée sendEmailqui gère la soumission de nos données. Mais avant de faire cela, nous devons importer emailjsdans notre fichier.

Ajoutez la ligne suivante juste en dessous script:

import emailjs from 'emailjs-com';

Voici le reste du code nécessaire dans notre script:

 export default { name: 'ContactUs', data() { return { name: '', email: '', message: '' } }, methods: { sendEmail(e) { try { emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID', { name: this.name, email: this.email, message: this.message }) } catch(error) { console.log({error}) } // Reset form field this.name = '' this.email = '' this.message = '' }, } } 

Que fait ce code

J'ai utilisé un try...catchci - dessus mais vous ne devez pas nécessairement l'utiliser. Souviens-toi quand je t'ai demandé decopiez les détails de votre ID de service, de votre ID de modèle et de votre ID d'utilisateur dans votre presse-papiers et collez-les quand ils en ont besoin? Eh bien, vous en avez absolument besoin maintenant! Remplacez donc cette partie de l'extrait par vos détails réels.

emailjs.sendForm() is how we send data to EmailJS after passing the Service ID, Template ID, User ID and form data that were passed into sendEmail(). We console.log() any error encountered with the catch() block.

It is important to note that sendForm() sends an email based on the specified email template and the passed form data. So make sure that your form input name is the same as the variable in your EmailJS template.

Below is my modified EmailJS template with the name (of the sender), email (of the sender), and the message content.

That's it!

Check the To Email address included in your template and you should have your email sent there already. You could also play around with the Test it or playground feature on the top-right corner of the template if you want.

GitHub Repo

You can find the code for this article in my GitHub account.

Feel free to share this article if you found it helpful. Thanks for reading!