A lightweight Vue.js library for seamless integration of Telegram Mini Apps and Widgets with type safety and reactivity.
vue-tg is a Vue.js library that enables developers to build Telegram Mini Apps and integrate Telegram Widgets into their Vue applications. It provides a set of composables, components, and utilities to interact with the Telegram Bot API, handling features like viewport management, buttons, popups, and device APIs. It solves the problem of manually integrating and managing the Telegram Web App script and its event-driven API within a reactive Vue context.
Vue.js developers building interactive applications (Mini Apps) to run within the Telegram messenger, or web developers needing to embed Telegram widgets (login, share, posts) into their Vue-based sites.
Developers choose vue-tg for its first-class Vue integration, offering reactive state management, type safety with runtime version checks, and a modern async/await API that simplifies working with Telegram's callback-based methods, significantly improving developer experience and code maintainability.
Telegram integration for Vue
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Enforces runtime feature support checks to prevent errors on clients with outdated Bot API versions, as shown in the README's deviceStorage example, with optional version requirement configuration.
Exposes Telegram client state like isActive as reactive Vue refs, enabling direct use with watch and computed properties, which integrates naturally with Vue's ecosystem.
Provides async/await interfaces for methods like showing popups and scanning QR codes, reducing callback nesting and improving code readability, as demonstrated in the README's comparison.
Offers Vue components for common UI elements such as MainButton, BackButton, and Popup, mirroring Telegram's native components and simplifying UI development.
Tightly coupled to Telegram's Bot API and Mini App environment; changes in Telegram's API could break functionality, and it's unusable outside Telegram, limiting portability.
Requires manually adding Telegram's web-app script in the HTML head before other scripts, which can be cumbersome in modern build tools or SSR setups like Nuxt.
Exclusively designed for Vue.js, so developers using other frameworks must find alternatives or build custom integrations, reducing flexibility for mixed tech stacks.