Sådan sender du e-mails fra dit Vue.js-program med EmailJS

For et par dage siden besluttede jeg at arbejde på et simpelt Vue-projekt og havde brug for at sende e-mails via en kontakt fra jeg lige havde oprettet. Jeg ønskede at modtage en automatisk e-mail hver gang nogen udfyldte min kontaktformular.

Så jeg kom til at søge og snuble over EmailJs. Jeg besluttede at skrive denne artikel, fordi jeg følte, at deres dokumentation var fantastisk, og den var virkelig nem at bruge. Jeg håber også det hjælper nogen derude :)

Lad os komme igang!

I denne artikel vil jeg vise dig, hvordan du bruger EmailJS til at sende e-mails fra din Vuejs-applikation.

Før jeg fortsætter, antager jeg, at du har Vue CLI installeret på din computer, da jeg opretter et mini-demoprojekt med det. Hvis ikke, kan du kontrollere, hvordan du installerer det her.

Vi opretter projektet ved hjælp af denne kommando:

vue create vue-emailjs-demo

Vi bliver derefter bedt om muligheden for at vælge en standardindstilling eller til manuelt at vælge funktioner. Vælg default.

Der oprettes en ny projektmappe, og du kan navigere ind i den ved hjælp af denne kommando:

cd vue-emailjs-demo

Sådan installeres EmailJS

EmailJS hjælper dig med at sende e-mails kun ved hjælp af klientsides teknologier. Ingen server er påkrævet - tilslut bare EmailJS til en af ​​de understøttede e-mail-tjenester, opret en e-mail-skabelon, og brug deres JavaScript-bibliotek til at udløse en e-mail.

Før vi begynder at skrive vores kode, skal du oprette en EmailJS-konto. Med din konto kan du oprette e-mail-skabeloner og vælge den e-mail, du vil have dine automatiske e-mails til.

Når du har logget ind på din nye konto, bliver du sendt til dashboardet.

Sådan oprettes e-mail-skabelonen

E-mail-skabeloner kan valgfrit indeholde dynamiske variabler i næsten ethvert felt (for eksempel emne, indhold, TIL e-mail, FRA navn osv.). De udfyldes fra JavaScript-opkaldet. Vi kommer snart ind på dette.

Lad os først tilføje en e-mail-tjeneste. Jeg valgte Gmail, men du kan frit vælge den service, der bedst passer til dine behov.

Også, hvis du ikke vil begynde at tænke på et navn til din Service ID, skal du trykke på søgeikonet, og det genereres automatisk for dig.

Dernæst opretter vi vores e-mail-skabelon. Naviger til skabelonsiden. Opret en ny skabelon. Vores e-mail-skabelon definerer emnet for vores e-mail, hvilket indhold den vil indeholde, hvor den skal sendes osv.

Sættene med dobbelte krøllede seler vist ovenfor {{from_name}}er variabler. Når en bruger udfylder vores formular, videregiver vi disse oplysninger til EmailJS ved hjælp af disse variabler.

Nedenfor er en lille forklaring på de tilgængelige felter i vores skabelon:

  • Emne: Emnet for e-mailen.
  • Indhold: Thee-mailens krop. Vi sender brugermeddelelsen, deres navn og deres returadresse her.
  • Til e-mail: Indeholder destinationen for denne e-mail.
  • Fra navn : Dette er valgfrit. Men du kan skrive dit navn der.
  • Fra e-mail: Afsenderens e-mail-adresse, da den vises for modtageren. Hvis afkrydsningsfeltet for standard-e-mail-adresse er aktiveret, bruger EmailJS den e-mail-adresse, der er knyttet til den e-mail-tjeneste, der er i brug.
  • Svar til: Indstiller den e-mail-adresse, som svarene skal sendes til.
  • BCC og CC: Disse to felter bruges typisk til at sende en kopi af meddelelsen til alle, du har angivet. Reply To,BCC and CCvil ikke blive brugt i denne vejledning, da vi ønsker at holde det så simpelt som muligt. Hvis du har brug for yderligere oplysninger, kan du tjekke EmailJS-dokumenterne her.

Bemærk: På et tidspunkt i denne artikel bruger vi Service IDog Template ID. Vi har også brug for en User ID. Du kan finde din User IDi integrationsdelen af instrumentbrættet. Du kan kopiere detaljerne til dit udklipsholder og indsætte dem, når de er nødvendige.

Sådan installeres EmailJS i din applikation

Gå nu videre til koden :) For at installere EmailJS i din applikation skal du bruge denne kommando:

npm install emailjs-com --save

Vi sender e-mail fra en meget enkel kontaktformular. Det indsamler data inklusive: navn (afsender), e-mail (afsender) og meddelelsesindholdet. Enkle ting!

Du kan redigere den HelloWorld.Vuekomponent, der blev oprettet automatisk for os, da vi brugte Vue CLI, eller du kan oprette en ny komponent kaldet ContactForm.vue. Jeg gør det sidstnævnte.

Nedenfor bygger vi kontaktformularkomponenten ContactForm.vue.

Lad os starte med template:

 Name  Email  Message 

Forklaring af vores markering

Som jeg nævnte tidligere, sender vi e-mail fra en meget enkel kontaktformular. Så lav et divelement, der indeholder vores formularindhold. Vi tilføjer stil til vores formular, så tilføj en klasse containertil div elementet.

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

Du kan starte din server med kommandoen:

npm run serve

Now, open your browser to localhost:8080 and you should see your form:

We will also be creating a method called sendEmail which handles the submission of our data. But before we do that, we need to import emailjs in our file.

Add the following line just under script :

import emailjs from 'emailjs-com';

Below is the rest of the code needed in our 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 = '' }, } } 

What this code is doing

I used a try...catch above but you don't necessarily have to use it. Remember when I asked you tocopy your Service ID, Template ID and User ID details to your clipboard and paste them for when they're needed? Well you absolutely need them now! So replace that part of the snippet with your actual details.

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

Du kan finde koden til denne artikel på min GitHub-konto.

Del gerne denne artikel, hvis du fandt det nyttigt. Tak for læsningen!