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: 5 days 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: 2024-11-19T21:06:02.000Z (about 1 month ago)
- Last Synced: 2024-12-09T10:48:22.366Z (17 days 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: 246 KB
- Stars: 204
- Watchers: 4
- Forks: 13
- Open Issues: 12
-
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#july-31-2024)
[](https://www.npmjs.com/package/vue-tg)
[](https://bundlephobia.com/result?p=vue-tg@latest)
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
showAlert('Hello!')" />
import { MainButton, useWebAppPopup } from 'vue-tg'
const { showAlert } = useWebAppPopup()
```
### Installation
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
### 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)
- [SettingsButton](https://vue-tg.deptyped.com/mini-apps.html#settingsbutton)
#### Mapping
| Field | Composable |
| ---------------------------- | ------------------------------------------------------------------------------------------------------- |
| initData | [useWebApp](https://vue-tg.deptyped.com/mini-apps.html#usewebapp) |
| initDataUnsafe | [useWebApp](https://vue-tg.deptyped.com/mini-apps.html#usewebapp) |
| version | [useWebApp](https://vue-tg.deptyped.com/mini-apps.html#usewebapp) |
| platform | [useWebApp](https://vue-tg.deptyped.com/mini-apps.html#usewebapp) |
| colorScheme | [useWebAppTheme](https://vue-tg.deptyped.com/mini-apps.html#usewebapptheme) |
| themeParams | [useWebAppTheme](https://vue-tg.deptyped.com/mini-apps.html#usewebapptheme) |
| isExpanded | [useWebAppViewport](https://vue-tg.deptyped.com/mini-apps.html#usewebappviewport) |
| viewportHeight | [useWebAppViewport](https://vue-tg.deptyped.com/mini-apps.html#usewebappviewport) |
| viewportStableHeight | [useWebAppViewport](https://vue-tg.deptyped.com/mini-apps.html#usewebappviewport) |
| headerColor | [useWebAppTheme](https://vue-tg.deptyped.com/mini-apps.html#usewebapptheme) |
| backgroundColor | [useWebAppTheme](https://vue-tg.deptyped.com/mini-apps.html#usewebapptheme) |
| isClosingConfirmationEnabled | [useWebAppClosingConfirmation](https://vue-tg.deptyped.com/mini-apps.html#usewebappclosingconfirmation) |
| isVerticalSwipesEnabled | [useWebAppViewport](https://vue-tg.deptyped.com/mini-apps.html#usewebappviewport) |
| BackButton | [useWebAppBackButton](https://vue-tg.deptyped.com/mini-apps.html#usewebappbackbutton) |
| MainButton | [useWebAppMainButton](https://vue-tg.deptyped.com/mini-apps.html#usewebappmainbutton) |
| HapticFeedback | [useWebAppHapticFeedback](https://vue-tg.deptyped.com/mini-apps.html#usewebapphapticfeedback) |
| BiometricManager | [useWebAppBiometricManager](https://vue-tg.deptyped.com/mini-apps.html#usewebappbiometricmanager) |
| isVersionAtLeast | [useWebApp](https://vue-tg.deptyped.com/mini-apps.html#usewebapp) |
| setHeaderColor | [useWebAppTheme](https://vue-tg.deptyped.com/mini-apps.html#usewebapptheme) |
| setBackgroundColor | [useWebAppTheme](https://vue-tg.deptyped.com/mini-apps.html#usewebapptheme) |
| enableClosingConfirmation | [useWebAppClosingConfirmation](https://vue-tg.deptyped.com/mini-apps.html#usewebappclosingconfirmation) |
| disableClosingConfirmation | [useWebAppClosingConfirmation](https://vue-tg.deptyped.com/mini-apps.html#usewebappclosingconfirmation) |
| enableVerticalSwipes | [useWebAppViewport](https://vue-tg.deptyped.com/mini-apps.html#usewebappviewport) |
| disableVerticalSwipes | [useWebAppViewport](https://vue-tg.deptyped.com/mini-apps.html#usewebappviewport) |
| onEvent | [useWebApp](https://vue-tg.deptyped.com/mini-apps.html#usewebapp) |
| offEvent | [Handled automagically 🪄](https://vue-tg.deptyped.com/mini-apps.html#managing-event-subscriptions) |
| sendData | [useWebApp](https://vue-tg.deptyped.com/mini-apps.html#usewebapp) |
| switchInlineQuery | [useWebAppNavigation](https://vue-tg.deptyped.com/mini-apps.html#usewebappnavigation) |
| openLink | [useWebAppNavigation](https://vue-tg.deptyped.com/mini-apps.html#usewebappnavigation) |
| openTelegramLink | [useWebAppNavigation](https://vue-tg.deptyped.com/mini-apps.html#usewebappnavigation) |
| openInvoice | [useWebAppNavigation](https://vue-tg.deptyped.com/mini-apps.html#usewebappnavigation) |
| shareToStory | [useWebAppShare](https://vue-tg.deptyped.com/mini-apps.html#usewebappshare) |
| showPopup | [useWebAppPopup](https://vue-tg.deptyped.com/mini-apps.html#usewebapppopup) |
| showAlert | [useWebAppPopup](https://vue-tg.deptyped.com/mini-apps.html#usewebapppopup) |
| showConfirm | [useWebAppPopup](https://vue-tg.deptyped.com/mini-apps.html#usewebapppopup) |
| showScanQrPopup | [useWebAppQrScanner](https://vue-tg.deptyped.com/mini-apps.html#usewebappqrscanner) |
| closeScanQrPopup | [useWebAppQrScanner](https://vue-tg.deptyped.com/mini-apps.html#usewebappqrscanner) |
| readTextFromClipboard | [useWebAppClipboard](https://vue-tg.deptyped.com/mini-apps.html#usewebappclipboard) |
| requestWriteAccess | [useWebAppRequests](https://vue-tg.deptyped.com/mini-apps.html#usewebapprequests) |
| requestContact | [useWebAppRequests](https://vue-tg.deptyped.com/mini-apps.html#usewebapprequests) |
| ready | [useWebApp](https://vue-tg.deptyped.com/mini-apps.html#usewebapp) |
| expand | [useWebAppViewport](https://vue-tg.deptyped.com/mini-apps.html#usewebappviewport) |
| close | [useWebApp](https://vue-tg.deptyped.com/mini-apps.html#usewebapp) |