Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deptyped/vue-telegram
Telegram integration for Vue
https://github.com/deptyped/vue-telegram
telegram telegram-bot telegram-mini-apps telegram-web-app telegram-widget vue vue-components vue-composable vue-composition-api vue3 widgets
Last synced: 1 day ago
JSON representation
Telegram integration for Vue
- Host: GitHub
- URL: https://github.com/deptyped/vue-telegram
- Owner: deptyped
- License: mit
- Created: 2023-05-05T13:47:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-24T01:16:24.000Z (3 days ago)
- Last Synced: 2025-01-26T00:02:08.476Z (1 day ago)
- Topics: telegram, telegram-bot, telegram-mini-apps, telegram-web-app, telegram-widget, vue, vue-components, vue-composable, vue-composition-api, vue3, widgets
- Language: TypeScript
- Homepage: https://vue-tg.deptyped.com
- Size: 432 KB
- Stars: 220
- Watchers: 5
- Forks: 14
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## `vue-tg` - Telegram integration for Vue
[](https://vue-tg.deptyped.com/)
[](https://core.telegram.org/bots/webapps#november-17-2024)
[](https://www.npmjs.com/package/vue-tg)
A lightweight package for seamless integration of [Telegram Mini Apps](https://core.telegram.org/bots/webapps) and [Telegram Widgets](https://core.telegram.org/widgets) features.
### Usage Example
```vue
popup.showAlert('Hello!')" />
import { MainButton } from 'vue-tg'
import { usePopup } from 'vue-tg/latest'
const popup = usePopup()
```
### Installation
Install package:
```bash
npm i vue-tg@beta
```
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
### Instructions
- [Global Aliases](https://vue-tg.deptyped.com/installation.html#global-aliases)
- [Using with Nuxt 3](https://vue-tg.deptyped.com/installation.html#using-with-nuxt-3)
### Widgets
- [Official Telegram Widgets Documentation](https://core.telegram.org/widgets)
- [Widgets Documentation](https://vue-tg.deptyped.com/widgets.html)
#### Components
- [ShareWidget](https://vue-tg.deptyped.com/widgets.html#share-widget)
- [PostWidget](https://vue-tg.deptyped.com/widgets.html#post-widget)
- [LoginWidget](https://vue-tg.deptyped.com/widgets.html#login-widget)
- [DiscussionWidget](https://vue-tg.deptyped.com/widgets.html#discussion-widget)
### Mini Apps
- [Official Telegram Mini Apps Documentation](https://core.telegram.org/bots/webapps#initializing-mini-apps)
- [Mini Apps Documentation](https://vue-tg.deptyped.com/mini-apps.html)
- [Field Mapping](https://vue-tg.deptyped.com/mini-apps.html#field-mapping)
- [Event Handling](https://vue-tg.deptyped.com/mini-apps.html#event-handling)
#### Components
- [Alert](https://vue-tg.deptyped.com/mini-apps.html#alert)
- [BackButton](https://vue-tg.deptyped.com/mini-apps.html#backbutton)
- [BiometricManager](https://vue-tg.deptyped.com/mini-apps.html#biometricmanager)
- [ClosingConfirmation](https://vue-tg.deptyped.com/mini-apps.html#closingconfirmation)
- [Confirm](https://vue-tg.deptyped.com/mini-apps.html#confirm)
- [ExpandedViewport](https://vue-tg.deptyped.com/mini-apps.html#expandedviewport)
- [MainButton](https://vue-tg.deptyped.com/mini-apps.html#mainbutton)
- [Popup](https://vue-tg.deptyped.com/mini-apps.html#popup)
- [ScanQr](https://vue-tg.deptyped.com/mini-apps.html#scanqr)
- [SecondaryButton](https://vue-tg.deptyped.com/mini-apps.html#secondarybutton)
- [SettingsButton](https://vue-tg.deptyped.com/mini-apps.html#settingsbutton)
#### Mapping
| Field | Composable |
| ---------------------------- | ------------------------------------------------------------------------------------------------------- |
| initData | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| initDataUnsafe | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| version | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| platform | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| colorScheme | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme) |
| themeParams | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme) |
| isActive | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| isExpanded | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| viewportHeight | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| viewportStableHeight | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| headerColor | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme) |
| backgroundColor | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme) |
| isClosingConfirmationEnabled | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| isVerticalSwipesEnabled | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| isFullscreen | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| isOrientationLocked | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| safeAreaInset | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| contentSafeAreaInset | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| BackButton | [useBackButton](https://vue-tg.deptyped.com/mini-apps.html#usebackbutton) |
| MainButton | [useMainButton](https://vue-tg.deptyped.com/mini-apps.html#usemainbutton) |
| HapticFeedback | [useHapticFeedback](https://vue-tg.deptyped.com/mini-apps.html#usehapticfeedback) |
| BiometricManager | [useBiometricManager](https://vue-tg.deptyped.com/mini-apps.html#usebiometricmanager) |
| Accelerometer | [useAccelerometer](https://vue-tg.deptyped.com/mini-apps.html#useaccelerometer) |
| DeviceOrientation | [useDeviceOrientation](https://vue-tg.deptyped.com/mini-apps.html#usedeviceorientation) |
| Gyroscope | [useGyroscope](https://vue-tg.deptyped.com/mini-apps.html#usegyroscope) |
| LocationManager | [useLocationManager](https://vue-tg.deptyped.com/mini-apps.html#uselocationmanager) |
| isVersionAtLeast | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| setHeaderColor | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme) |
| setBackgroundColor | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme) |
| setBottomBarColor | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme) |
| enableClosingConfirmation | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| disableClosingConfirmation | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| enableVerticalSwipes | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| disableVerticalSwipes | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| requestFullscreen | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| exitFullscreen | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| lockOrientation | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| unlockOrientation | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| addToHomeScreen | [useHomeScreen](https://vue-tg.deptyped.com/mini-apps.html#usehomescreen) |
| checkHomeScreenStatus | [useHomeScreen](https://vue-tg.deptyped.com/mini-apps.html#usehomescreen) |
| onEvent | [Event Handling](https://vue-tg.deptyped.com/mini-apps.html#event-handling) |
| offEvent | [Managing Event Subscriptions](https://vue-tg.deptyped.com/mini-apps.html#managing-event-subscriptions) |
| sendData | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| switchInlineQuery | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| openLink | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| openTelegramLink | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| openInvoice | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| shareToStory | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| shareMessage | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| setEmojiStatus | [useEmojiStatus](https://vue-tg.deptyped.com/mini-apps.html#useemojistatus) |
| requestEmojiStatusAccess | [useEmojiStatus](https://vue-tg.deptyped.com/mini-apps.html#useemojistatus) |
| downloadFile | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| showPopup | [usePopup](https://vue-tg.deptyped.com/mini-apps.html#usepopup) |
| showAlert | [usePopup](https://vue-tg.deptyped.com/mini-apps.html#usepopup) |
| showConfirm | [usePopup](https://vue-tg.deptyped.com/mini-apps.html#usepopup) |
| showScanQrPopup | [useQrScanner](https://vue-tg.deptyped.com/mini-apps.html#useqrscanner) |
| closeScanQrPopup | [useQrScanner](https://vue-tg.deptyped.com/mini-apps.html#useqrscanner) |
| readTextFromClipboard | [useClipboard](https://vue-tg.deptyped.com/mini-apps.html#useclipboard) |
| requestWriteAccess | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| requestContact | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| ready | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |
| expand | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport) |
| close | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp) |