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/vueor
yarn add @tawasal/vueUsage
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>
<button @click="openExternalUrl">Open URL</button>
<button @click="openAnotherApp">Open App</button>
</div>
</template>
<script setup>
import { useTawasalSDK } from '@tawasal/vue';
const { haptic, open, closeApp, share, openUrl, openApp, openChat, disablePullToRefresh } = useTawasalSDK();
function shareContent() {
share({
text: 'Check this out!',
url: 'https://example.com',
});
}
function openExternalUrl() {
openUrl('https://example.com');
}
function openAnotherApp() {
openApp('myapp://path', 'optional-tag');
}
</script>7. usePushToken
This hook fetches the push notification token for the current user.
Example:
<template>
<div>
<div v-if="isLoading">Loading...</div>
<div v-if="error">Error: {{ error.message }}</div>
<div v-if="pushToken">Push Token: {{ pushToken }}</div>
</div>
</template>
<script setup>
import { usePushToken } from '@tawasal/vue';
const { pushToken, error, isLoading } = usePushToken();
</script>8. useUserFlags
This hook fetches user flags/settings.
Example:
<template>
<div>
<div v-if="isLoading">Loading...</div>
<div v-if="error">Error: {{ error.message }}</div>
<div v-if="flags">User Flags: {{ flags }}</div>
</div>
</template>
<script setup>
import { useUserFlags } from '@tawasal/vue';
const { flags, error, isLoading } = useUserFlags();
</script>9. useWalletBalance
This hook fetches the user’s wallet balance.
Example:
<template>
<div>
<button @click="refresh">Refresh Balance</button>
<div v-if="isLoading">Loading...</div>
<div v-if="error">Error: {{ error.message }}</div>
<div v-if="balance">Balance: {{ balance }}</div>
</div>
</template>
<script setup>
import { useWalletBalance } from '@tawasal/vue';
const { balance, error, isLoading, refresh } = useWalletBalance();
</script>10. useWalletTransactions
This hook fetches the user’s wallet transactions.
Example:
<template>
<div>
<button @click="refresh">Refresh Transactions</button>
<div v-if="isLoading">Loading...</div>
<div v-if="error">Error: {{ error.message }}</div>
<ul v-if="transactions">
<li v-for="(transaction, index) in transactions" :key="index">
{{ transaction }}
</li>
</ul>
</div>
</template>
<script setup>
import { useWalletTransactions } from '@tawasal/vue';
const { transactions, error, isLoading, refresh } = useWalletTransactions();
</script>11. useUserChannels
This hook fetches the user’s channels.
Example:
<template>
<div>
<button @click="refresh">Refresh Channels</button>
<div v-if="isLoading">Loading...</div>
<div v-if="error">Error: {{ error.message }}</div>
<ul v-if="channels">
<li v-for="channel in channels" :key="channel.id">
{{ channel.name }}
</li>
</ul>
</div>
</template>
<script setup>
import { useUserChannels } from '@tawasal/vue';
const { channels, error, isLoading, refresh } = useUserChannels();
</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(pressure?: 'light' | 'medium' | 'heavy' | 'soft' | 'rigid'): Triggers haptic feedback.open(destination: Destination): Opens a specific destination within the app.closeApp(): Closes the app.share({ text: string, url: string, imgUrl?: string, isCustomIos?: boolean }): Shares the specified content.openUrl(url: string): Opens a URL in the browser.openApp(appUrl: string, tag?: string): Opens another app.openChat(userIdOrNickname: number | string): Opens a chat with a specific user.disablePullToRefresh(disabled: boolean): Controls the pull-to-refresh feature.
usePushToken
Fetches the push notification token for the current user.
pushToken: The push notification token.error: Any error that occurred during the fetch.isLoading: A boolean indicating whether the data is currently being loaded.
useUserFlags
Fetches user flags/settings.
flags: The user’s flags/settings.error: Any error that occurred during the fetch.isLoading: A boolean indicating whether the data is currently being loaded.
useWalletBalance
Fetches the user’s wallet balance.
balance: The wallet balance.error: Any error that occurred during the fetch.isLoading: A boolean indicating whether the data is currently being loaded.refresh(): Refreshes the wallet balance.
useWalletTransactions
Fetches the user’s wallet transactions.
transactions: An array of wallet transactions.error: Any error that occurred during the fetch.isLoading: A boolean indicating whether the data is currently being loaded.refresh(): Refreshes the wallet transactions.
useUserChannels
Fetches the user’s channels.
channels: An array of user channels.error: Any error that occurred during the fetch.isLoading: A boolean indicating whether the data is currently being loaded.refresh(): Refreshes the user channels.
License
Distributed under the MIT License. See LICENSE for more information.