vue-tg

vue-tg - Telegram integration for Vue


A lightweight package for seamless integration of Telegram Mini Apps and Telegram Widgets features.

$3

``vue



`

$3

Install package:

`bash
npm i vue-tg
`

To connect your Mini App to the Telegram client, place the script telegram-web-app.js in the tag before any other scripts, using this code:

`html

`

- Documentation
- Field Mapping
- Event Handling

Features

$3

In addition to static typing, the library enforces runtime feature support checks to prevent errors on clients with outdated Bot API support.

`ts
const deviceStorage = useDeviceStorage()

// ❌ Type error:
// 'getItem' may not be available — DeviceStorage was introduced in Bot API 9.0
deviceStorage.getItem('token')

if (deviceStorage.isVersionAtLeast('9.0')) {
// ✅ Safe to use
deviceStorage.getItem('token')
}
`

You can opt out of these checks or define a minimum required Bot API version, which disables warnings for features introduced up to that version. For details, see the versioning section in the documentation.

$3

You can react to changes using the standard Vue reactivity pattern:

`ts
const miniApp = useMiniApp()

watch(miniApp.isActive, (isActive) => {
if (isActive)
startUpdating()
else
stopUpdating()
})
`

The isActive field is reactive, so it can be used in watch, computed, or any other reactive context.

In the documentation, all reactive fields are marked with reactive tag.

$3

You can use async/await to work with methods — no need to nest callbacks.

`ts
const miniApp = useMiniApp()
const qrScanner = useQrScanner()
const popup = usePopup()

// Old callback-style flow
qrScanner.show({ text: 'Scan URL' }, (url) => {
popup.showConfirm(Open ${url}?, (ok) => {
if (ok) {
miniApp.openLink(url)
}
})
})

// The modern way — flat and readable
const url = await qrScanner.show({ text: 'Scan URL' })
const ok = await popup.showConfirm(Open ${url}?)
if (ok) {
miniApp.openLink(url)
}
``

Methods that support async execution are marked with async tag in the documentation.
Callback-style usage is still available for compatibility.

$3

Available components:

- Alert
- BackButton
- BiometricManager
- ClosingConfirmation
- Confirm
- ExpandedViewport
- FullscreenViewport
- MainButton
- Popup
- ScanQr
- SecondaryButton
- SettingsButton

$3

- Share Widget
- Post Widget
- Login Widget
- Discussion Widget

Documentation

$3

- Global Registration of Components
- Using with Nuxt 3

#### Mapping

| 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 |
| SecondaryButton | useSecondaryButton |
| SettingsButton | useSettingsButton |
| HapticFeedback | useHapticFeedback |
| CloudStorage | useCloudStorage |
| BiometricManager | useBiometricManager |
| Accelerometer | useAccelerometer |
| DeviceOrientation | useDeviceOrientation |
| Gyroscope | useGyroscope |
| LocationManager | useLocationManager |
| DeviceStorage | useDeviceStorage |
| SecureStorage | useSecureStorage |
| 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 |
| hideKeyboard | useMiniApp |
| showPopup | usePopup |
| showAlert | usePopup |
| showConfirm | usePopup |
| showScanQrPopup | useQrScanner |
| closeScanQrPopup | useQrScanner |
| readTextFromClipboard | useClipboard |
| requestWriteAccess | useMiniApp |
| requestContact | useMiniApp |
| ready | useMiniApp |
| expand | useViewport |
| close | useMiniApp |