Skip to content

deptyped/vue-telegram

Repository files navigation

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

Field Composable
initData useWebApp
initDataUnsafe useWebApp
version useWebApp
platform useWebApp
colorScheme useWebAppTheme
themeParams useWebAppTheme
isExpanded useWebAppViewport
viewportHeight useWebAppViewport
viewportStableHeight useWebAppViewport
headerColor useWebAppTheme
backgroundColor useWebAppTheme
isClosingConfirmationEnabled useWebAppClosingConfirmation
isVerticalSwipesEnabled useWebAppViewport
BackButton useWebAppBackButton
MainButton useWebAppMainButton
HapticFeedback useWebAppHapticFeedback
BiometricManager useWebAppBiometricManager
isVersionAtLeast useWebApp
setHeaderColor useWebAppTheme
setBackgroundColor useWebAppTheme
enableClosingConfirmation useWebAppClosingConfirmation
disableClosingConfirmation useWebAppClosingConfirmation
enableVerticalSwipes useWebAppViewport
disableVerticalSwipes useWebAppViewport
onEvent useWebApp
offEvent Handled automagically 🪄
sendData useWebApp
switchInlineQuery useWebAppNavigation
openLink useWebAppNavigation
openTelegramLink useWebAppNavigation
openInvoice useWebAppNavigation
shareToStory useWebAppShare
showPopup useWebAppPopup
showAlert useWebAppPopup
showConfirm useWebAppPopup
showScanQrPopup useWebAppQrScanner
closeScanQrPopup useWebAppQrScanner
readTextFromClipboard useWebAppClipboard
requestWriteAccess useWebAppRequests
requestContact useWebAppRequests
ready useWebApp
expand useWebAppViewport
close useWebApp