JSPM

vue-tg - Telegram integration for Vue

A package for integration of Telegram Web Apps feature with Vue.

Usage Example

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

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

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

Installation

Install package via npm:

npm i vue-tg

Register on Vue instance (optional):

import VueTelegram from 'vue-tg'

Vue.use(VueTelegram)

After that, you can use global aliases for components

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

<template>
  <Alert message="Hello!" />
</template>

<!-- Same with using an alias of the component -->

<template>
  <tg-alert message="Hello!" />
</template>

Table of contents

• Official Telegram Web Apps Docs ↗
• Mapping between Telegram Web Apps SDK and Vue-Telegram
• Event Handler Aliases

Components

• Alert
• BackButton
• Confirm
• MainButton
• Popup
• ScanQr

Composables

• useWebApp
• useWebAppBackButton
• useWebAppClipboard
• useWebAppClosingConfirmation
• useWebAppHapticFeedback
• useWebAppMainButton
• useWebAppNavigation
• useWebAppPopup
• useWebAppQrScanner
• useWebAppSendData
• useWebAppSettingsButton
• useWebAppTheme
• useWebAppViewport

Mapping between Telegram Web Apps SDK and Vue-Telegram

Event Handler Aliases

Usage Example

import { useWebAppTheme } from 'vue-tg'

const { onThemeChanged } = useWebAppTheme()

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

Mapping

Components

Alert

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

Events

BackButton

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

Events

Confirm

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

Events

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

Events

Popup

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

Events

ScanQr

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

Events

Composables

useWebApp

import { useWebApp } from 'vue-tg'

▸ useWebApp(): Object

Returns

useWebAppBackButton

import { useWebAppBackButton } from 'vue-tg'

▸ useWebAppBackButton(): Object

Returns

useWebAppClipboard

import { useWebAppClipboard } from 'vue-tg'

▸ useWebAppClipboard(): Object

Returns

useWebAppClosingConfirmation

import { useWebAppClosingConfirmation } from 'vue-tg'

▸ useWebAppClosingConfirmation(): Object

Returns

useWebAppHapticFeedback

import { useWebAppHapticFeedback } from 'vue-tg'

▸ useWebAppHapticFeedback(): Object

Returns

useWebAppMainButton

import { useWebAppMainButton } from 'vue-tg'

▸ useWebAppMainButton(): Object

Returns

useWebAppNavigation

import { useWebAppNavigation } from 'vue-tg'

▸ useWebAppNavigation(): Object

Returns

useWebAppPopup

import { useWebAppPopup } from 'vue-tg'

▸ useWebAppPopup(): Object

Returns

useWebAppQrScanner

import { useWebAppQrScanner } from 'vue-tg'

▸ useWebAppQrScanner(): Object

Returns

useWebAppSendData

Useful composable for universal data sending. execute just calls sendData and executeHttp sends an HTTP POST request to the specified URL.
Use canSendData from useWebApp to check that sending data in a service message (using execute) is available.

import { useWebAppSendData } from 'vue-tg'

▸ useWebAppSendData<D>(data, options): Object

Parameters

Returns

Object

useWebAppSettingsButton

import { useWebAppSettingsButton } from 'vue-tg'

▸ useWebAppSettingsButton(): Object

Returns

useWebAppTheme

import { useWebAppTheme } from 'vue-tg'

▸ useWebAppTheme(): Object

Returns

useWebAppViewport

import { useWebAppViewport } from 'vue-tg'

▸ useWebAppViewport(): Object

Returns