How to Send Emails from your Vue.js Application with EmailJS

[ad_1]

Just a few days in the past I made a decision to work on a easy Vue challenge and wanted to ship emails by a contact from I had simply created. I wished to obtain an automatic e-mail each time somebody stuffed out my contact type.

So I obtained to looking out and came upon EmailJs. I made a decision to write this text as a result of I felt their documentation was nice and it was very easy to use. I additionally hope it helps somebody on the market 🙂

Let’s Get Started!

In this text, I might be displaying you ways to use EmailJS to ship emails from your Vuejs utility.

Before I proceed I’m assuming you could have Vue CLI put in on your laptop as I might be making a mini demo challenge with it. If not, you may want to verify how to set up it right here.

We will create the challenge utilizing this command:

vue create vue-emailjs-demo

We’ll then be prompted with the choice to decide a default preset or to manually choose options. Select default.

A brand new challenge listing might be created, and you may navigate into it utilizing this command:

cd vue-emailjs-demo

How to Install EmailJS

EmailJS helps you ship emails utilizing shopper aspect applied sciences solely. No server is required – simply join EmailJS to one of many supported e-mail providers, create an e-mail template, and use their JavaScript library to set off an e-mail.

Before we begin writing our code, you’ll need to create an EmailJS account. With your account, you’ll have the ability to create e-mail templates and select the e-mail you need your automated emails to go to.

Once you sign up to your new account, you may be directed to the dashboard.

How to Create the Email Template

Email templates can optionally comprise dynamic variables in nearly any discipline (for instance, topic, content material, TO e-mail, FROM identify, and so forth). They are populated from the JavaScript name. We will get into this shortly.

First let’s add an e-mail service. I chosen Gmail however you’re free to choose whichever service most accurately fits your wants.

Also, if you don’t need to begin considering of a reputation for your Service ID, faucet on the search icon and it will likely be robotically generated for you.

Next, we’ll create our e-mail template. Navigate to the templates web page. Create a brand new template. Our Email template will outline the topic of our e-mail, what content material it would comprise, the place it needs to be despatched, and so forth.

The units of double curly braces proven above like {{from_name}} are variables. When a person fills out our type, we are going to go that info to EmailJS utilizing these variables.

Below is a bit rationalization of the accessible fields in our template:

  • Subject: The topic of the e-mail.
  • Content: The physique of the e-mail. We are going to go the person message, their identify, and their return tackle right here.
  • To Email: Contains the vacation spot of this e-mail.
  • From Name: This is elective. But you possibly can write your identify there.
  • From Email: The sender’s e-mail tackle as it would seem for the recipient. If the default e-mail tackle checkbox is enabled then EmailJS will use the e-mail tackle related with the e-mail service in use.
  • Reply To: Sets the e-mail tackle to which the replies needs to be despatched.
  • BCC and CC: These two fields are usually used to ship a duplicate of the message to everybody you’ve listed. Reply To , BCC and CC will not be used on this information as we would like to preserve it so simple as doable. If you want additional info, you possibly can verify the EmailJS docs right here.

Note: At some extent on this article, we might be utilizing the Service ID and Template ID. We can even want a User ID. You can discover your User ID within the integration a part of the dashboard. You can copy the small print to your clipboard and paste them after they’re wanted.

How to Install EmailJS in your utility

Now shifting on to the code 🙂 To set up EmailJS in your utility, use this command:

npm set up emailjs-com --save

We’re going to be sending e-mail from a quite simple contact type. It will acquire knowledge together with: identify (of the sender), e-mail (of the sender), and the message content material. Simple stuff!

You can edit the HelloWorld.Vue element that was created robotically for us after we used the Vue CLI or you possibly can create a recent element referred to as ContactForm.vue. I might be doing the latter.

Below we are going to construct the contact type element, ContactForm.vue.

Let’s begin with the template:

<template>
    <div class="container">
        <type>
          <label>Name</label>
          <enter 
            kind="text" 
            v-model="name"
            identify="name"
            placeholder="Your Name"
          >
          <label>Email</label>
          <enter 
            kind="email" 
            v-model="email"
            identify="email"
            placeholder="Your Email"
            >
          <label>Message</label>
          <textarea 
            identify="message"
            v-model="message"
            cols="30" rows="5"
            placeholder="Message">
          </textarea>
          
          <enter kind="submit" worth="Send">
        </type>
    </div>
</template>

Explaining our markup

As I discussed earlier, we might be sending e-mail from a quite simple contact type. So create a div factor which can comprise our type content material. We might be including fashion to our type, so add a category container to the div factor.

<fashion scoped>
* {box-sizing: border-box;}

.container {
  show: block;
  margin:auto;
  text-align: middle;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 50%;
}

label {
  float: left;
}

enter[type=text], [type=email], textarea {
  width: 100%;
  padding: 12px;
  border: 1px stable #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

enter[type=submit] {
  background-color: #4CAF50;
  shade: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

enter[type=submit]:hover {
  background-color: #45a049;
}
</fashion>

You can begin your server with the command:

npm run serve

Now, open your browser to localhost:8080 and it is best to see your type:

We can even be creating a technique referred to as shipEmail which handles the submission of our knowledge. But earlier than we do this, we want to import emailjs in our file.

Add the next line slightly below script :

import emailjs from 'emailjs-com';

Below is the remainder of the code wanted in our script:

<script>
export default {
  identify: 'ContactUs',
  knowledge() {
    return {
      identify: '',
      e-mail: '',
      message: ''
    }
  },
  strategies: {
    shipEmail(e) {
      attempt {
        emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.goal,
        'YOUR_USER_ID', {
          identify: this.identify,
          e-mail: this.e-mail,
          message: this.message
        })

      } catch(error) {
          console.log({error})
      }
      // Reset type discipline
      this.identify = ''
      this.e-mail = ''
      this.message = ''
    },
  }
}
</script>

What this code is doing

I used a attempt...catch above however you do not essentially have to use it. Remember after I requested you to copy your Service ID, Template ID and User ID particulars to your clipboard and paste them for after they’re wanted? Well you completely want them now! So change that a part of the snippet with your precise particulars.

emailjs.sendForm() is how we ship knowledge to EmailJS after passing the Service ID, Template ID, User ID and type knowledge that have been handed into shipEmail(). We console.log() any error encountered with the catch() block.

It is vital to word that sendForm() sends an e-mail based mostly on the desired e-mail template and the handed type knowledge. So make it possible for your type enter identify is identical because the variable in your EmailJS template.

Below is my modified EmailJS template with the identify (of the sender), e-mail (of the sender), and the message content material.

That’s it!

Check the To Email tackle included in your template and it is best to have your e-mail despatched there already. You might additionally mess around with the Test it or playground characteristic on the top-right nook of the template if you’d like.

GitHub Repo

You can discover the code for this text in my GitHub account.

Feel free to share this text in the event you discovered it useful. Thanks for studying!

[ad_2]

Source hyperlink

Write a comment