What are the steps to integrate mailjet into my Vue application?

I am looking to utilize mailjet for my contact form. I have installed it using "$ yarn add node-mailjet" and followed the steps provided. However, I am a bit confused about whether I am integrating mailjet correctly. Below is the code I am currently using:

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="Name" 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="Email" 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="Subject" 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="Your Message" 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="Send Information" class="btn btn-danger active">
      <!--<a href="#" class="btn btn-danger active" @click="send()">Send</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': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e68b9fa6838b878f8ac885898b">[email protected]</a>',
    'FromName': 'My Name',
    'Subject': 'Test with the NodeJS Mailjet wrapper',
    'Text-part': 'Hello NodeJs !',
    'Recipients': [{
      'Email': '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a5b8a1adb0aca580a7ada1a9aceea3afad">[email protected]</a>'
    }],
    '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 would greatly appreciate it if you could review my code and let me know if there are any mistakes.

Answer №1

Mailjet is specifically designed for backend servers while Vue is more suited for frontend operations, making them incompatible for direct use together.

If you're looking to bridge the gap, services like emailjs.com provide a workaround solution that I found useful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The foundation of JSON and its structural encoding

Looking to deserialize JSON from Java, here's how it's done: Java jsonInString = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(graphDTO); JSON "accounts" : [ { "name" : "1009427721", "value" : 16850.79, "children" : ...

Encountering a problem with scrolling the modal to the top

I am currently working on a code snippet that involves scrolling the modal to the top position. The purpose of this is to display form validation messages within the modal popup. Below are the jQuery code snippets that I have attempted: //Click event t ...

A guide on implementing a callback function with the iTunes search API

I am having trouble setting up a callback function to effectively utilize the iTunes Store search API. My goal is to achieve the following behavior: const getiTunes = fetch(`https://itunes.apple.com/search?term=${search}&media=movie&limit=200`) ...

The chosen selection automatically deactivates the checkbox with a matching value

I am looking for a solution where selecting an option will automatically disable the checkbox with the corresponding value. The existing methods I have come across are static and rely on hardcoded values. <select name="pickOne" id="pickOn ...

In an Electron-React-Typescript-Webpack application, it is important to note that the target is not a DOM

Rendering seems to be working fine for the mainWindow. webpack.config.js : var renderer_config = { mode: isEnvProduction ? 'production' : 'development', entry: { app: './src/app/index.tsx', //app_A: './src/a ...

What is the best method for efficiently loading SVG icons on an HTML page without redundancy? / Is utilizing <use href> recommended?

My struggle with implementing icons in Angular While working on a new Angular project, I've encountered challenges with my current SVG-icon implementation method from a previous project (@ngneat/svg-icon). The process involves organizing SVG files in ...

Testing the Limits of CSS Hover

I'm having trouble figuring out how to implement this. When hovering, a yellow square/background should appear with an offset similar to the one in the image below. I am utilizing bootstrap for this project. Any assistance or guidance would be greatl ...

Contrasting the use of jQuery versus AJAX for updating static page text

While I haven't fully grasped the concept of AJAX yet, my understanding is that it can be beneficial for updating specific parts of a webpage. Does using AJAX only make sense when you require server interaction? I am looking to replace text on a webp ...

Exploring the world of AngularJS and delving into the

Lately, I've come across articles discussing Google's ability to now crawl websites and render CSS and Javascript. For example, Google themselves have talked about it in this article: My setup involves a single page application built with Angula ...

React slick does not display arrows when there are 4 or more photos

I am facing an issue where the next and previous arrows are not appearing when I have 4 or more photos on react-slick. However, they show up fine when there are 3 or fewer photos. You can view my code at this link: https://codesandbox.io/s/wyyrl6zz3l ...

Best return type for a webservice triggered using jQuery but not requiring any data to be returned

I am currently working on a web service that utilizes several methods. These methods do not have significant impact on the client side as I call them using jQuery/ajax. My main concern is regarding the recommended return type. Typically, I would return JS ...

Error: Attempting to assign a value to 'onclick' property of null object [Chrome Extension]

window.onload = function() { document.getElementById('item_save').onclick = function() { var item_name = document.getElementById('item_name').value; var item_size = document.getElementById('item_size').value; v ...

The JS copy function is successful when operating on a single element, but it encounters issues when attempting to run on multiple elements, only copying

My code includes a copy function that copies the data from a textarea to the clipboard when a button is clicked. The functionality works perfectly for the first textarea, but for subsequent textareas, the buttons do not perform the copy action. Check out ...

Issue with Vue plugin syntax causing component not to load

I'm facing an issue with a Vue plugin that I have. The code for the plugin is as follows: import _Vue from "vue"; import particles from "./Particles.vue"; const VueParticles = (Vue: typeof _Vue, options: unknown) => { _Vue. ...

What is the best way to organize angularjs controllers and directives within one another?

When I structure my controllers like this: <body ng-app="app" ng-controller="ctrl"> <div ng-controller="app-get"> <app-get></app-get> </div> <div ng-controller="app-post"> <app-post">& ...

What is the best way to distinguish between inline javascript and dynamically created content in Express/Node.js?

I've encountered a bit of a noob-question despite having a few years of experience in web development. Despite searching Programmer Stack Exchange and Google, I haven't found an answer, so here goes. Currently, I'm working with the Express ...

Using an array of references in React

I've encountered a problem where I'm trying to create a ref array from one component and then pass it to another inner component. However, simply passing them as props to the inner component doesn't work as it returns null. I attempted to fo ...

Validating decimals in a text field with either JavaScript or jQuery

I need to implement text field validation on the keyup event. The text field should only accept money type decimals such as: (12.23) (.23) (0.26) (5.09) (6.00) If any incorrect value is entered, it should revert back to the previous value and remove the ...

Having trouble accessing properties that are undefined while using react JS, specifically when trying to read a 'map' property

Currently, I am in the process of building a blog with ReactJS and NextJS within VS Code. Despite not encountering any errors during coding, when I attempt to run it, the browser displays: "TypeError: Cannot read properties of undefined (reading 'map& ...

Adjust the wait time for sliding on the jQuery rcarousel

I am currently utilizing rcarousel for my website and I would like to adjust the duration of time that each slide is displayed. At the moment, each slide stays up for just a few seconds, but I want to extend this so that each slide remains on screen for at ...