how to send an email with Vuejs?

Question

How can I do to send an email with Vuejs2. I manage to get the input data and turned them into json but I can not send them to a mailbox.

I look for the side of PHPMailer but facing PHP and Vue do not mix.

How can I send the form content?

Template :

 <div class="JC-contact__form">
  <b-form @submit="onSubmit" v-if="show">

    <b-form-group class="JC-contact__form--lastName">
      <b-form-input type="text" v-model="form.lastName"> </b-form-input>
    </b-form-group>

    <b-form-group class="JC-contact__form--firstName">
      <b-form-input type="text" v-model="form.firstName"> </b-form-input>
    </b-form-group>

    <b-form-group>
      <b-form-input type="text" v-model="form.topic"> </b-form-input>
    </b-form-group>
    <b-form-group>
      <b-form-input type="email" v-model="form.email"></b-form-input>
    </b-form-group>

    <b-form-textarea v-model="form.text"></b-form-textarea>

    <b-button type="submit">Envoyer</b-button>
  </b-form>

</div>

Script :

  export default {
    name: 'Contact',
    data () {
      return {
        form: {
          lastName: '',
          firstName: '',
          topic: '',
          email: '',
          text: ''
        },
        file: null,
        show: true
      }
    },
    methods: {
      onSubmit (evt) {
        evt.preventDefault();
        alert(JSON.stringify(this.form));
      },
      onReset (evt) {
        evt.preventDefault();
        /* Reset our form values */
        this.form.lastName = '';
        this.form.firstName = '';
        this.form.topic = '';
        this.form.email = '';
        this.form.text = '';
        /* Trick to reset/clear native browser form validation state */
        this.show = false;
        this.$nextTick(() => {
          this.show = true
        });
      }
    }
  }

Solution 1

Sending mail from Vue directly is not possible as you need some sort of server to handle the mail protocol. This can never be done directly from the browser. I am not familiar with PHP, so I can't help you with that. In node you need the nodemailer package and some smtp server to handle the email like Amazon Simple Email Server (or you could use your gmail account). What you could also do is use axios to send a post request to SendGrid or Mandrill or some service like that. They will convert your request to an email and send it to an address specified in you request body.

More info here:

https://sendgrid.com/docs/API_Reference/Web_API/mail.html

https://mandrillapp.com/api/docs/

Solution 2

This is how I did:

Mailing from the server side

The PHP mail() function will just work fine. Nothing fancy here.

mail.php - This one must be located somewhere accessible on your server.

<?php

$name = "Undefined name";

if(isset($_POST['name'])){
    $name = $_POST['name'];
}

$message = "<p>Hi!</p>";
$message .= "<p>Wazaaaaa $name</p>";

$to_email = '[email protected]';
$subject = 'Mail subject';
$headers[] = 'MIME-Version: 1.0';
$headers[] = 'Content-type: text/html; charset=UTF-8';
$headers[] = 'From: Biloo <[email protected]>';

mail($to_email, $subject, $message, implode("\r\n", $headers));

?>

Be aware that headers values must be trustworthy (no unverified user-submited values).

---

Sending data to the mailing script

Then VueJS is suppposed to send the appropriate data to the mailing script:

components/Mail.vue

<template>
   <div>
      <transition name="fade" mode="out-in">
          <div v-if="sent">
              <p>Thanks</p>
          </div>
      </transition>
      </div>
      <div v-if="!sent" class="formGroup">
          <b-form @submit="onSubmit">
              <b-form-input
                  id="input-name"
                  v-model="form.name"
                  type="text"
                  required
                  placeholder="Name"
              />
              <b-button type="submit">
                  Contact
              </b-button>
          </b-form>
      </div>
   </div>
</template>

<script>
const querystring = require("querystring");

export default {
    data() {
        return {
          sent: false,
          form: {
              name: ""
          }
        };
    },
    methods: {
      onSubmit(e) {
          e.preventDefault();
          this.$axios
             .post(
                 "https://theServer.com/mail.php",
                  querystring.stringify(this.form)
             )
             .then(res => {
                 this.sent = true;
             });
      }
    }
};
</script>

Here, it is important to note that the default behavior of Axios is to post a JSON object. However, doing so, PHP will receive an empty $_POST value. Data must therefore be formatted using the querystringdependency before being posted.

Querystring can be installed with npm:

npm i querystring