A lightweight package for seamless integration of Telegram Mini Apps and Telegram Widgets features.
<template>
<MainButton text="Open alert" @click="() => popup.showAlert('Hello!')" />
</template>
<script lang="ts" setup>
import { MainButton } from 'vue-tg'
import { usePopup } from 'vue-tg/latest'
const popup = usePopup()
</script>Install package:
npm i vue-tg@betaTo 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>- Alert
- BackButton
- BiometricManager
- ClosingConfirmation
- Confirm
- ExpandedViewport
- MainButton
- Popup
- ScanQr
- SecondaryButton
- SettingsButton
| Field | Composable |
|---|---|
| initData | useMiniApp |
| initDataUnsafe | useMiniApp |
| version | useMiniApp |
| platform | useMiniApp |
| colorScheme | useTheme |
| themeParams | useTheme |
| isActive | useMiniApp |
| isExpanded | useViewport |
| viewportHeight | useViewport |
| viewportStableHeight | useViewport |
| headerColor | useTheme |
| backgroundColor | useTheme |
| isClosingConfirmationEnabled | useMiniApp |
| isVerticalSwipesEnabled | useViewport |
| isFullscreen | useViewport |
| isOrientationLocked | useViewport |
| safeAreaInset | useViewport |
| contentSafeAreaInset | useViewport |
| BackButton | useBackButton |
| MainButton | useMainButton |
| HapticFeedback | useHapticFeedback |
| BiometricManager | useBiometricManager |
| Accelerometer | useAccelerometer |
| DeviceOrientation | useDeviceOrientation |
| Gyroscope | useGyroscope |
| LocationManager | useLocationManager |
| isVersionAtLeast | useMiniApp |
| setHeaderColor | useTheme |
| setBackgroundColor | useTheme |
| setBottomBarColor | useTheme |
| enableClosingConfirmation | useMiniApp |
| disableClosingConfirmation | useMiniApp |
| enableVerticalSwipes | useViewport |
| disableVerticalSwipes | useViewport |
| requestFullscreen | useViewport |
| exitFullscreen | useViewport |
| lockOrientation | useViewport |
| unlockOrientation | useViewport |
| addToHomeScreen | useHomeScreen |
| checkHomeScreenStatus | useHomeScreen |
| onEvent | Event Handling |
| offEvent | Managing Event Subscriptions |
| sendData | useMiniApp |
| switchInlineQuery | useMiniApp |
| openLink | useMiniApp |
| openTelegramLink | useMiniApp |
| openInvoice | useMiniApp |
| shareToStory | useMiniApp |
| shareMessage | useMiniApp |
| setEmojiStatus | useEmojiStatus |
| requestEmojiStatusAccess | useEmojiStatus |
| downloadFile | useMiniApp |
| showPopup | usePopup |
| showAlert | usePopup |
| showConfirm | usePopup |
| showScanQrPopup | useQrScanner |
| closeScanQrPopup | useQrScanner |
| readTextFromClipboard | useClipboard |
| requestWriteAccess | useMiniApp |
| requestContact | useMiniApp |
| ready | useMiniApp |
| expand | useViewport |
| close | useMiniApp |