Use Twilio in Vue 3 to send message on Whatsapp

Question

i looking the best way to send message on Whatsapp using twilio. so here is my code :

twilio.js file

import { Twilio } from 'twilio';

const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;

const twilioClient = new Twilio(accountSid, authToken);;

export default twilioClient;

Text.vue file

<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import twilioClient from '@/stores/twilio.js';

async function sendMessage() {
  try {
    const message = await twilioClient.messages.create({
      body: "Hello there!",
      from: 'whatsapp:+1234567890',
            to: 'whatsapp:+1234567890'
    });

    console.log(message.body);
  } catch (error) {
    console.error('Error sending message:', error);
  }
}
</script>

<template>
  <button @click="sendMessage">Send Message</button>
</template>

But somehow i get an error Uncaught TypeError: class heritage events_1.EventEmitter is not an object or null pS: i have install twilio through nom install twilioi.

What is exactly the problem. what is the best way to use Twilio on vue ?

Answer 1

It's important to note that Twilio shouldn't be used directly in the frontend for security and architecture reasons. Exposing sensitive information such as your Twilio Account SID and Auth Token in the frontend can lead to serious security vulnerabilities. Instead, you should set up a backend server to handle the communication with Twilio. Your Vue.js frontend can then make API requests to this backend server to send WhatsApp messages. This way, you keep your credentials secure and ensure that your Twilio logic is handled on the server side.