Home

Awesome

vue-tg - Telegram integration for Vue

docs version downloads size

A lightweight package for seamless integration of Telegram Mini Apps and Telegram Widgets features.

Usage Example

<template>
  <MainButton text="Open alert" @click="() => showAlert('Hello!')" />
</template>

<script lang="ts" setup>
import { MainButton, useWebAppPopup } from 'vue-tg'

const { showAlert } = useWebAppPopup()
</script>

Installation

Install package:

npm i vue-tg

To connect your Mini App to the Telegram client, place the script telegram-web-app.js in the <head> tag before any other scripts, using this code:

<script src="https://telegram.org/js/telegram-web-app.js"></script>

Documentation

Instructions

Widgets

Components

Mini Apps

Components

Mapping

FieldComposable
initDatauseWebApp
initDataUnsafeuseWebApp
versionuseWebApp
platformuseWebApp
colorSchemeuseWebAppTheme
themeParamsuseWebAppTheme
isExpandeduseWebAppViewport
viewportHeightuseWebAppViewport
viewportStableHeightuseWebAppViewport
headerColoruseWebAppTheme
backgroundColoruseWebAppTheme
isClosingConfirmationEnableduseWebAppClosingConfirmation
isVerticalSwipesEnableduseWebAppViewport
BackButtonuseWebAppBackButton
MainButtonuseWebAppMainButton
HapticFeedbackuseWebAppHapticFeedback
BiometricManageruseWebAppBiometricManager
isVersionAtLeastuseWebApp
setHeaderColoruseWebAppTheme
setBackgroundColoruseWebAppTheme
enableClosingConfirmationuseWebAppClosingConfirmation
disableClosingConfirmationuseWebAppClosingConfirmation
enableVerticalSwipesuseWebAppViewport
disableVerticalSwipesuseWebAppViewport
onEventuseWebApp
offEventHandled automagically 🪄
sendDatauseWebApp
switchInlineQueryuseWebAppNavigation
openLinkuseWebAppNavigation
openTelegramLinkuseWebAppNavigation
openInvoiceuseWebAppNavigation
shareToStoryuseWebAppShare
showPopupuseWebAppPopup
showAlertuseWebAppPopup
showConfirmuseWebAppPopup
showScanQrPopupuseWebAppQrScanner
closeScanQrPopupuseWebAppQrScanner
readTextFromClipboarduseWebAppClipboard
requestWriteAccessuseWebAppRequests
requestContactuseWebAppRequests
readyuseWebApp
expanduseWebAppViewport
closeuseWebApp