{"id":12603,"library":"vue-tg","title":"Vue Telegram Integration Library","description":"vue-tg is a lightweight package designed for seamless integration of Telegram Mini Apps and Telegram Widgets into Vue 3 applications. Currently at version 0.10.0, it maintains an active release cadence, frequently updating to support the latest Telegram Bot API versions, such as 9.5. Key differentiators include its use of Vue 3 composables for reactive interaction with the Telegram client, full TypeScript type safety, and an innovative API that enforces runtime feature support checks to prevent errors on clients with outdated Bot API versions. It also provides async/await support for methods, eliminating callback hell, and includes ready-to-use Vue components for common Mini App UI elements like MainButton and BackButton, streamlining development workflows.","status":"active","version":"0.10.0","language":"javascript","source_language":"en","source_url":"https://github.com/deptyped/vue-telegram","tags":["javascript","vue3","composable","telegram","vite","typescript"],"install":[{"cmd":"npm install vue-tg","lang":"bash","label":"npm"},{"cmd":"yarn add vue-tg","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-tg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 3 applications, as vue-tg provides Vue composables and components.","package":"vue","optional":false}],"imports":[{"note":"MainButton is a named component export. Attempting a default import will fail.","wrong":"import MainButton from 'vue-tg'","symbol":"MainButton","correct":"import { MainButton } from 'vue-tg'"},{"note":"Some composables, like `usePopup`, are imported from the 'vue-tg/latest' path to access the most recent API features. Importing from the base 'vue-tg' package will not work for these.","wrong":"import { usePopup } from 'vue-tg'","symbol":"usePopup","correct":"import { usePopup } from 'vue-tg/latest'"},{"note":"This composable is a named export. The library primarily supports ES Modules; CommonJS `require()` syntax is not supported for module imports.","wrong":"const useDeviceStorage = require('vue-tg')","symbol":"useDeviceStorage","correct":"import { useDeviceStorage } from 'vue-tg'"},{"note":"The core Telegram Web App script is an external dependency and must be included globally in the `` tag before any other scripts for `vue-tg` to function correctly. This is not a standard JavaScript module import.","symbol":"Telegram Web App Script","correct":""}],"quickstart":{"code":"\n popup.showAlert('Hello!')\" />\n\n\n","lang":"typescript","description":"This example demonstrates how to use the `MainButton` component to trigger an alert via the `usePopup` composable within a Vue 3 Telegram Mini App."},"warnings":[{"fix":"Always use `isVersionAtLeast()` checks (e.g., `deviceStorage.isVersionAtLeast('9.0')`) before utilizing features, or configure a minimum required Bot API version globally as per the documentation to disable warnings.","message":"Since version 0.9.0, `vue-tg` introduces a new API that enforces runtime feature support checks. Directly calling Telegram Mini App features without verifying client Bot API version support can lead to runtime errors or TypeScript type errors on clients with outdated APIs.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Add `` to your `index.html`'s `` section.","message":"The core Telegram Web App JavaScript SDK (`telegram-web-app.js`) is not bundled with `vue-tg`. It is an essential external dependency that must be explicitly included in your HTML's `` tag before your application scripts.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Consult the official documentation for each specific composable to ensure the correct import path is used. Pay close attention to examples like `import { usePopup } from 'vue-tg/latest'`.","message":"Certain composables, such as `usePopup`, require importing from the non-standard `vue-tg/latest` subpath, rather than directly from the base `vue-tg` package. Incorrect import paths will result in module resolution errors.","severity":"gotcha","affected_versions":">=0.9.0"},{"fix":"Maintain awareness of `vue-tg` release notes and Telegram Bot API updates. Regularly update the package and review your codebase for necessary adjustments, especially when upgrading to new major or minor versions.","message":"`vue-tg` frequently updates to support new Telegram Bot API versions. Developers should anticipate regular updates to the library and may need to adapt their code to leverage new features or accommodate changes in the underlying Telegram API paradigms.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Implement a version check before using the feature: `if (deviceStorage.isVersionAtLeast('9.0')) { deviceStorage.getItem('token') }`. Alternatively, configure a minimum required Bot API version globally if all target clients are known to support it.","cause":"Attempting to use a Telegram Mini App feature (e.g., `deviceStorage.getItem`) that was introduced in a newer Bot API version without a runtime version check, potentially targeting an older client that does not support it.","error":"Type error: 'getItem' may not be available — DeviceStorage was introduced in Bot API 9.0"},{"fix":"Verify that the import statement matches the exact path specified in the `vue-tg` documentation for the given symbol (e.g., `import { usePopup } from 'vue-tg/latest'`). Ensure your bundler supports subpath exports if applicable.","cause":"An attempt to import a symbol (e.g., `usePopup`) using an incorrect import path, or when the `/latest` subpath export is not properly configured or recognized by the module bundler.","error":"Module not found: Error: Can't resolve 'vue-tg/latest'"}],"ecosystem":"npm"}