@wa-ma/vue

@wa-ma/vue

WAMA WhatsApp Messaging Composition API utilities for Vue 3.

Prerequisites

To use this integration library, you must first register an account and retrieve your WhatsApp instance API key from the WAMA Portal.

Installation

npm install @wa-ma/vue @wa-ma/sdk

Features

• Vue 3 Reactivity: Fully integrated with Vue's reactivity system using Ref variables.
• Composition-Friendly: Easy drop-in composable hooks (useWama) to manage loading, success, and error states dynamically inside <script setup> tags.

Usage

Here is a standard Vue 3 Single File Component (.vue) example:

<script setup lang="ts">
import { ref } from "vue";
import { useWama } from "@wa-ma/vue";

const recipient = ref("");
const message = ref("");

// Initialize the composable with your WhatsApp instance key
const { sendMessage, loading, success, error, messageId } = useWama({ proxyUrl: "/api/wama" });

const handleSend = async () => {
  await sendMessage(recipient.value, message.value);
};
</script>

<template>
  <div class="sender-card">
    <input 
      v-model="recipient" 
      placeholder="Recipient Number (e.g., +966501234567)" 
    />
    <textarea 
      v-model="message" 
      placeholder="Type message content here..."
    ></textarea>
    
    <button :disabled="loading" @click="handleSend">
      {{ loading ? "Sending..." : "Send via WhatsApp" }}
    </button>

    <div v-if="success === true" class="alert-success">
      🎉 Message queued! ID: {{ messageId }}
    </div>
    <div v-if="error" class="alert-error">
      ❌ Failed to send: {{ error }}
    </div>
  </div>
</template>

<style scoped>
.sender-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}
input, textarea {
  padding: 8px;
  border-radius: 4px;
}
button {
  cursor: pointer;
  padding: 10px;
}
.alert-success { color: green; }
.alert-error { color: red; }
</style>