deptyped / vue-telegram Goto Github PK

Telegram integration for Vue

License: MIT License

TypeScript 75.06% Vue 24.94%

telegram telegram-bot telegram-web-app vue vue-components vue-composable vue-composition-api vue3 telegram-mini-apps telegram-widget

vue-telegram's Introduction

`vue-tg` - Telegram integration for Vue

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

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:

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

Composables

vue-telegram's People

Contributors

Stargazers

Watchers

Forkers

zvekov icrazymob open-chatgpt 2awesomeee baisheng iamsdr

vue-telegram's Issues

Web Site with Documentation seems doesn't work

Subj

Web Site with Documentation seems doesn't work

Vue 3 Support

Method showPopup is not supported in version 6.0

Doesn't working nothing correctly.
I get
telegram-web-app.js:1754 [Telegram.WebApp] Method showPopup is not supported in version 6.0)
telegram-web-app.js:1755 Uncaught Error: WebAppMethodUnsupported

Open mini app with Expanded Viewport

Hello! Right now we have useWebAppViewport() and isExpanded property, which is read only. Could you please add an ability to open the miniapp with expanded viewport (like you did for headerColor not so long ago).

My miniapp is rather long/tall and a user has to expand it every time he opens it. This extra action can be avoided by opening the app with full height by default.

How to update useWebAppTheme params to make them work in Nuxt3?

Hello! First of all: thank you for your component! I am trying to use it in Nuxt 3 and I managed to get useWebApp work correctly with ssr: false option in nuxt-config.ts. But I can't change useWebAppTheme for some reason. Looks like I am doing something wrong. Can you help me, please?

I am importing the code in my default layout

<script setup>
  import { useWebAppTheme } from 'vue-tg'
  useWebAppTheme().colorScheme.value = 'dark'
  useWebAppTheme().headerColor.value = '#000000'
  useWebAppTheme().backgroundColor.value = '#000000'

  useWebAppTheme().themeParams.value = {
    bg_color: '#000000',
    header_bg_color: '#000000'
  }
  
</script>

As you see I am trying to set a black background and black header bg color. But when I load the app in Telegram it still stays white.

canSendData not working

Here is the output of this code:

<template>
  <p>initData: {{ initData }}</p>
  <p>initDataUnsafe: {{ initDataUnsafe }}</p>
  <p>isPlatform: {{ isPlatform }}</p>
  <p>isPlatformUnknown: {{ isPlatformUnknown }}</p>
  <p>isReady: {{ isReady }}</p>
  <p>canSendData: {{ canSendData }}</p>
  <p>platform: {{ platform }}</p>
  <p>version: {{ version }}</p>
</template>

MiniApp output
query_id=AAHxw2*******
initDataUnsafe: { "query_id": "AAHxw2***** }
isPlatform: e=>Telegram.WebApp.platform===e
isPlatformUnknown: false
isReady: false
canSendData: false
platform: android
version: 7.2

Why is "canSendData" false?
Shouldn't this line of your code say ```Telegram.WebApp.initData !=""`?

const canSendData = !isPlatformUnknown && Telegram.WebApp.initData === ""

Add support for Bot API 7.0

https://core.telegram.org/bots/webapps#december-29-2023

Bot API 7.7

is possible support api 7.7 methods ?

Integrate with nuxt 3

Please! Integrate with nuxt 3

This works only if i write this:

<script setup lang="ts">
  useHead({
      script: [
        {
          src: 'https://telegram.org/js/telegram-web-app.js',
          defer: true
        }
      ]
    })

  onMounted(async () => {
    const VueTg = await import('vue-tg')
  })
<script>

If i write import without onMounted, nuxt throws error "Telegram is not defined"

because nuxt first render in server side

Add support for Bot API 6.9

https://core.telegram.org/bots/api-changelog#september-22-2023

CloudStorage

import { useWebAppCloudStorage } from "vue-tg"
const {
  setStorageItem,
  getStorageItem,
  getStorageItems,
  removeStorageItem,
  removeStorageItems,
  getStorageKeys,
} = useWebAppCloudStorage()

requestContact, requestWriteAccess

import { useWebAppRequests } from "vue-tg"
const {
  requestContact,
  requestWriteAccess,
  onContactRequested,
  onWriteAccessRequested,
} = useWebAppRequests()

InitData doesn't return correct values after page Refresh

Hey! Once again I need your assistance. I am building a webapp in Nuxt3. As you know, when you open a webapp in Telegram you can click on three dots in the header part and select "Refresh" the page. But after the refresh, InitData returns a string with value "query_id" and that's all...

So I have a question:
Is this a normal behavior that InitData doesn't return correct string after page refresh?

P.S.
Anyway, if the InitData is empty it should return null or undefined. But right now it returns "query_id".

[Event] closing a mini app?

Is it possible to track the event of closing a mini app?

Add ability to create refs for Cloud Storage

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

const valueRef = useWebAppCloudStorageItem<T>("some-key", "initial value", {
  writeDebounce: 500, // ms
  serializer: {
    read(raw: string): T
    write(value: T): string
  },
  onError: (error: unknown) => void,
})

valueRef.value = "another value"
</script>

Add `<ClosingConfirmation/>` component

Improve `<BiometricManager>` component

Slots API

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

<template>
  <BiometricManager>
    <!-- isBiometricInited: false -->
    <template #loading>
      <p>Biometric init...</p>
    </template>

    <!-- isBiometricInited: true, isBiometricAvailable: false -->
    <template #not-supported>
      <p>Biometric is not supported on the current device</p>
    </template>

    <!-- isBiometricInited: true, isBiometricAccessGranted: false -->
    <template #not-granted>
      <p>Biometric access is not granted</p>
    </template>

    <p>Biometric is ready to use</p>
  </BiometricManager>
</template>

Add support for Telegram Widgets

https://core.telegram.org/widgets/share

<TgShareButton 
	url: string
	comment?: string 
	size?: "medium"| "large"
	no-label?: boolean
/>

https://core.telegram.org/widgets/post

<TgPost
	url: string
	width?: string
	author-photo?: boolean
	color?: string
	dark-color?: string
	dark?: boolean
/>

https://core.telegram.org/widgets/login

<TgLoginButton 
	bot-username: string
	size?: "small" | "medium"| "large"
	user-photo?: boolean
	radius?: number
	request-write?: boolean
	redirect-url?: string
	@auth?: (user) => void
/>

https://core.telegram.org/widgets/discussion

<TgDiscussion
	url: string
	height?: string
	comments?: number
	colorful?: boolean
	color?: string
	dark-color?: string
	dark?: boolean
/>

Add `<ExpandedViewport/>` component

<ExpandedViewport />

// keep expanded despite user interaction
<ExpandedViewport force />

Interactive playground for components

Is it possible to disable app close when swipe down?

Hello! Right now if the mini app is open (fully expanded) and you swipe screen down the app closes. It's a standard behavior for many apps. But I have seen an app that doesn't cloce on swipe-down. It stays open and it doesn't even change the viewport size when you drag it down. It stays full height despite this.

Is it possible to do the same with vue-telegram ???

Thank you in advance!

Documentation is unavailable

Add `<PopupButton>` component

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

function handleAgreeButton() {
  // ...
}

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

<template>
  <Popup message="Do you agree?">
    <PopupButton text="Agree" type="ok" @click="handleAgreeButton">
    <PopupButton text="Disagree" type="cancel" @click="handleDisagreeButton">
  </Popup>
</template>

deptyped / vue-telegram Goto Github PK

vue-telegram's Introduction

vue-tg - Telegram integration for Vue

Usage Example

Installation

Documentation

Instructions

Widgets

Components

Mini Apps

Components

Composables

vue-telegram's People

Contributors

Stargazers

Watchers

Forkers

vue-telegram's Issues

Recommend Projects

Recommend Topics

Recommend Org

`vue-tg` - Telegram integration for Vue