{"id":16370285,"url":"https://github.com/deptyped/vue-telegram","last_synced_at":"2025-05-15T16:04:44.129Z","repository":{"id":162134485,"uuid":"636722493","full_name":"deptyped/vue-telegram","owner":"deptyped","description":"Telegram integration for Vue","archived":false,"fork":false,"pushed_at":"2025-02-16T23:03:48.000Z","size":518,"stargazers_count":241,"open_issues_count":17,"forks_count":16,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-13T10:04:28.401Z","etag":null,"topics":["telegram","telegram-bot","telegram-mini-apps","telegram-web-app","telegram-widget","vue","vue-components","vue-composable","vue-composition-api","vue3","widgets"],"latest_commit_sha":null,"homepage":"https://vue-tg.deptyped.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deptyped.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-05T13:47:34.000Z","updated_at":"2025-05-09T17:59:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"52ae6cf8-c73c-4843-8e51-6f0aaff3d81f","html_url":"https://github.com/deptyped/vue-telegram","commit_stats":{"total_commits":70,"total_committers":4,"mean_commits":17.5,"dds":0.05714285714285716,"last_synced_commit":"88be70c5e90b3aed95e2ac3d2b0ff7bfa295af08"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deptyped%2Fvue-telegram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deptyped%2Fvue-telegram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deptyped%2Fvue-telegram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deptyped%2Fvue-telegram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deptyped","download_url":"https://codeload.github.com/deptyped/vue-telegram/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374409,"owners_count":22060610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["telegram","telegram-bot","telegram-mini-apps","telegram-web-app","telegram-widget","vue","vue-components","vue-composable","vue-composition-api","vue3","widgets"],"created_at":"2024-10-11T03:04:33.301Z","updated_at":"2025-05-15T16:04:44.071Z","avatar_url":"https://github.com/deptyped.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["Integrations"],"readme":"## `vue-tg` - Telegram integration for Vue\n\n[![docs](https://img.shields.io/badge/Documentation-gray?style=flat)](https://vue-tg.deptyped.com/)\n[![version](https://img.shields.io/badge/Bot%20API-8.0-478be6?logo=telegram\u0026style=flat)](https://core.telegram.org/bots/webapps#november-17-2024)\n[![downloads](https://img.shields.io/npm/dm/vue-tg?label=Downloads\u0026logo=npm\u0026style=flat\u0026color=478be6)](https://www.npmjs.com/package/vue-tg)\n\nA lightweight package for seamless integration of [Telegram Mini Apps](https://core.telegram.org/bots/webapps) and [Telegram Widgets](https://core.telegram.org/widgets) features.\n\n### Usage Example\n\n```vue\n\u003ctemplate\u003e\n  \u003cMainButton text=\"Open alert\" @click=\"() =\u003e popup.showAlert('Hello!')\" /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\nimport { MainButton } from 'vue-tg'\nimport { usePopup } from 'vue-tg/latest'\n\nconst popup = usePopup()\n\u003c/script\u003e\n```\n\n### Installation\n\nInstall package:\n\n```bash\nnpm i vue-tg@beta\n```\n\nTo connect your Mini App to the Telegram client, place the script `telegram-web-app.js` in the `\u003chead\u003e` tag before any other scripts, using this code:\n\n```html\n\u003cscript src=\"https://telegram.org/js/telegram-web-app.js\"\u003e\u003c/script\u003e\n```\n\n## Documentation\n\n### Instructions\n\n- [Global Aliases](https://vue-tg.deptyped.com/installation.html#global-aliases)\n- [Using with Nuxt 3](https://vue-tg.deptyped.com/installation.html#using-with-nuxt-3)\n\n### Widgets\n\n- [Official Telegram Widgets Documentation](https://core.telegram.org/widgets)\n- [Widgets Documentation](https://vue-tg.deptyped.com/widgets.html)\n\n#### Components\n\n- [ShareWidget](https://vue-tg.deptyped.com/widgets.html#share-widget)\n- [PostWidget](https://vue-tg.deptyped.com/widgets.html#post-widget)\n- [LoginWidget](https://vue-tg.deptyped.com/widgets.html#login-widget)\n- [DiscussionWidget](https://vue-tg.deptyped.com/widgets.html#discussion-widget)\n\n### Mini Apps\n\n- [Official Telegram Mini Apps Documentation](https://core.telegram.org/bots/webapps#initializing-mini-apps)\n- [Mini Apps Documentation](https://vue-tg.deptyped.com/mini-apps.html)\n- [Field Mapping](https://vue-tg.deptyped.com/mini-apps.html#field-mapping)\n- [Event Handling](https://vue-tg.deptyped.com/mini-apps.html#event-handling)\n\n#### Components\n\n- [Alert](https://vue-tg.deptyped.com/mini-apps.html#alert)\n- [BackButton](https://vue-tg.deptyped.com/mini-apps.html#backbutton)\n- [BiometricManager](https://vue-tg.deptyped.com/mini-apps.html#biometricmanager)\n- [ClosingConfirmation](https://vue-tg.deptyped.com/mini-apps.html#closingconfirmation)\n- [Confirm](https://vue-tg.deptyped.com/mini-apps.html#confirm)\n- [ExpandedViewport](https://vue-tg.deptyped.com/mini-apps.html#expandedviewport)\n- [MainButton](https://vue-tg.deptyped.com/mini-apps.html#mainbutton)\n- [Popup](https://vue-tg.deptyped.com/mini-apps.html#popup)\n- [ScanQr](https://vue-tg.deptyped.com/mini-apps.html#scanqr)\n- [SecondaryButton](https://vue-tg.deptyped.com/mini-apps.html#secondarybutton)\n- [SettingsButton](https://vue-tg.deptyped.com/mini-apps.html#settingsbutton)\n\n#### Mapping\n\n| Field                        | Composable                                                                                              |\n| ---------------------------- | ------------------------------------------------------------------------------------------------------- |\n| initData                     | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| initDataUnsafe               | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| version                      | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| platform                     | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| colorScheme                  | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme)                                         |\n| themeParams                  | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme)                                         |\n| isActive                     | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| isExpanded                   | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| viewportHeight               | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| viewportStableHeight         | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| headerColor                  | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme)                                         |\n| backgroundColor              | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme)                                         |\n| isClosingConfirmationEnabled | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| isVerticalSwipesEnabled      | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| isFullscreen                 | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| isOrientationLocked          | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| safeAreaInset                | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| contentSafeAreaInset         | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| BackButton                   | [useBackButton](https://vue-tg.deptyped.com/mini-apps.html#usebackbutton)                               |\n| MainButton                   | [useMainButton](https://vue-tg.deptyped.com/mini-apps.html#usemainbutton)                               |\n| HapticFeedback               | [useHapticFeedback](https://vue-tg.deptyped.com/mini-apps.html#usehapticfeedback)                       |\n| BiometricManager             | [useBiometricManager](https://vue-tg.deptyped.com/mini-apps.html#usebiometricmanager)                   |\n| Accelerometer                | [useAccelerometer](https://vue-tg.deptyped.com/mini-apps.html#useaccelerometer)                         |\n| DeviceOrientation            | [useDeviceOrientation](https://vue-tg.deptyped.com/mini-apps.html#usedeviceorientation)                 |\n| Gyroscope                    | [useGyroscope](https://vue-tg.deptyped.com/mini-apps.html#usegyroscope)                                 |\n| LocationManager              | [useLocationManager](https://vue-tg.deptyped.com/mini-apps.html#uselocationmanager)                     |\n| isVersionAtLeast             | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| setHeaderColor               | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme)                                         |\n| setBackgroundColor           | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme)                                         |\n| setBottomBarColor            | [useTheme](https://vue-tg.deptyped.com/mini-apps.html#usetheme)                                         |\n| enableClosingConfirmation    | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| disableClosingConfirmation   | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| enableVerticalSwipes         | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| disableVerticalSwipes        | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| requestFullscreen            | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| exitFullscreen               | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| lockOrientation              | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| unlockOrientation            | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| addToHomeScreen              | [useHomeScreen](https://vue-tg.deptyped.com/mini-apps.html#usehomescreen)                               |\n| checkHomeScreenStatus        | [useHomeScreen](https://vue-tg.deptyped.com/mini-apps.html#usehomescreen)                               |\n| onEvent                      | [Event Handling](https://vue-tg.deptyped.com/mini-apps.html#event-handling)                             |\n| offEvent                     | [Managing Event Subscriptions](https://vue-tg.deptyped.com/mini-apps.html#managing-event-subscriptions) |\n| sendData                     | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| switchInlineQuery            | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| openLink                     | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| openTelegramLink             | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| openInvoice                  | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| shareToStory                 | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| shareMessage                 | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| setEmojiStatus               | [useEmojiStatus](https://vue-tg.deptyped.com/mini-apps.html#useemojistatus)                             |\n| requestEmojiStatusAccess     | [useEmojiStatus](https://vue-tg.deptyped.com/mini-apps.html#useemojistatus)                             |\n| downloadFile                 | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| showPopup                    | [usePopup](https://vue-tg.deptyped.com/mini-apps.html#usepopup)                                         |\n| showAlert                    | [usePopup](https://vue-tg.deptyped.com/mini-apps.html#usepopup)                                         |\n| showConfirm                  | [usePopup](https://vue-tg.deptyped.com/mini-apps.html#usepopup)                                         |\n| showScanQrPopup              | [useQrScanner](https://vue-tg.deptyped.com/mini-apps.html#useqrscanner)                                 |\n| closeScanQrPopup             | [useQrScanner](https://vue-tg.deptyped.com/mini-apps.html#useqrscanner)                                 |\n| readTextFromClipboard        | [useClipboard](https://vue-tg.deptyped.com/mini-apps.html#useclipboard)                                 |\n| requestWriteAccess           | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| requestContact               | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| ready                        | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n| expand                       | [useViewport](https://vue-tg.deptyped.com/mini-apps.html#useviewport)                                   |\n| close                        | [useMiniApp](https://vue-tg.deptyped.com/mini-apps.html#useminiapp)                                     |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeptyped%2Fvue-telegram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeptyped%2Fvue-telegram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeptyped%2Fvue-telegram/lists"}