The Be Sure Blog

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:

VUE_APP_EMAIL_SERVICE=
VUE_APP_EMAIL_TEMPLATE=
VUE_APP_EMAIL_USER=

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, e.target, 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.