check our Documentation 👉 platform.tawasal.ae

This library provides a set of vue hooks to integrate with the Tawasal SuperApp API, allowing you to interact with various functionalities such as fetching user data, handling clipboard operations, scanning QR codes, and more.

Tawasal Vue SDK

The Tawasal Vue SDK provides hooks for integrating Tawasal SuperApp functionalities into your Vue.js application. These hooks allow you to access various features like user information, contact selection, clipboard reading, haptic feedback, and more.

Installation

Install the SDK using npm or yarn:

npm install @tawasal/vue

or

yarn add @tawasal/vue

Usage

Below are examples of how to use the different hooks provided by the Tawasal Vue SDK.

1. useTawasal

This hook fetches the current user’s information, photo, and user link.

Example:

<template>
  <div>
    <div v-if="isLoading">Loading...</div>
    <div v-if="error">Error: {{ error.message }}</div>
    <div v-if="user">
      <h2>User Info</h2>
      <p>Name: {{ user.name }}</p>
      <p>ID: {{ user.id }}</p>
    </div>
    <div v-if="avatar">
      <img :src="avatar" alt="User Photo" />
    </div>
    <div v-if="userLink">
      <p>User Link: {{ userLink }}</p>
    </div>
  </div>
</template>
 
<script setup>
import { useTawasal } from '@tawasal/vue';
 
const { user, avatar, userLink, error, isLoading } = useTawasal();
</script>

2. useContacts

This hook allows you to select contacts and fetch their details.

Example:

<template>
  <div>
    <button @click="triggerSelect('Select a contact')">Select Contacts</button>
    <div v-if="isLoading">Loading...</div>
    <div v-if="error">Error: {{ error.message }}</div>
    <ul v-if="contacts">
      <li v-for="contact in contacts" :key="contact.userId">
        {{ contact.name }} - <img v-if="contact.photoUrl" :src="contact.photoUrl" alt="Avatar" />
      </li>
    </ul>
  </div>
</template>
 
<script setup>
import { useContacts } from '@tawasal/vue';
 
const { contacts, isLoading, error, triggerSelect } = useContacts();
</script>

3. useClipboard

This hook reads the content of the clipboard.

Example:

<template>
  <div>
    <button @click="updateClipboard">Read Clipboard</button>
    <div v-if="isLoading">Loading...</div>
    <div v-if="error">Error: {{ error.message }}</div>
    <div v-if="clipboard">Clipboard Content: {{ clipboard }}</div>
  </div>
</template>
 
<script setup>
import { useClipboard } from '@tawasal/vue';
 
const { clipboard, isLoading, error, updateClipboard } = useClipboard();
</script>

4. usePhoneNumber

This hook prompts the user to share their phone number for a specified reason.

Example:

<template>
  <div>
    <button @click="triggerPhonePrompt('Please share your phone number')">Get Phone Number</button>
    <div v-if="isLoading">Loading...</div>
    <div v-if="error">Error: {{ error.message }}</div>
    <div v-if="phone">Phone Number: {{ phone }}</div>
  </div>
</template>
 
<script setup>
import { usePhoneNumber } from '@tawasal/vue';
 
const { phone, isLoading, error, triggerPhonePrompt } = usePhoneNumber();
</script>

5. useQR

This hook shows a QR code scanner and retrieves the scanned code.

Example:

<template>
  <div>
    <button @click="triggerScan">Scan QR Code</button>
    <button @click="closeScan">Close QR Scanner</button>
    <div v-if="isLoading">Loading...</div>
    <div v-if="error">Error: {{ error.message }}</div>
    <div v-if="qr">Scanned QR Code: {{ qr }}</div>
  </div>
</template>
 
<script setup>
import { useQR } from '@tawasal/vue';
 
const { qr, isLoading, error, triggerScan, closeScan } = useQR();
</script>

6. useTawasalSDK

This hook provides access to general Tawasal SuperApp functionalities like haptic feedback, opening URLs, closing the app, and sharing content.

Example:

<template>
  <div>
    <button @click="haptic">Haptic Feedback</button>
    <button @click="closeApp">Close App</button>
    <button @click="shareContent">Share Content</button>
  </div>
</template>
 
<script setup>
import { useTawasalSDK } from '@tawasal/vue';
 
const { haptic, open, closeApp, share } = useTawasalSDK();
 
function shareContent() {
  share({
    text: 'Check this out!',
    url: 'https://example.com',
  });
}
</script>

API Reference

useTawasal

Fetches the current user’s information, photo, and user link.

• user: The user’s contact information.
• avatar: The user’s photo in base64 format.
• userLink: A link to the user’s profile.
• error: Any error that occurred during the fetch.
• isLoading: A boolean indicating whether the data is currently being loaded.

useContacts

Allows you to select contacts and fetch their details.

• contacts: An array of selected contacts with extended information.
• isLoading: A boolean indicating whether the data is currently being loaded.
• error: Any error that occurred during the fetch.
• triggerSelect(title: string): Triggers the contact selection with the specified title.

useClipboard

Reads the content of the clipboard.

• clipboard: The content of the clipboard.
• isLoading: A boolean indicating whether the data is currently being loaded.
• error: Any error that occurred during the fetch.
• updateClipboard(): Updates the clipboard content.

usePhoneNumber

Prompts the user to share their phone number for a specified reason.

• phone: The user’s phone number.
• isLoading: A boolean indicating whether the data is currently being loaded.
• error: Any error that occurred during the fetch.
• triggerPhonePrompt(title: string): Prompts the user to share their phone number with the specified title.

useQR

Shows a QR code scanner and retrieves the scanned code.

• qr: The scanned QR code.
• isLoading: A boolean indicating whether the data is currently being loaded.
• error: Any error that occurred during the fetch.
• triggerScan(): Triggers the QR code scanner.
• closeScan(): Closes the QR code scanner.

useTawasalSDK

Provides access to general Tawasal SuperApp functionalities.

• haptic(): Triggers haptic feedback.
• open(url: string): Opens the specified URL.
• closeApp(): Closes the app.
• share({ text: string, url: string, imgUrl?: string, isCustomIos?: boolean }): Shares the specified content.

License

Distributed under the MIT License. See LICENSE for more information.