The Be Sure Blog

Code Snippets | Problem Solving | Tips & Tricks

The Be Sure Blog banner

How to send emails from a Vue 3 client app

posted on 2.2.2023 by Below Surface in "Vue.js"

Note: When writing this, my experience with Vue.js is exactly four days.

To learn how to setup EmailJS, please find other tutorials. This post will only explain the implementation in Vue 3. I could not find any other tutorial to get my code working, but took a bit of each one i found.

To get started, create a ".env.local" file in the project root directory and add three variables:


Please also fill in your Emailjs-data after each "=".

Then install the NPM package:

$ npm i emailjs-com

Within the component or page, from which the emails should be sent, add the following code and modify it to your needs:

To the template block, add:

<form @submit.prevent="(e) => sendEmail(e)">
  <label for="name">Your Name:</label>
  <input type="text" id="name" name="name" :value="name" placeholder="Please type in your name here" required />

  <label for="email">Your Email:</label>   <input type="email" id="email" name="email" :value="email" placeholder="Please type in your email here" required />

  <label for="message">Your Message:</label>   <textarea id="message" name="message" :value="message"></textarea>

  <button type="submit" value="Send" class="submit-button">Send!</button> </form>

To the script block, add:

import emailjs from 'emailjs-com';

export default {   data() {     return {       name: "",       email: "",       message: ""     }   },   methods: {     sendEmail(e: HTMLFormElement) {       try {         emailjs.sendForm(process.env.VUE_APP_EMAIL_SERVICE, process.env.VUE_APP_EMAIL_TEMPLATE,, process.env.VUE_APP_EMAIL_USER)       } catch(error) {         console.log({ error })       }     }   } }

And that's all! If it does not work, check your developer console and read the provided resources.


vue 3
send emails


More posts of this category

Getting started with global state management in Vue.js

How to use the Vue.js global store called Vuex


Building a custom image slider in Vue.js

From a Vue.js newbie: How to build a custom image slider


Add smooth scrolling to a Vue 3 website

Adding smooth scrolling usually makes up for a much better UX, and it is easy to implement


Install and use the router in Vue 3

Learn how to implement page routing in Vue 3