A package for seamless integration of Telegram Mini Apps and Telegram Widgets features.
<script lang="ts" setup>
import { MainButton, useWebAppPopup } from 'vue-tg'
const { showAlert } = useWebAppPopup()
</script>
<template>
<MainButton text="Open alert" @click="() => showAlert('Hello!')" />
</template>
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>
After that, install package:
npm i vue-tg
Register on Vue instance:
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>
Firstly, include the Telegram web app script in the section of your Nuxt application by adding it to the nuxt.config.ts
file:
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [{ src: 'https://telegram.org/js/telegram-web-app.js' }],
},
},
})
After that, install the vue-tg
package
npm i vue-tg
Next, create a vue component ( MiniApp.vue ) and import the necessary components from vue-tg and utilize them in your component:
<!-- MiniApp.vue -->
<script lang="ts" setup>
import { MainButton, useWebAppPopup } from 'vue-tg'
const { showAlert } = useWebAppPopup()
</script>
<template>
<MainButton text="Open alert" @click="() => showAlert('Hello!')" />
</template>
Import that component ( MiniApp.vue ) into your app.vue
file and wrap it inside a ClientOnly
component. This ensures that the component is only rendered on the client-side:
<!-- app.vue -->
<template>
<NuxtPage />
<ClientOnly>
<MiniApp />
</ClientOnly>
</template>
<script setup lang="ts">
import MiniApp from '~/components/MiniApp.vue'
</script>
You can manage the state within the component ( MiniApp.vue ) using Nuxt's built-in useState
or any other state management library like pinia
.
- Alert
- BackButton
- BiometricManager
- ClosingConfirmation
- Confirm
- ExpandedViewport
- MainButton
- Popup
- ScanQr
- SettingsButton
- useWebApp
- useWebAppBackButton
- useWebAppBiometricManager
- useWebAppClipboard
- useWebAppClosingConfirmation
- useWebAppCloudStorage
- useWebAppHapticFeedback
- useWebAppMainButton
- useWebAppNavigation
- useWebAppPopup
- useWebAppQrScanner
- useWebAppRequests
- useWebAppSendData
- useWebAppSettingsButton
- useWebAppTheme
- useWebAppViewport