Mini Apps Integration

Official Telegram Mini Apps Documentation

Field Mapping

Field	Composable
initData	useMiniApp
initDataUnsafe	useMiniApp
version	useMiniApp
platform	useMiniApp
colorScheme	useTheme
themeParams	useTheme
isActive	useMiniApp
isExpanded	useViewport
viewportHeight	useViewport
viewportStableHeight	useViewport
headerColor	useTheme
backgroundColor	useTheme
isClosingConfirmationEnabled	useMiniApp
isVerticalSwipesEnabled	useViewport
isFullscreen	useViewport
isOrientationLocked	useViewport
safeAreaInset	useViewport
contentSafeAreaInset	useViewport
BackButton	useBackButton
MainButton	useMainButton
HapticFeedback	useHapticFeedback
BiometricManager	useBiometricManager
Accelerometer	useAccelerometer
DeviceOrientation	useDeviceOrientation
Gyroscope	useGyroscope
LocationManager	useLocationManager
isVersionAtLeast	useMiniApp
setHeaderColor	useTheme
setBackgroundColor	useTheme
setBottomBarColor	useTheme
enableClosingConfirmation	useMiniApp
disableClosingConfirmation	useMiniApp
enableVerticalSwipes	useViewport
disableVerticalSwipes	useViewport
requestFullscreen	useViewport
exitFullscreen	useViewport
lockOrientation	useViewport
unlockOrientation	useViewport
addToHomeScreen	useHomeScreen
checkHomeScreenStatus	useHomeScreen
onEvent	Event Handling
offEvent	Managing Event Subscriptions
sendData	useMiniApp
switchInlineQuery	useMiniApp
openLink	useMiniApp
openTelegramLink	useMiniApp
openInvoice	useMiniApp
shareToStory	useMiniApp
shareMessage	useMiniApp
setEmojiStatus	useEmojiStatus
requestEmojiStatusAccess	useEmojiStatus
downloadFile	useMiniApp
showPopup	usePopup
showAlert	usePopup
showConfirm	usePopup
showScanQrPopup	useQrScanner
closeScanQrPopup	useQrScanner
readTextFromClipboard	useClipboard
requestWriteAccess	useMiniApp
requestContact	useMiniApp
ready	useMiniApp
expand	useViewport
close	useMiniApp

Version Check

Features are introduced in specific versions of the Bot API, but users may not always use clients that support the latest version. Always verify version compatibility to ensure feature support.

For example, shareToStory was introduced in version 7.8:

import { useMiniApp } from 'vue-tg'

const miniApp = useMiniApp()

// error because this method was introduced in version 7.8
miniApp.shareToStory("https://url-to-image")
Cannot invoke an object which is possibly 'undefined'.

// first, ensure the version is 7.8 or higher
if (miniApp.isVersionAtLeast('7.8')) {
  miniApp.shareToStory("https://url-to-image") // no error
}

You can explicitly set the base version:

import { useMiniApp } from 'vue-tg/7.8'

const miniApp = useMiniApp()

miniApp.shareToStory("https://url-to-image") // no error

// error because this method was introduced in version 8.0
miniApp.downloadFile({ url: "https://url-to-image", file_name: "kitten.png" })
Cannot invoke an object which is possibly 'undefined'.

To skip all version checks, use latest, which is an alias for the latest version. This is useful for prototyping but unreliable for production. Use it only if you know what you are doing.

import { useMiniApp } from 'vue-tg/latest'

const miniApp = useMiniApp()

miniApp.shareToStory("https://url-to-image") // no error

Specifying the version every time can be tedious. For convenience, create a file telegram.ts with following content:

import { isVersionAtLeast } from 'vue-tg'
import { usePopup, useMiniApp } from 'vue-tg/latest'

const popup = usePopup()
const miniApp = useMiniApp()

if (!isVersionAtLeast('8.0')) {
  popup.showAlert(
    "Please update Telegram to the latest version!", 
    miniApp.close
  )
}

export * from 'vue-tg/8.0'

Now, you can import composables from telegram.ts and be sure that the client supports the specified version (8.0 in this case).

Event Handling

Event-handling functions follow the naming convention on<EventName> in camelCase. For example, the themeChanged event becomes onThemeChanged, and so on. A generic onEvent is also available if you prefer to use it instead.

import { onThemeChanged } from 'vue-tg'

onThemeChanged(() => {
  // handle theme update
})

You can also use composables for event handling:

import { useTheme } from 'vue-tg'

const theme = useTheme()

theme.onChange(() => {
  // handle theme update
})

Event Mapping

Event name	Handler	Composable Alias
activated	onActivated	useMiniApp → onActive
deactivated	onDeactivated	useMiniApp → onDeactive
themeChanged	onThemeChanged	useTheme → onChange
viewportChanged	onViewportChanged	useViewport → onChange
safeAreaChanged	onSafeAreaChanged	useViewport → onSafeAreaChange
contentSafeAreaChanged	onContentSafeAreaChanged	useViewport → onContentSafeAreaChange
mainButtonClicked	onMainButtonClicked	useMainButton → onClick
secondaryButtonClicked	onSecondaryButtonClicked	useSecondaryButton → onClick
backButtonClicked	onBackButtonClicked	useBackButton → onClick
settingsButtonClicked	onSettingsButtonClicked	useSettingsButton → onClick
invoiceClosed	onInvoiceClosed	useMiniApp → onInvoiceClose
popupClosed	onPopupClosed	usePopup → onClose
qrTextReceived	onQrTextReceived	useQrScanner → onScan
scanQrPopupClosed	onScanQrPopupClosed	useQrScanner → onClose
clipboardTextReceived	onClipboardTextReceived	useClipboard → onRead
writeAccessRequested	onWriteAccessRequested	useMiniApp → onWriteAccessRequest
contactRequested	onContactRequested	useMiniApp → onContactRequest
biometricManagerUpdated	onBiometricManagerUpdated	useBiometricManager → onManagerUpdate
biometricAuthRequested	onBiometricAuthRequested	useBiometricManager → onAuthRequest
biometricTokenUpdated	onBiometricTokenUpdated	useBiometricManager → onTokenUpdate
fullscreenChanged	onFullscreenChanged	useViewport → onFullscreenChange
fullscreenFailed	onFullscreenFailed	useViewport → onFullscreenFail
homeScreenAdded	onHomeScreenAdded	useHomeScreen → onShortcutAdd
homeScreenChecked	onHomeScreenChecked	useHomeScreen → onShortcutCheck
accelerometerStarted	onAccelerometerStarted	useAccelerometer → onStart
accelerometerStopped	onAccelerometerStopped	useAccelerometer → onStop
accelerometerChanged	onAccelerometerChanged	useAccelerometer → onChange
accelerometerFailed	onAccelerometerFailed	useAccelerometer → onFail
deviceOrientationStarted	onDeviceOrientationStarted	useDeviceOrientation → onStart
deviceOrientationStopped	onDeviceOrientationStopped	useDeviceOrientation → onStop
deviceOrientationChanged	onDeviceOrientationChanged	useDeviceOrientation → onChange
deviceOrientationFailed	onDeviceOrientationFailed	useDeviceOrientation → onFail
gyroscopeStarted	onGyroscopeStarted	useGyroscope → onStart
gyroscopeStopped	onGyroscopeStopped	useGyroscope → onStop
gyroscopeChanged	onGyroscopeChanged	useGyroscope → onChange
gyroscopeFailed	onGyroscopeFailed	useGyroscope → onFail
locationManagerUpdated	onLocationManagerUpdated	useLocationManager → onManagerUpdate
locationRequested	onLocationRequested	useLocationManager → onRequest
shareMessageSent	onShareMessageSent	useMiniApp → onShareMessageSent
shareMessageFailed	onShareMessageFailed	useMiniApp → onShareMessageFail
emojiStatusSet	onEmojiStatusSet	useEmojiStatus → onSet
emojiStatusAccessRequested	onEmojiStatusAccessRequested	useEmojiStatus → onAccessRequest
emojiStatusFailed	onEmojiStatusFailed	useEmojiStatus → onFail
fileDownloadRequested	onFileDownloadRequested	useMiniApp → onFileDownloadRequest

Managing Event Subscriptions

Event handlers automatically unsubscribe when the component unmounts. However, you can unsubscribe earlier if needed:

import { onThemeChanged } from 'vue-tg'

const handler = onThemeChanged(() => {
  // handle theme update
})

// unsubscribe
handler.off()

To disable automatic unsubscribing, set manual mode:

import { onThemeChanged } from 'vue-tg'

const handler = onThemeChanged(
  () => {
    // handle theme update
  },
  { manual: true },  
)

// unsubscribe
handler.off()

WARNING

In manual mode, you are responsible for managing the subscription. Improper management may lead to memory leaks or other issues.

Components

Alert Bot API 6.2+

A component that shows message in a simple alert with a 'Close' button when is rendered.

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

function handleAlertClose() {
  // ...
}
</script>

<template>
  <Alert message="Hello!" @close="handleAlertClose" />
</template>

Props

Name	Type	Required	Description
message	string	true	The message to be displayed in the body of the alert popup.

Events

Name	Type	Description
close	() => void	Emits when the opened popup is closed.

BackButton Bot API 6.1+

A component that enables the back button when is rendered.

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

function handleBackButton() {
  // ...
}
</script>

<template>
  <BackButton @click="handleBackButton" />
</template>

Props

Name	Type	Required	Description
visible	boolean	false	Shows whether the button is visible. Set to true by default.

Events

Name	Type	Description
click	() => void	Emits when the back button is pressed.

BiometricManager Bot API 7.2+

A component that init the biometric manager when is rendered.

<script lang="ts" setup>
import { BiometricManager } from 'vue-tg'
  
const handleInit = () => {
  // ...
}
</script>

<template>
  <BiometricManager @init="handleInit" />
</template>

Events

Name	Type	Description
init	() => void	Emits when the biometric manager is init.

ClosingConfirmation Bot API 6.2+

A component that enables the confirmation dialog while the user is trying to close the Mini App.

<script lang="ts" setup>
import { ClosingConfirmation } from 'vue-tg'
</script>

<template>
  <ClosingConfirmation />
</template>

Confirm Bot API 6.2+

A component that shows message in a simple confirmation window with 'OK' and 'Cancel' buttons when is rendered.

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

function handleConfirmClose(ok: boolean) {
  // ...
}
</script>

<template>
  <Confirm message="Hello?" @close="handleConfirmClose" />
</template>

Props

Name	Type	Required	Description
message	string	true	The message to be displayed in the body of the confirm popup.

Events

Name	Type	Description
close	(ok: boolean) => void	Emits when the opened popup is closed.

ExpandedViewport

A component that expands the Mini App to the maximum available height when is rendered.

<script lang="ts" setup>
import { ExpandedViewport } from 'vue-tg'
</script>

<template>
  <ExpandedViewport />
</template>

Props

Name	Type	Required	Description
force	boolean	false	Expands the viewport despite user interaction. Disables vertical swipes if supported. Set to false by default.

MainButton

A component that enables the main button when is rendered.

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

function handleMainButton() {
  // ...
}
</script>

<template>
  <MainButton @click="handleMainButton" />
</template>

Props

Name	Type	Required	Description
visible	boolean	false	Shows whether the button is visible. Set to true by default.
disabled	boolean	false	Shows whether the button is disable.
progress	boolean	false	Shows whether the button is displaying a loading indicator.
text	string	false	Current button text. Set to Continue for the main button and Cancel for the secondary button by default.
color	string	false	Current button color. Set to themeParams.button_color for the main button and themeParams.bottom_bar_bg_color for the secondary button by default.
textColor	string	false	Current button text color. Set to themeParams.button_text_color for the main button and themeParams.button_color for the secondary button by default.
hasShineEffect	boolean	false	Bot API 7.10+ Shows whether the button has a shine effect. Set to false by default.

Events

Name	Type	Description
click	() => void	Emits when the main button is pressed.

Popup Bot API 6.2+

A component that shows a native popup when is rendered.

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

function handlePopupClose(buttonId: string) {
  // ...
}
</script>

<template>
  <Popup message="Hello" @close="handlePopupClose" />
</template>

Props

Name	Type	Required	Description
message	string	true	The message to be displayed in the body of the popup.
title	string	false	The text to be displayed in the popup title.
buttons	PopupButton[] ↗	false	List of buttons to be displayed in the popup.

Events

Name	Type	Description
close	(buttonId: string) => void	Emits when the opened popup is closed.

ScanQr Bot API 6.4+

A component that shows a native popup for scanning a QR code when is rendered.

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

function handleScanResult(data: string) {
  // ...
}
</script>

<template>
  <ScanQr @result="handleScanResult" />
</template>

Props

Name	Type	Required	Description
text	string	false	The text to be displayed under the 'Scan QR' heading.

Events

Name	Type	Description
result	(data: string) => void	Emits when the QR code scanner catches a code with text data.

SecondaryButton Bot API 7.10+

A component that enables the secondary button when is rendered.

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

function handleSecondaryButton() {
  // ...
}
</script>

<template>
  <SecondaryButton @click="handleSecondaryButton" />
</template>

Props

Name	Type	Required	Description
visible	boolean	false	Shows whether the button is visible. Set to true by default.
disabled	boolean	false	Shows whether the button is disable.
progress	boolean	false	Shows whether the button is displaying a loading indicator.
text	string	false	Current button text. Set to Continue for the main button and Cancel for the secondary button by default.
color	string	false	Current button color. Set to themeParams.button_color for the main button and themeParams.bottom_bar_bg_color for the secondary button by default.
textColor	string	false	Current button text color. Set to themeParams.button_text_color for the main button and themeParams.button_color for the secondary button by default.
hasShineEffect	boolean	false	Bot API 7.10+ Shows whether the button has a shine effect. Set to false by default.
position	string	false	Bot API 7.10+ Position of the secondary button. Not defined for the main button. It applies only if both the main and secondary buttons are visible. Set to left by default. Supported values: - left, displayed to the left of the main button, - right, displayed to the right of the main button, - top, displayed above the main button, - bottom, displayed below the main button.

Events

Name	Type	Description
click	() => void	Emits when the main button is pressed.

SettingsButton Bot API 7.0+

A component that enables the settings button when is rendered.

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

function handleSettingsButton() {
  // ...
}
</script>

<template>
  <SettingsButton @click="handleSettingsButton" />
</template>

Props

Name	Type	Required	Description
visible	boolean	false	Shows whether the button is visible. Set to true by default.

Events

Name	Type	Description
click	() => void	Emits when the settings button is pressed.

Composables

useMiniApp

import { useMiniApp } from 'vue-tg'

const miniApp = useMiniApp()

Name	Description
initData	A string with raw data transferred to the Mini App, convenient for validating data. WARNING: Validate data from this field before using it on the bot's server.
initDataUnsafe	An object with input data transferred to the Mini App. WARNING: Data from this field should not be trusted. You should only use data from initData on the bot's server and only after it has been validated.
platform	The name of the platform of the user's Telegram app.
isActive	Bot API 8.0+ True, if the Mini App is currently active. False, if the Mini App is minimized. ⚡️ readonly reactive
onActive	Bot API 8.0+ A method that sets event handler. An alias for onActivated.
onDeactive	Bot API 8.0+ A method that sets event handler. An alias for onDeactivated.
sendData	A method used to send data to the bot. When this method is called, a service message is sent to the bot containing the data data of the length up to 4096 bytes, and the Mini App is closed. See the field web_app_data in the class Message. This method is only available for Mini Apps launched via a Keyboard button.
switchInlineQuery	Bot API 6.7+ A method that inserts the bot's username and the specified inline query in the current chat's input field. Query may be empty, in which case only the bot's username will be inserted. If an optional choose_chat_types parameter was passed, the client prompts the user to choose a specific chat, then opens that chat and inserts the bot's username and the specified inline query in the input field. You can specify which types of chats the user will be able to choose from. It can be one or more of the following types: users, bots, groups, channels.
openLink	A method that opens a link in an external browser. The Mini App will not be closed. Bot API 6.4+ If the optional options parameter is passed with the field try_instant_view=true, the link will be opened in Instant View mode if possible. Note that this method can be called only in response to user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button)
openTelegramLink	A method that opens a telegram link inside the Telegram app. The Mini App will not be closed after this method is called. Up to Bot API 7.0 The Mini App will be closed after this method is called.
openInvoice	Bot API 6.1+ A method that opens an invoice using the link url. The Mini App will receive the event invoiceClosed when the invoice is closed. If an optional callback parameter was passed, the callback function will be called and the invoice status will be passed as the first argument. ⭐️ async
onInvoiceClose	Bot API 6.1+ A method that sets event handler. An alias for onInvoiceClosed.
shareToStory	Bot API 7.8+ A method that opens the native story editor with the media specified in the media_url parameter as an HTTPS URL. An optional params argument of the type StoryShareParams describes additional sharing settings.
shareMessage	Bot API 8.0+ A method that opens a dialog allowing the user to share a message provided by the bot. If an optional callback parameter is provided, the callback function will be called with a boolean as the first argument, indicating whether the message was successfully sent. The message id passed to this method must belong to a PreparedInlineMessage previously obtained via the Bot API method savePreparedInlineMessage. ⭐️ async
onShareMessageSent	Bot API 8.0+ A method that sets event handler. An alias for onShareMessageSent.
onShareMessageFail	Bot API 8.0+ A method that sets event handler. An alias for shareMessageFailed.
downloadFile	Bot API 8.0+ A method that displays a native popup prompting the user to download a file specified by the params argument of type DownloadFileParams. If an optional callback parameter is provided, the callback function will be called when the popup is closed, with the first argument as a boolean indicating whether the user accepted the download request. ⭐️ async
onFileDownloadRequest	Bot API 8.0+ A method that sets event handler. An alias for onFileDownloadRequested.
requestWriteAccess	Bot API 6.9+ A method that shows a native popup requesting permission for the bot to send messages to the user. If an optional callback parameter was passed, the callback function will be called when the popup is closed and the first argument will be a boolean indicating whether the user granted this access. ⭐️ async
onWriteAccessRequest	Bot API 6.9+ A method that sets event handler. An alias for onWriteAccessRequested.
requestContact	Bot API 6.9+ A method that shows a native popup prompting the user for their phone number. If an optional callback parameter was passed, the callback function will be called when the popup is closed and the first argument will be a boolean indicating whether the user shared its phone number. ⭐️ async
onContactRequest	Bot API 6.9+ A method that sets event handler. An alias for onContactRequested.
isClosingConfirmationEnabled	True, if the confirmation dialog is enabled while the user is trying to close the Mini App. False, if the confirmation dialog is disabled. ⚡️ reactive
ready	A method that informs the Telegram app that the Mini App is ready to be displayed. It is recommended to call this method as early as possible, as soon as all essential interface elements are loaded. Once this method is called, the loading placeholder is hidden and the Mini App is shown. If the method is not called, the placeholder will be hidden only when the page is fully loaded.
close	A method that closes the Mini App.
isReady	Boolean indicating if the app is ready. 🔋 custom⚡️ readonly reactive
isPlatform	Function to check if the app is running on a specified platform. 🔋 custom
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useAccelerometer

import { useAccelerometer } from 'vue-tg'

const accelerometer = useAccelerometer()

Name	Description
isStarted	Indicates whether accelerometer tracking is currently active. ⚡️ readonly reactive
x	The current acceleration in the X-axis, measured in m/s². ⚡️ readonly reactive
y	The current acceleration in the Y-axis, measured in m/s². ⚡️ readonly reactive
z	The current acceleration in the Z-axis, measured in m/s². ⚡️ readonly reactive
start	Bot API 8.0+ Starts tracking accelerometer data using params of type AccelerometerStartParams. If an optional callback parameter is provided, the callback function will be called with a boolean indicating whether tracking was successfully started. ⭐️ async
onStart	Bot API 8.0+ A method that sets event handler. An alias for onAccelerometerStarted.
onChange	Bot API 8.0+ A method that sets event handler. An alias for onAccelerometerChanged.
onFail	Bot API 8.0+ A method that sets event handler. An alias for onAccelerometerFailed.
stop	Bot API 8.0+ Stops tracking accelerometer data. If an optional callback parameter is provided, the callback function will be called with a boolean indicating whether tracking was successfully stopped. ⭐️ async
onStop	Bot API 8.0+ A method that sets event handler. An alias for onAccelerometerStopped.
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useBackButton

import { useBackButton } from 'vue-tg'

const backButton = useBackButton()

Name	Description
isVisible	Shows whether the button is visible. Set to false by default. ⚡️ reactive
show	Bot API 6.1+ A method to make the button active and visible.
hide	Bot API 6.1+ A method to hide the button.
onClick	Bot API 6.1+ A method that sets the button press event handler. An alias for Telegram.WebApp.onEvent('backButtonClicked', callback)
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useBiometricManager

import { useBiometricManager } from 'vue-tg'

const biometricManager = useBiometricManager()

Name	Type
isInited	Shows whether biometrics object is initialized. ⚡️ readonly reactive
isBiometricAvailable	Shows whether biometrics is available on the current device. ⚡️ readonly reactive
biometricType	The type of biometrics currently available on the device. Can be one of these values: - finger, fingerprint-based biometrics, - face, face-based biometrics, - unknown, biometrics of an unknown type. ⚡️ readonly reactive
isAccessRequested	Shows whether permission to use biometrics has been requested. ⚡️ readonly reactive
isAccessGranted	Shows whether permission to use biometrics has been granted. ⚡️ readonly reactive
isBiometricTokenSaved	Shows whether the token is saved in secure storage on the device. ⚡️ readonly reactive
deviceId	A unique device identifier that can be used to match the token to the device. ⚡️ readonly reactive
init	Bot API 7.2+ A method that initializes the BiometricManager object. It should be called before the object's first use. If an optional callback parameter was passed, the callback function will be called when the object is initialized. ⭐️ async
requestAccess	Bot API 7.2+ A method that requests permission to use biometrics according to the params argument of type BiometricRequestAccessParams. If an optional callback parameter was passed, the callback function will be called and the first argument will be a boolean indicating whether the user granted access. ⭐️ async
onManagerUpdate	Bot API 7.2+ A method that sets event handler. An alias for onBiometricManagerUpdated.
authenticate	Bot API 7.2+ A method that authenticates the user using biometrics according to the params argument of type BiometricAuthenticateParams. If an optional callback parameter was passed, the callback function will be called and the first argument will be a boolean indicating whether the user authenticated successfully. If so, the second argument will be a biometric token. ⭐️ async
onAuthRequest	Bot API 7.2+ A method that sets event handler. An alias for onBiometricAuthRequested.
updateToken	Bot API 7.2+ A method that updates the biometric token in secure storage on the device. To remove the token, pass an empty string. If an optional callback parameter was passed, the callback function will be called and the first argument will be a boolean indicating whether the token was updated. ⭐️ async
onTokenUpdate	Bot API 7.2+ A method that sets event handler. An alias for onBiometricTokenUpdated.
openSettings	Bot API 7.2+ A method that opens the biometric access settings for bots. Useful when you need to request biometrics access to users who haven't granted it yet. Note that this method can be called only in response to user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button)
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useClipboard

import { useClipboard } from 'vue-tg'

const clipboard = useClipboard()

Name	Description
readText	Bot API 6.4+ A method that requests text from the clipboard. The Mini App will receive the event clipboardTextReceived. If an optional callback parameter was passed, the callback function will be called and the text from the clipboard will be passed as the first argument. Note: this method can be called only for Mini Apps launched from the attachment menu and only in response to a user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button). ⭐️ async
onReadText	Bot API 6.4+ A method that sets event handler. An alias for onClipboardTextReceived.
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useCloudStorage

import { useCloudStorage } from 'vue-tg'

const cloudStorage = useCloudStorage()

Name	Type
setItem	Bot API 6.9+ A method that stores a value in the cloud storage using the specified key. The key should contain 1-128 characters, only A-Z, a-z, 0-9, _ and - are allowed. The value should contain 0-4096 characters. You can store up to 1024 keys in the cloud storage. If an optional callback parameter was passed, the callback function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be null and the second argument will be a boolean indicating whether the value was stored. ⭐️ async
getItem	Bot API 6.9+ A method that receives a value from the cloud storage using the specified key. The key should contain 1-128 characters, only A-Z, a-z, 0-9, _ and - are allowed. In case of an error, the callback function will be called and the first argument will contain the error. In case of success, the first argument will be null and the value will be passed as the second argument. ⭐️ async
getItems	Bot API 6.9+ A method that receives values from the cloud storage using the specified keys. The keys should contain 1-128 characters, only A-Z, a-z, 0-9, _ and - are allowed. In case of an error, the callback function will be called and the first argument will contain the error. In case of success, the first argument will be null and the values will be passed as the second argument. ⭐️ async
removeItem	Bot API 6.9+ A method that removes a value from the cloud storage using the specified key. The key should contain 1-128 characters, only A-Z, a-z, 0-9, _ and - are allowed. If an optional callback parameter was passed, the callback function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be null and the second argument will be a boolean indicating whether the value was removed. ⭐️ async
removeItems	Bot API 6.9+ A method that removes values from the cloud storage using the specified keys. The keys should contain 1-128 characters, only A-Z, a-z, 0-9, _ and - are allowed. If an optional callback parameter was passed, the callback function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be null and the second argument will be a boolean indicating whether the values were removed. ⭐️ async
getKeys	Bot API 6.9+ A method that receives the list of all keys stored in the cloud storage. In case of an error, the callback function will be called and the first argument will contain the error. In case of success, the first argument will be null and the list of keys will be passed as the second argument. ⭐️ async
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useDeviceOrientation

import { useDeviceOrientation } from 'vue-tg'

const deviceOrientation = useDeviceOrientation()

Name	Description
isStarted	Indicates whether device orientation tracking is currently active. ⚡️ readonly reactive
absolute	A boolean that indicates whether or not the device is providing orientation data in absolute values. ⚡️ readonly reactive
alpha	The rotation around the Z-axis, measured in radians. ⚡️ readonly reactive
beta	The rotation around the X-axis, measured in radians. ⚡️ readonly reactive
gamma	The rotation around the Y-axis, measured in radians. ⚡️ readonly reactive
start	Bot API 8.0+ Starts tracking device orientation data using params of type DeviceOrientationStartParams. If an optional callback parameter is provided, the callback function will be called with a boolean indicating whether tracking was successfully started. ⭐️ async
onStart	Bot API 8.0+ A method that sets event handler. An alias for onDeviceOrientationStarted.
onChange	Bot API 8.0+ A method that sets event handler. An alias for onDeviceOrientationChanged.
onFail	Bot API 8.0+ A method that sets event handler. An alias for onDeviceOrientationFailed.
stop	Bot API 8.0+ Stops tracking device orientation data. If an optional callback parameter is provided, the callback function will be called with a boolean indicating whether tracking was successfully stopped. ⭐️ async
onStop	Bot API 8.0+ A method that sets event handler. An alias for onDeviceOrientationStopped.
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useEmojiStatus

import { useEmojiStatus } from 'vue-tg'

const emojiStatus = useEmojiStatus()

Name	Description
set	Bot API 8.0+ A method that opens a dialog allowing the user to set the specified custom emoji as their status. An optional params argument of type EmojiStatusParams specifies additional settings, such as duration. If an optional callback parameter is provided, the callback function will be called with a boolean as the first argument, indicating whether the status was set. Note: this method opens a native dialog and cannot be used to set the emoji status without manual user interaction. For fully programmatic changes, you should instead use the Bot API method setUserEmojiStatus after obtaining authorization to do so via the Mini App method requestEmojiStatusAccess. ⭐️ async
onSet	Bot API 8.0+ A method that sets event handler. An alias for onEmojiStatusSet.
onFail	Bot API 8.0+ A method that sets event handler. An alias for onEmojiStatusFailed.
requestAccess	Bot API 8.0+ A method that shows a native popup requesting permission for the bot to manage user's emoji status. If an optional callback parameter was passed, the callback function will be called when the popup is closed and the first argument will be a boolean indicating whether the user granted this access. ⭐️ async
onAccessRequest	Bot API 8.0+ A method that sets event handler. An alias for onEmojiStatusAccessRequested.
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useGyroscope

import { useGyroscope } from 'vue-tg'

const gyroscope = useGyroscope()

Name	Description
isStarted	Indicates whether gyroscope tracking is currently active. ⚡️ readonly reactive
x	The current rotation rate around the X-axis, measured in rad/s. ⚡️ readonly reactive
y	The current rotation rate around the Y-axis, measured in rad/s. ⚡️ readonly reactive
z	The current rotation rate around the Z-axis, measured in rad/s. ⚡️ readonly reactive
start	Bot API 8.0+ Starts tracking gyroscope data using params of type GyroscopeStartParams. If an optional callback parameter is provided, the callback function will be called with a boolean indicating whether tracking was successfully started. ⭐️ async
onStart	Bot API 8.0+ A method that sets event handler. An alias for onGyroscopeStarted.
onChange	Bot API 8.0+ A method that sets event handler. An alias for onGyroscopeChanged.
onFail	Bot API 8.0+ A method that sets event handler. An alias for onGyroscopeFailed.
stop	Bot API 8.0+ Stops tracking gyroscope data. If an optional callback parameter is provided, the callback function will be called with a boolean indicating whether tracking was successfully stopped. ⭐️ async
onStop	Bot API 8.0+ A method that sets event handler. An alias for onGyroscopeStopped.
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useHapticFeedback

import { useHapticFeedback } from 'vue-tg'

const hapticFeedback = useHapticFeedback()

Name	Description
impactOccurred	Bot API 6.1+ A method tells that an impact occurred. The Telegram app may play the appropriate haptics based on style value passed. Style can be one of these values: - light, indicates a collision between small or lightweight UI objects, - medium, indicates a collision between medium-sized or medium-weight UI objects, - heavy, indicates a collision between large or heavyweight UI objects, - rigid, indicates a collision between hard or inflexible UI objects, - soft, indicates a collision between soft or flexible UI objects.
notificationOccurred	Bot API 6.1+ A method tells that a task or action has succeeded, failed, or produced a warning. The Telegram app may play the appropriate haptics based on type value passed. Type can be one of these values: - error, indicates that a task or action has failed, - success, indicates that a task or action has completed successfully, - warning, indicates that a task or action produced a warning.
selectionChanged	Bot API 6.1+ A method tells that the user has changed a selection. The Telegram app may play the appropriate haptics. Do not use this feedback when the user makes or confirms a selection; use it only when the selection changes.
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useHomeScreen

import { useHomeScreen } from 'vue-tg'

const homeScreen = useHomeScreen()

Name	Type
addShortcut	Bot API 8.0+ A method that prompts the user to add the Mini App to the home screen. After successfully adding the icon, the homeScreenAdded event will be triggered if supported by the device. Note that if the device cannot determine the installation status, the event may not be received even if the icon has been added.
onShortcutAdd	Bot API 8.0+ A method that sets event handler. An alias for onHomeScreenAdded.
checkShortcutStatus	Bot API 8.0+ A method that checks if adding to the home screen is supported and if the Mini App has already been added. If an optional callback parameter is provided, the callback function will be called with a single argument status, which is a string indicating the home screen status. Possible values for status are: - unsupported – the feature is not supported, and it is not possible to add the icon to the home screen, - unknown – the feature is supported, and the icon can be added, but it is not possible to determine if the icon has already been added, - added – the icon has already been added to the home screen, - missed – the icon has not been added to the home screen. ⭐️ async
onShortcutCheck	Bot API 8.0+ A method that sets event handler. An alias for onHomeScreenChecked.
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useLocationManager

import { useLocationManager } from 'vue-tg'

const locationManager = useLocationManager()

Name	Description
isInited	Shows whether the LocationManager object has been initialized. ⚡️ readonly reactive
isLocationAvailable	Shows whether location services are available on the current device. ⚡️ readonly reactive
isAccessRequested	Shows whether permission to use location has been requested. ⚡️ readonly reactive
isAccessGranted	Shows whether permission to use location has been granted. ⚡️ readonly reactive
init	Bot API 8.0+ A method that initializes the LocationManager object. It should be called before the object's first use. If an optional callback parameter is provided, the callback function will be called when the object is initialized. ⭐️ async
onManagerUpdate	Bot API 8.0+ A method that sets event handler. An alias for onLocationManagerUpdated.
getLocation	Bot API 8.0+ A method that requests location data. The callback function will be called with null as the first argument if access to location was not granted, or an object of type LocationData as the first argument if access was successful. ⭐️ async
onRequest	Bot API 8.0+ A method that sets event handler. An alias for onLocationRequested.
openSettings	Bot API 8.0+ A method that opens the location access settings for bots. Useful when you need to request location access from users who haven't granted it yet. Note that this method can be called only in response to user interaction with the Mini App interface (e.g., a click inside the Mini App or on the main button).
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useMainButton

import { useMainButton } from 'vue-tg'

const mainButton = useMainButton()

Name	Description
text	Current button text. Set to Continue for the main button and Cancel for the secondary button by default. ⚡️ reactive
color	Current button color. Set to themeParams.button_color for the main button and themeParams.bottom_bar_bg_color for the secondary button by default. ⚡️ reactive
textColor	Current button text color. Set to themeParams.button_text_color for the main button and themeParams.button_color for the secondary button by default. ⚡️ reactive
isVisible	Shows whether the button is visible. Set to false by default. ⚡️ reactive
isActive	Shows whether the button is active. Set to true by default. ⚡️ reactive
isProgressVisible	Readonly. Shows whether the button is displaying a loading indicator. ⚡️ reactive
hasShineEffect	Bot API 7.10+ Shows whether the button has a shine effect. Set to false by default. ⚡️ reactive
show	A method to make the button visible. Note that opening the Mini App from the attachment menu hides the main button until the user interacts with the Mini App interface.
hide	A method to hide the button.
enable	A method to enable the button.
disable	A method to disable the button.
showProgress	A method to show a loading indicator on the button. It is recommended to display loading progress if the action tied to the button may take a long time. By default, the button is disabled while the action is in progress. If the parameter leaveActive=true is passed, the button remains enabled.
hideProgress	A method to hide the loading indicator.
setParams	A method to set the button parameters. The params parameter is an object containing one or several fields that need to be changed: text - button text; color - button color; text_color - button text color; has_shine_effect - Bot API 7.10+ enable shine effect; position - position of the secondary button; is_active - enable the button; is_visible - show the button.
onClick	A method that sets the button's press event handler. An alias for Telegram.WebApp.onEvent('mainButtonClicked', callback)
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

usePopup

import { usePopup } from 'vue-tg'

const popup = usePopup()

Name	Type
showConfirm	Bot API 6.2+ A method that shows message in a simple confirmation window with 'OK' and 'Cancel' buttons. If an optional callback parameter was passed, the callback function will be called when the popup is closed and the first argument will be a boolean indicating whether the user pressed the 'OK' button. ⭐️ async
showAlert	Bot API 6.2+ A method that shows message in a simple alert with a 'Close' button. If an optional callback parameter was passed, the callback function will be called when the popup is closed. ⭐️ async
showPopup	Bot API 6.2+ A method that shows a native popup described by the params argument of the type PopupParams. The Mini App will receive the event popupClosed when the popup is closed. If an optional callback parameter was passed, the callback function will be called and the field id of the pressed button will be passed as the first argument. ⭐️ async
onClose	Bot API 6.2+ A method that sets event handler. An alias for onPopupClosed.
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useQrScanner

import { useQrScanner } from 'vue-tg'

const qrScanner = useQrScanner()

Name	Description
show	Bot API 6.4+ A method that shows a native popup for scanning a QR code described by the params argument of the type ScanQrPopupParams. The Mini App will receive the event qrTextReceived every time the scanner catches a code with text data. If an optional callback parameter was passed, the callback function will be called and the text from the QR code will be passed as the first argument. Returning true inside this callback function causes the popup to be closed. Starting from Bot API 7.7, the Mini App will receive the scanQrPopupClosed event if the user closes the native popup for scanning a QR code.
close	Bot API 6.4+ A method that closes the native popup for scanning a QR code opened with the showScanQrPopup method. Run it if you received valid data in the event qrTextReceived.
onScan	Bot API 6.4+ A method that sets event handler. An alias for onQrTextReceived.
onClose	Bot API 7.7+ A method that sets event handler. An alias for onScanQrPopupClosed.
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useSecondaryButton

import { useSecondaryButton } from 'vue-tg'

const secondaryButton = useSecondaryButton()

Name	Description
text	Current button text. Set to Continue for the main button and Cancel for the secondary button by default. ⚡️ reactive
color	Current button color. Set to themeParams.button_color for the main button and themeParams.bottom_bar_bg_color for the secondary button by default. ⚡️ reactive
textColor	Current button text color. Set to themeParams.button_text_color for the main button and themeParams.button_color for the secondary button by default. ⚡️ reactive
isVisible	Shows whether the button is visible. Set to false by default. ⚡️ reactive
isActive	Shows whether the button is active. Set to true by default. ⚡️ reactive
isProgressVisible	Readonly. Shows whether the button is displaying a loading indicator. ⚡️ reactive
hasShineEffect	Bot API 7.10+ Shows whether the button has a shine effect. Set to false by default. ⚡️ reactive
position	Bot API 7.10+ Position of the secondary button. Not defined for the main button. It applies only if both the main and secondary buttons are visible. Set to left by default. Supported values: - left, displayed to the left of the main button, - right, displayed to the right of the main button, - top, displayed above the main button, - bottom, displayed below the main button. ⚡️ reactive
show	Bot API 7.10+ A method to make the button visible. Note that opening the Mini App from the attachment menu hides the main button until the user interacts with the Mini App interface.
hide	Bot API 7.10+ A method to hide the button.
enable	Bot API 7.10+ A method to enable the button.
disable	Bot API 7.10+ A method to disable the button.
showProgress	Bot API 7.10+ A method to show a loading indicator on the button. It is recommended to display loading progress if the action tied to the button may take a long time. By default, the button is disabled while the action is in progress. If the parameter leaveActive=true is passed, the button remains enabled.
hideProgress	Bot API 7.10+ A method to hide the loading indicator.
setParams	Bot API 7.10+ A method to set the button parameters. The params parameter is an object containing one or several fields that need to be changed: text - button text; color - button color; text_color - button text color; has_shine_effect - Bot API 7.10+ enable shine effect; position - position of the secondary button; is_active - enable the button; is_visible - show the button.
onClick	Bot API 7.10+ A method that sets the button's press event handler. An alias for Telegram.WebApp.onEvent('mainButtonClicked', callback)
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useSettingsButton

import { useSettingsButton } from 'vue-tg'

const settingsButton = useSettingsButton()

Name	Description
isVisible	Shows whether the context menu item is visible. Set to false by default. ⚡️ reactive
show	Bot API 7.0+ A method to make the Settings item in the context menu visible.
hide	Bot API 7.0+ A method to hide the Settings item in the context menu.
onClick	Bot API 7.0+ A method that sets the press event handler for the Settings item in the context menu. An alias for Telegram.WebApp.onEvent('settingsButtonClicked', callback)
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useTheme

import { useTheme } from 'vue-tg'

const theme = useTheme()

Name	Description
colorScheme	The color scheme currently used in the Telegram app. Either “light” or “dark”. Also available as the CSS variable var(--tg-color-scheme). ⚡️ readonly reactive
themeParams	An object containing the current theme settings used in the Telegram app. ⚡️ readonly reactive
headerColor	Current header color in the #RRGGBB format. ⚡️ reactive
backgroundColor	Current background color in the #RRGGBB format. ⚡️ reactive
bottomBarColor	Current bottom bar color in the #RRGGBB format. ⚡️ reactive
onChange	A method that sets event handler. An alias for onThemeChanged.
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

useViewport

import { useViewport } from 'vue-tg'

const viewport = useViewport()

Name	Description
isExpanded	True, if the Mini App is expanded to the maximum available height. False, if the Mini App occupies part of the screen and can be expanded to the full height using the expand() method. ⚡️ readonly reactive
expand	A method that expands the Mini App to the maximum available height. To find out if the Mini App is expanded to the maximum height, refer to the value of the Telegram.WebApp.isExpanded parameter
viewportHeight	The current height of the visible area of the Mini App. Also available in CSS as the variable var(--tg-viewport-height). The application can display just the top part of the Mini App, with its lower part remaining outside the screen area. From this position, the user can “pull” the Mini App to its maximum height, while the bot can do the same by calling the expand() method. As the position of the Mini App changes, the current height value of the visible area will be updated in real time. Please note that the refresh rate of this value is not sufficient to smoothly follow the lower border of the window. It should not be used to pin interface elements to the bottom of the visible area. It's more appropriate to use the value of the viewportStableHeight field for this purpose. ⚡️ readonly reactive
viewportStableHeight	The height of the visible area of the Mini App in its last stable state. Also available in CSS as a variable var(--tg-viewport-stable-height). The application can display just the top part of the Mini App, with its lower part remaining outside the screen area. From this position, the user can “pull” the Mini App to its maximum height, while the bot can do the same by calling the expand() method. Unlike the value of viewportHeight, the value of viewportStableHeight does not change as the position of the Mini App changes with user gestures or during animations. The value of viewportStableHeight will be updated after all gestures and animations are completed and the Mini App reaches its final size. Note the event viewportChanged with the passed parameter isStateStable=true, which will allow you to track when the stable state of the height of the visible area changes. ⚡️ readonly reactive
onChange	A method that sets event handler. An alias for onViewportChanged.
isFullscreen	True, if the Mini App is currently being displayed in fullscreen mode. ⚡️ reactive
onFullscreenChange	Bot API 8.0+ A method that sets event handler. An alias for onFullscreenChanged.
onFullscreenFail	Bot API 8.0+ A method that sets event handler. An alias for onFullscreenFailed.
isOrientationLocked	True, if the Mini App’s orientation is currently locked. False, if orientation changes freely based on the device’s rotation. ⚡️ reactive
isVerticalSwipesEnabled	True, if vertical swipes to close or minimize the Mini App are enabled. False, if vertical swipes to close or minimize the Mini App are disabled. In any case, the user will still be able to minimize and close the Mini App by swiping the Mini App's header. ⚡️ reactive
safeAreaInset	An object representing the device's safe area insets, accounting for system UI elements like notches or navigation bars. ⚡️ readonly reactive
onSafeAreaChange	Bot API 8.0+ A method that sets event handler. An alias for onSafeAreaChanged.
contentSafeAreaInset	An object representing the safe area for displaying content within the app, free from overlapping Telegram UI elements. ⚡️ readonly reactive
onContentSafeAreaChange	Bot API 8.0+ A method that sets event handler. An alias for onContentSafeAreaChanged.
version	The version of the Bot API available in the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.

Composables (Legacy)

useWebApp

Deprecated

Use useMiniApp instead.

// Hover to inspect type
import { useWebApp } from 'vue-tg'

Name	Description
initData	A string with raw data transferred to the Mini App, convenient for validating data. WARNING: Validate data from this field before using it on the bot's server.
initDataUnsafe	An object with input data transferred to the Mini App. WARNING: Data from this field should not be trusted. You should only use data from initData on the bot's server and only after it has been validated.
version	The version of the Bot API available in the user's Telegram app.
platform	The name of the platform of the user's Telegram app.
isVersionAtLeast	Returns true if the user's app supports a version of the Bot API that is equal to or higher than the version passed as the parameter.
sendData	A method used to send data to the bot. When this method is called, a service message is sent to the bot containing the data data of the length up to 4096 bytes, and the Mini App is closed. See the field web_app_data in the class Message. This method is only available for Mini Apps launched via a Keyboard button.
ready	A method that informs the Telegram app that the Mini App is ready to be displayed. It is recommended to call this method as early as possible, as soon as all essential interface elements are loaded. Once this method is called, the loading placeholder is hidden and the Mini App is shown. If the method is not called, the placeholder will be hidden only when the page is fully loaded.
close	A method that closes the Mini App.
isReady	Boolean indicating if the app is ready. 🔋 custom⚡️ readonly reactive
isPlatform	Function to check if the app is running on a specified platform. 🔋 custom
isPlatformUnknown	Boolean indicating if the platform is unknown. 🔋 custom
isFeatureSupported	Function to check if a specified feature is supported. 🔋 custom

useWebAppBackButton

Deprecated

Use useBackButton instead.

// Hover to inspect type
import { useWebAppBackButton } from 'vue-tg'

Name	Description
isBackButtonVisible	Shows whether the button is visible. Set to false by default. ⚡️ reactive
showBackButton	Bot API 6.1+ A method to make the button active and visible.
hideBackButton	Bot API 6.1+ A method to hide the button.

useWebAppBiometricManager

Deprecated

Use useBiometricManager instead.

// Hover to inspect type
import { useWebAppBiometricManager } from 'vue-tg'

Name	Type
isBiometricInited	Shows whether biometrics object is initialized. ⚡️ readonly reactive
isBiometricAvailable	Shows whether biometrics is available on the current device. ⚡️ readonly reactive
biometricType	The type of biometrics currently available on the device. Can be one of these values: - finger, fingerprint-based biometrics, - face, face-based biometrics, - unknown, biometrics of an unknown type. ⚡️ readonly reactive
isBiometricAccessRequested	Shows whether permission to use biometrics has been requested. ⚡️ readonly reactive
isBiometricAccessGranted	Shows whether permission to use biometrics has been granted. ⚡️ readonly reactive
isBiometricTokenSaved	Shows whether the token is saved in secure storage on the device. ⚡️ readonly reactive
biometricDeviceId	A unique device identifier that can be used to match the token to the device. ⚡️ readonly reactive
initBiometric	Bot API 7.2+ A method that initializes the BiometricManager object. It should be called before the object's first use. If an optional callback parameter was passed, the callback function will be called when the object is initialized.
requestBiometricAccess	Bot API 7.2+ A method that requests permission to use biometrics according to the params argument of type BiometricRequestAccessParams. If an optional callback parameter was passed, the callback function will be called and the first argument will be a boolean indicating whether the user granted access.
authenticateBiometric	Bot API 7.2+ A method that authenticates the user using biometrics according to the params argument of type BiometricAuthenticateParams. If an optional callback parameter was passed, the callback function will be called and the first argument will be a boolean indicating whether the user authenticated successfully. If so, the second argument will be a biometric token.
updateBiometricToken	Bot API 7.2+ A method that updates the biometric token in secure storage on the device. To remove the token, pass an empty string. If an optional callback parameter was passed, the callback function will be called and the first argument will be a boolean indicating whether the token was updated.
openBiometricSettings	Bot API 7.2+ A method that opens the biometric access settings for bots. Useful when you need to request biometrics access to users who haven't granted it yet. Note that this method can be called only in response to user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button)
onManagerUpdated	Bot API 7.2+ A method that sets the biometricManagerUpdated event handler.
onAuthRequested	Bot API 7.2+ A method that sets the biometricAuthRequested event handler.
onTokenUpdated	Bot API 7.2+ A method that sets the biometricTokenUpdated event handler.

useWebAppClipboard

Deprecated

Use useClipboard instead.

// Hover to inspect type
import { useWebAppClipboard } from 'vue-tg'

Name

Type

readTextFromClipboard

Bot API 6.4+ A method that requests text from the clipboard. The Mini App will receive the event clipboardTextReceived. If an optional callback parameter was passed, the callback function will be called and the text from the clipboard will be passed as the first argument. Note: this method can be called only for Mini Apps launched from the attachment menu and only in response to a user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button).

useWebAppClosingConfirmation

Deprecated

Use useMiniApp instead.

// Hover to inspect type
import { useWebAppClosingConfirmation } from 'vue-tg'

Name	Type
isClosingConfirmationEnabled	True, if the confirmation dialog is enabled while the user is trying to close the Mini App. False, if the confirmation dialog is disabled. ⚡️ reactive
enableClosingConfirmation	Bot API 6.2+ A method that enables a confirmation dialog while the user is trying to close the Mini App.
disableClosingConfirmation	Bot API 6.2+ A method that disables the confirmation dialog while the user is trying to close the Mini App.

useWebAppCloudStorage

Deprecated

Use useCloudStorage instead.

// Hover to inspect type
import { useWebAppCloudStorage } from 'vue-tg'

Name	Type
setStorageItem	Bot API 6.9+ A method that stores a value in the cloud storage using the specified key. The key should contain 1-128 characters, only A-Z, a-z, 0-9, _ and - are allowed. The value should contain 0-4096 characters. You can store up to 1024 keys in the cloud storage. If an optional callback parameter was passed, the callback function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be null and the second argument will be a boolean indicating whether the value was stored.
getStorageItem	Bot API 6.9+ A method that receives a value from the cloud storage using the specified key. The key should contain 1-128 characters, only A-Z, a-z, 0-9, _ and - are allowed. In case of an error, the callback function will be called and the first argument will contain the error. In case of success, the first argument will be null and the value will be passed as the second argument.
getStorageItems	Bot API 6.9+ A method that receives values from the cloud storage using the specified keys. The keys should contain 1-128 characters, only A-Z, a-z, 0-9, _ and - are allowed. In case of an error, the callback function will be called and the first argument will contain the error. In case of success, the first argument will be null and the values will be passed as the second argument.
removeStorageItem	Bot API 6.9+ A method that removes a value from the cloud storage using the specified key. The key should contain 1-128 characters, only A-Z, a-z, 0-9, _ and - are allowed. If an optional callback parameter was passed, the callback function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be null and the second argument will be a boolean indicating whether the value was removed.
removeStorageItems	Bot API 6.9+ A method that removes values from the cloud storage using the specified keys. The keys should contain 1-128 characters, only A-Z, a-z, 0-9, _ and - are allowed. If an optional callback parameter was passed, the callback function will be called. In case of an error, the first argument will contain the error. In case of success, the first argument will be null and the second argument will be a boolean indicating whether the values were removed.
getStorageKeys	Bot API 6.9+ A method that receives the list of all keys stored in the cloud storage. In case of an error, the callback function will be called and the first argument will contain the error. In case of success, the first argument will be null and the list of keys will be passed as the second argument.

useWebAppHapticFeedback

Deprecated

Use useHapticFeedback instead.

// Hover to inspect type
import { useWebAppHapticFeedback } from 'vue-tg'

Name	Type
impactOccurred	Bot API 6.1+ A method tells that an impact occurred. The Telegram app may play the appropriate haptics based on style value passed. Style can be one of these values: - light, indicates a collision between small or lightweight UI objects, - medium, indicates a collision between medium-sized or medium-weight UI objects, - heavy, indicates a collision between large or heavyweight UI objects, - rigid, indicates a collision between hard or inflexible UI objects, - soft, indicates a collision between soft or flexible UI objects.
notificationOccurred	Bot API 6.1+ A method tells that a task or action has succeeded, failed, or produced a warning. The Telegram app may play the appropriate haptics based on type value passed. Type can be one of these values: - error, indicates that a task or action has failed, - success, indicates that a task or action has completed successfully, - warning, indicates that a task or action produced a warning.
selectionChanged	Bot API 6.1+ A method tells that the user has changed a selection. The Telegram app may play the appropriate haptics. Do not use this feedback when the user makes or confirms a selection; use it only when the selection changes.

useWebAppMainButton

Deprecated

Use useMainButton instead.

// Hover to inspect type
import { useWebAppMainButton } from 'vue-tg'

Name	Type
mainButtonText	Current button text. Set to Continue for the main button and Cancel for the secondary button by default. ⚡️ reactive
mainButtonColor	Current button color. Set to themeParams.button_color for the main button and themeParams.bottom_bar_bg_color for the secondary button by default. ⚡️ reactive
mainButtonTextColor	Current button text color. Set to themeParams.button_text_color for the main button and themeParams.button_color for the secondary button by default. ⚡️ reactive
isMainButtonVisible	Shows whether the button is visible. Set to false by default. ⚡️ reactive
isMainButtonActive	Shows whether the button is active. Set to true by default. ⚡️ reactive
isMainButtonProgressVisible	Readonly. Shows whether the button is displaying a loading indicator. ⚡️ reactive
setMainButtonText	A method to set the button text.
showMainButton	A method to make the button visible. Note that opening the Mini App from the attachment menu hides the main button until the user interacts with the Mini App interface.
hideMainButton	A method to hide the button.
enableMainButton	A method to enable the button.
disableMainButton	A method to disable the button.
showMainButtonProgress	A method to show a loading indicator on the button. It is recommended to display loading progress if the action tied to the button may take a long time. By default, the button is disabled while the action is in progress. If the parameter leaveActive=true is passed, the button remains enabled.
hideMainButtonProgress	A method to hide the loading indicator.
setMainButtonParams	A method to set the button parameters. The params parameter is an object containing one or several fields that need to be changed: text - button text; color - button color; text_color - button text color; has_shine_effect - Bot API 7.10+ enable shine effect; position - position of the secondary button; is_active - enable the button; is_visible - show the button.

useWebAppNavigation

Deprecated

Use useMiniApp instead.

// Hover to inspect type
import { useWebAppNavigation } from 'vue-tg'

Name	Type
openInvoice	Bot API 6.1+ A method that opens an invoice using the link url. The Mini App will receive the event invoiceClosed when the invoice is closed. If an optional callback parameter was passed, the callback function will be called and the invoice status will be passed as the first argument.
openLink	A method that opens a link in an external browser. The Mini App will not be closed. Bot API 6.4+ If the optional options parameter is passed with the field try_instant_view=true, the link will be opened in Instant View mode if possible. Note that this method can be called only in response to user interaction with the Mini App interface (e.g. a click inside the Mini App or on the main button)
openTelegramLink	A method that opens a telegram link inside the Telegram app. The Mini App will not be closed after this method is called. Up to Bot API 7.0 The Mini App will be closed after this method is called.
switchInlineQuery	Bot API 6.7+ A method that inserts the bot's username and the specified inline query in the current chat's input field. Query may be empty, in which case only the bot's username will be inserted. If an optional choose_chat_types parameter was passed, the client prompts the user to choose a specific chat, then opens that chat and inserts the bot's username and the specified inline query in the input field. You can specify which types of chats the user will be able to choose from. It can be one or more of the following types: users, bots, groups, channels.

useWebAppPopup

Deprecated

Use usePopup instead.

// Hover to inspect type
import { useWebAppPopup } from 'vue-tg'

Name	Type
showAlert	Bot API 6.2+ A method that shows message in a simple alert with a 'Close' button. If an optional callback parameter was passed, the callback function will be called when the popup is closed.
showConfirm	Bot API 6.2+ A method that shows message in a simple confirmation window with 'OK' and 'Cancel' buttons. If an optional callback parameter was passed, the callback function will be called when the popup is closed and the first argument will be a boolean indicating whether the user pressed the 'OK' button.
showPopup	Bot API 6.2+ A method that shows a native popup described by the params argument of the type PopupParams. The Mini App will receive the event popupClosed when the popup is closed. If an optional callback parameter was passed, the callback function will be called and the field id of the pressed button will be passed as the first argument.

useWebAppQrScanner

Deprecated

Use useQrScanner instead.

// Hover to inspect type
import { useWebAppQrScanner } from 'vue-tg'

Name	Type
showScanQrPopup	Bot API 6.4+ A method that shows a native popup for scanning a QR code described by the params argument of the type ScanQrPopupParams. The Mini App will receive the event qrTextReceived every time the scanner catches a code with text data. If an optional callback parameter was passed, the callback function will be called and the text from the QR code will be passed as the first argument. Returning true inside this callback function causes the popup to be closed. Starting from Bot API 7.7, the Mini App will receive the scanQrPopupClosed event if the user closes the native popup for scanning a QR code.
closeScanQrPopup	Bot API 6.4+ A method that closes the native popup for scanning a QR code opened with the showScanQrPopup method. Run it if you received valid data in the event qrTextReceived.

useWebAppRequests

Deprecated

Use useMiniApp instead.

// Hover to inspect type
import { useWebAppRequests } from 'vue-tg'

Name	Type
requestContact	Bot API 6.9+ A method that shows a native popup prompting the user for their phone number. If an optional callback parameter was passed, the callback function will be called when the popup is closed and the first argument will be a boolean indicating whether the user shared its phone number.
requestWriteAccess	Bot API 6.9+ A method that shows a native popup requesting permission for the bot to send messages to the user. If an optional callback parameter was passed, the callback function will be called when the popup is closed and the first argument will be a boolean indicating whether the user granted this access.

useWebAppSettingsButton

Deprecated

Use useSettingsButton instead.

// Hover to inspect type
import { useWebAppSettingsButton } from 'vue-tg'

Name	Type
isSettingsButtonVisible	Shows whether the context menu item is visible. Set to false by default. ⚡️ reactive
showSettingsButton	Bot API 7.0+ A method to make the Settings item in the context menu visible.
hideSettingsButton	Bot API 7.0+ A method to hide the Settings item in the context menu.

useWebAppShare

Deprecated

Use useMiniApp instead.

// Hover to inspect type
import { useWebAppShare } from 'vue-tg'

Name	Type
shareToStory	Bot API 7.8+ A method that opens the native story editor with the media specified in the media_url parameter as an HTTPS URL. An optional params argument of the type StoryShareParams describes additional sharing settings.

useWebAppTheme

Deprecated

Use useTheme instead.

// Hover to inspect type
import { useWebAppTheme } from 'vue-tg'

Name	Type
colorScheme	The color scheme currently used in the Telegram app. Either “light” or “dark”. Also available as the CSS variable var(--tg-color-scheme). ⚡️ readonly reactive
themeParams	An object containing the current theme settings used in the Telegram app. ⚡️ readonly reactive
headerColor	Current header color in the #RRGGBB format. ⚡️ reactive
backgroundColor	Current background color in the #RRGGBB format. ⚡️ reactive
setHeaderColor	Bot API 6.1+ A method that sets the app header color in the #RRGGBB format. You can also use keywords bg_color and secondary_bg_color. Up to Bot API 6.9 You can only pass Telegram.WebApp.themeParams.bg_color or Telegram.WebApp.themeParams.secondary_bg_color as a color or bg_color, secondary_bg_color keywords.
setBackgroundColor	Bot API 6.1+ A method that sets the app background color in the #RRGGBB format. You can also use keywords bg_color and secondary_bg_color.

useWebAppViewport

Deprecated

Use useViewport instead.

// Hover to inspect type
import { useWebAppViewport } from 'vue-tg'

Name	Type
isExpanded	True, if the Mini App is expanded to the maximum available height. False, if the Mini App occupies part of the screen and can be expanded to the full height using the expand() method. ⚡️ readonly reactive
viewportHeight	The current height of the visible area of the Mini App. Also available in CSS as the variable var(--tg-viewport-height). The application can display just the top part of the Mini App, with its lower part remaining outside the screen area. From this position, the user can “pull” the Mini App to its maximum height, while the bot can do the same by calling the expand() method. As the position of the Mini App changes, the current height value of the visible area will be updated in real time. Please note that the refresh rate of this value is not sufficient to smoothly follow the lower border of the window. It should not be used to pin interface elements to the bottom of the visible area. It's more appropriate to use the value of the viewportStableHeight field for this purpose. ⚡️ readonly reactive
viewportStableHeight	The height of the visible area of the Mini App in its last stable state. Also available in CSS as a variable var(--tg-viewport-stable-height). The application can display just the top part of the Mini App, with its lower part remaining outside the screen area. From this position, the user can “pull” the Mini App to its maximum height, while the bot can do the same by calling the expand() method. Unlike the value of viewportHeight, the value of viewportStableHeight does not change as the position of the Mini App changes with user gestures or during animations. The value of viewportStableHeight will be updated after all gestures and animations are completed and the Mini App reaches its final size. Note the event viewportChanged with the passed parameter isStateStable=true, which will allow you to track when the stable state of the height of the visible area changes. ⚡️ readonly reactive
isVerticalSwipesEnabled	True, if vertical swipes to close or minimize the Mini App are enabled. False, if vertical swipes to close or minimize the Mini App are disabled. In any case, the user will still be able to minimize and close the Mini App by swiping the Mini App's header. ⚡️ reactive
expand	A method that expands the Mini App to the maximum available height. To find out if the Mini App is expanded to the maximum height, refer to the value of the Telegram.WebApp.isExpanded parameter
enableVerticalSwipes	Bot API 7.7+ A method that enables vertical swipes to close or minimize the Mini App. For user convenience, it is recommended to always enable swipes unless they conflict with the Mini App's own gestures.
disableVerticalSwipes	Bot API 7.7+ A method that disables vertical swipes to close or minimize the Mini App. This method is useful if your Mini App uses swipe gestures that may conflict with the gestures for minimizing and closing the app.