Vue 3 telegram mini apps

Table of Contents

• Getting started
  • Installation
  • Setup
• Telegram Mini Apps API implementation status
  • window.Telegram.WebApp
• Faq
• License
• Other projects

Getting started

Installation

npm install --save @kolirt/vue-telegram-mini-app

yarn add @kolirt/vue-telegram-mini-app

Setup

import { createApp } from 'vue'
import { createTelegramMiniApp } from '@kolirt/vue-telegram-mini-app'

const app = createApp({ ... })

app.use(createTelegramMiniApp({
  alwaysExpand: true,
  closingConfirmation: true
}))

app.mount('#app')

Telegram Mini Apps API implementation status

window.Telegram.WebApp

• <input checked="" disabled="" type="checkbox"> initData
• <input disabled="" type="checkbox"> initDataUnsafe
• <input checked="" disabled="" type="checkbox"> version
• <input checked="" disabled="" type="checkbox"> platform
• <input checked="" disabled="" type="checkbox"> colorScheme
• <input disabled="" type="checkbox"> themeParams
• <input checked="" disabled="" type="checkbox"> isExpanded
• <input checked="" disabled="" type="checkbox"> viewportHeight
• <input checked="" disabled="" type="checkbox"> viewportStableHeight
• <input checked="" disabled="" type="checkbox"> headerColor
• <input checked="" disabled="" type="checkbox"> backgroundColor
• <input checked="" disabled="" type="checkbox"> isClosingConfirmationEnabled
• <input checked="" disabled="" type="checkbox"> isVerticalSwipesEnabled
• <input disabled="" type="checkbox"> BackButton
  • <input disabled="" type="checkbox"> isVisible
  • <input checked="" disabled="" type="checkbox"> BackButton.onClick
  • <input checked="" disabled="" type="checkbox"> BackButton.offClick
  • <input checked="" disabled="" type="checkbox"> BackButton.show
  • <input checked="" disabled="" type="checkbox"> BackButton.hide
• <input disabled="" type="checkbox"> MainButton
• <input disabled="" type="checkbox"> SettingsButton
• <input checked="" disabled="" type="checkbox"> HapticFeedback
  • <input checked="" disabled="" type="checkbox"> HapticFeedback.impactOccurred
  • <input checked="" disabled="" type="checkbox"> HapticFeedback.notificationOccurred
  • <input checked="" disabled="" type="checkbox"> HapticFeedback.selectionChanged
• <input checked="" disabled="" type="checkbox"> CloudStorage
  • <input checked="" disabled="" type="checkbox"> CloudStorage.setItem
  • <input checked="" disabled="" type="checkbox"> CloudStorage.getItem
  • <input checked="" disabled="" type="checkbox"> CloudStorage.getItems
  • <input checked="" disabled="" type="checkbox"> CloudStorage.removeItem
  • <input checked="" disabled="" type="checkbox"> CloudStorage.removeItems
  • <input checked="" disabled="" type="checkbox"> CloudStorage.getKeys
• <input disabled="" type="checkbox"> BiometricManager
• <input checked="" disabled="" type="checkbox"> isVersionAtLeast
• <input checked="" disabled="" type="checkbox"> setHeaderColor(color)
• <input checked="" disabled="" type="checkbox"> setBackgroundColor(color)
• <input checked="" disabled="" type="checkbox"> enableClosingConfirmation()
• <input checked="" disabled="" type="checkbox"> disableClosingConfirmation()
• <input checked="" disabled="" type="checkbox"> enableVerticalSwipes()
• <input checked="" disabled="" type="checkbox"> disableVerticalSwipes()
• <input checked="" disabled="" type="checkbox"> onEvent(eventType, eventHandler)
• <input checked="" disabled="" type="checkbox"> offEvent(eventType, eventHandler)
• <input disabled="" type="checkbox"> sendData(data)
• <input disabled="" type="checkbox"> switchInlineQuery(query[, choose_chat_types])
• <input disabled="" type="checkbox"> openLink(url[, options])
• <input disabled="" type="checkbox"> openTelegramLink(url)
• <input disabled="" type="checkbox"> openInvoice(url[, callback])
• <input disabled="" type="checkbox"> showPopup(params[, callback])
• <input disabled="" type="checkbox"> showAlert(message[, callback])
• <input disabled="" type="checkbox"> showConfirm(message[, callback])
• <input disabled="" type="checkbox"> showScanQrPopup(params[, callback])
• <input disabled="" type="checkbox"> closeScanQrPopup()
• <input disabled="" type="checkbox"> readTextFromClipboard([callback])
• <input disabled="" type="checkbox"> requestWriteAccess([callback])
• <input disabled="" type="checkbox"> requestContact([callback])
• <input checked="" disabled="" type="checkbox"> ready()
• <input checked="" disabled="" type="checkbox"> expand()
• <input checked="" disabled="" type="checkbox"> close()

FAQ

Check closed issues with FAQ label to get answers for most asked questions

License

MIT

Other projects

Check out my other projects on my GitHub profile