How can I use mailjet with my vue project?

Question

I want to use mailjet as a contac I install "$ yarn add node-mailjet" and I follow the steps but I am a little confused if I am using well the mailjet this is my code:

contact.vue:

  <form accept-charset="UTF-8" action="/contacto" class="row" method="post" id="contactForm">

    <div class="col-sm-4">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Nombre" name="contact[name]" id="contact_name" required>
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="input-group">
        <input type="email" class="form-control" placeholder="Correo Electronico" name="contact[email]" id="contact_email" required>
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Asunto" name="contact[issue]" id="contact_issue">
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
      </div>
    </div>
    <div class="col-sm-12">
      <div class="input-group textarea">
        <textarea class="form-control" placeholder="Tu Mensaje" name="contact[comment]" id="contact_comment" required></textarea>
        <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
      </div>
    </div>
    <div class="col-sm-12">
      <input type="submit" value="Enviar información" class="btn btn-danger active">
      <!--<a href="#" class="btn btn-danger active" @click="enviar()">Enviar</a>-->
    </div>
  </form>

script:

export default {
}
    var Mailjet = require('node-mailjet').connect('xxxxapi-keyxxx', 'xxxapi-secretxxxx');

// The third argument (the object) is not mandatory. Each configuration key is also optional
const mailjet = require('apiv3')
  .connect(process.env.MJ_APIKEY_PUBLIC, process.env.MJ_APIKEY_PRIVATE, {
    url: 'api.mailjet.com', // default is the API url
    version: 'v3.1', // default is '/v3'
    perform_api_call: true // used for tests. default is true
  }),

var sendEmail = Mailjet.post('send');

var emailData = {
    'FromEmail': 'my@email.com',
    'FromName': 'My Name',
    'Subject': 'Test with the NodeJS Mailjet wrapper',
    'Text-part': 'Hello NodeJs !',
    'Recipients': [{
      'Email': 'example@gmail.com'
    }],
    'Attachments': [{
      "Content-Type": "text-plain",
      "Filename": "test.txt",
      "Content": "VGhpcyBpcyB5b3VyIGF0dGFjaGVkIGZpbGUhISEK", // Base64 for "This is your attached file!!!"
    }]
  },
  sendEmail
  .request(emailData)
  .then(handlePostResponse)
  .catch(handleError);

I will really appreciate if you can tell, if I am where do I have the mistake.

Vue.js is a front-end framework. Mailjet is intended to be used server-side (i.e. Node). You can't really use it like this. — ceejayoz, Sep 28 '17 at 16:40
You're going to need a server-side component, be it PHP, Ruby on Rails, Node.js, etc. — ceejayoz, Sep 28 '17 at 17:42

score 0 · Answer 1 · answered Jul 08 '20 at 14:53

0

unfortunately Mailjet is made for backend servers and vue is frontend so it won't work.

You can however use a bridge service like emailjs.com to get it done, that is the workaround I went for!

answered Jul 08 '20 at 14:53

Lurein Perera

79
2

How can I use mailjet with my vue project?

1 Answers1