vue telegram
0.8.0
vue-tg - Telegram integration for Vue
A lightweight package for seamless integration of Telegram Mini Apps and Telegram Widgets features.
<script lang="ts" setup>
import { MainButton, useWebAppPopup } from 'vue-tg'
const { showAlert } = useWebAppPopup()
</script>
<template>
<MainButton text="Open alert" @click="() => showAlert('Hello!')" />
</template>Install package:
npm i vue-tgTo connect your Mini App to the Telegram client, place the script telegram-web-app.js in the <head> tag before any other scripts, using this code:
<script src="https://telegram.org/js/telegram-web-app.js"></script>| Field | Composable |
|---|---|
| initData | useWebApp |
| initDataUnsafe | useWebApp |
| version | useWebApp |
| platform | useWebApp |
| colorScheme | useWebAppTheme |
| themeParams | useWebAppTheme |
| isExpanded | useWebAppViewport |
| viewportHeight | useWebAppViewport |
| viewportStableHeight | useWebAppViewport |
| headerColor | useWebAppTheme |
| backgroundColor | useWebAppTheme |
| isClosingConfirmationEnabled | useWebAppClosingConfirmation |
| isVerticalSwipesEnabled | useWebAppViewport |
| BackButton | useWebAppBackButton |
| MainButton | useWebAppMainButton |
| HapticFeedback | useWebAppHapticFeedback |
| BiometricManager | useWebAppBiometricManager |
| isVersionAtLeast | useWebApp |
| setHeaderColor | useWebAppTheme |
| setBackgroundColor | useWebAppTheme |
| enableClosingConfirmation | useWebAppClosingConfirmation |
| disableClosingConfirmation | useWebAppClosingConfirmation |
| enableVerticalSwipes | useWebAppViewport |
| disableVerticalSwipes | useWebAppViewport |
| onEvent | useWebApp |
| offEvent | Handled automagically ? |
| sendData | useWebApp |
| switchInlineQuery | useWebAppNavigation |
| openLink | useWebAppNavigation |
| openTelegramLink | useWebAppNavigation |
| openInvoice | useWebAppNavigation |
| shareToStory | useWebAppShare |
| showPopup | useWebAppPopup |
| showAlert | useWebAppPopup |
| showConfirm | useWebAppPopup |
| showScanQrPopup | useWebAppQrScanner |
| closeScanQrPopup | useWebAppQrScanner |
| readTextFromClipboard | useWebAppClipboard |
| requestWriteAccess | useWebAppRequests |
| requestContact | useWebAppRequests |
| ready | useWebApp |
| expand | useWebAppViewport |
| close | useWebApp |
