Send Email using JavaScript in VUE application without any use of server language

VUE-Email logo designed by Nishitkumar Joshi

Abstract:

In real world sending Email from web application is an important feature. There are lot of methods available to implement email feature. It is important we choose efficient method as per our codebase. Send Email feature require server call, it forces us to use server language like Node, PHP.

In this article we will focus on send email feature using JavaScript without any server language. We will use SMTP.js JavaScript Library to perform server responsibilities. We will implement email feature in Vue application.

I will expect reader has basic understanding of JavaScript and VUE.js

For sending Email we will need SMTP server. You can use your choice of SMTP server for example Gmail, EmailJS, Elastic Email. SMTP.JS accept security token of SMTP server to connect with SMTP Server. I have used elastic mail server.

How to add SMTP.js library to VUE app?

To use SMTP.js we need to import smtp.js library into our Contact form component. You can go to https://smtpjs.com/ and download smtp.js library to your local. You will need to create smtp.js file or Pick file name of your choice in your local project where you will store downloaded smtp.js library.

Create contact form in VUE.js to submit email. In below screen shots you can find template code and style.

Template code for Contact Form by Nishitkumar Joshi

Style for above template by Nishitkumar Joshi

How to import smtp.js library into your Vue component?

There is named export “Email” used in local smtp.js file. We will use import declaration inside contact component to import smtp.js.

create smtp.js file in VUE project by Nishitkumar Joshi

import smtp.js into VUE component by Nishitkumar Joshi

We will bind form fields using v-model. We have data() property declare which will hold this form field values. Now we need to build method sendEmail() under methods hook for our contact component. This method will fire when we click on submit button. Under secureToken you will need to put your smtp service token. Refer below screen shot.

sendEmail() method to send email on button click by Nishitkumar Joshi

Now all set, you can fill out contact form and send Email . You will receive email.

Test mail sent from VUE application by Nishitkumar Joshi

You will see confirmation box like below on your webpage if email sent is successful

Success Confirmation after Email sent by Nishitkumar Joshi

Now you can check receiver mailbox to verify.

Received Email by Nishitkumar Joshi

References

smtp.js https://smtpjs.com/

Vue.js https://vuejs.org/

if you like my article please don’t forget to clap. It will encourage me to publish more which solve real world problems. Thanks!