deptyped / vue-telegram Goto Github PK
View Code? Open in Web Editor NEWTelegram integration for Vue
Home Page: https://vue-tg.deptyped.com
License: MIT License
Telegram integration for Vue
Home Page: https://vue-tg.deptyped.com
License: MIT License
<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>
<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>
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
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!
the borderRadius of the child component is not clipped when using overflow hidden
how can I implement the clipping of a child component by borderRadius?
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 === ""
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
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.
Subj
Web Site with Documentation seems doesn't work
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".
<ExpandedViewport />
// keep expanded despite user interaction
<ExpandedViewport force />
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.
Is it possible to track the event of closing a mini app?
https://core.telegram.org/bots/api-changelog#september-22-2023
import { useWebAppCloudStorage } from "vue-tg"
const {
setStorageItem,
getStorageItem,
getStorageItems,
removeStorageItem,
removeStorageItems,
getStorageKeys,
} = useWebAppCloudStorage()
import { useWebAppRequests } from "vue-tg"
const {
requestContact,
requestWriteAccess,
onContactRequested,
onWriteAccessRequested,
} = useWebAppRequests()
<TgShareButton
url: string
comment?: string
size?: "medium"| "large"
no-label?: boolean
/>
<TgPost
url: string
width?: string
author-photo?: boolean
color?: string
dark-color?: string
dark?: boolean
/>
<TgLoginButton
bot-username: string
size?: "small" | "medium"| "large"
user-photo?: boolean
radius?: number
request-write?: boolean
redirect-url?: string
@auth?: (user) => void
/>
<TgDiscussion
url: string
height?: string
comments?: number
colorful?: boolean
color?: string
dark-color?: string
dark?: boolean
/>
<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>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.