vue-tg

Appearance

Installation ​

Install package:

bash
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:

html
<script src="https://telegram.org/js/telegram-web-app.js"></script>

Done!

Mini Apps Documentation

Widgets Documentation

Global Aliases ​

Register on Vue instance:

ts
import { VueTelegramPlugin } from 'vue-tg'

Vue.use(VueTelegramPlugin)

After that, you can use global aliases for components:

vue
<!-- Without alias -->

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

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

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

<template>
  <tg-alert message="Hello!" />
</template>
ComponentAlias
Alerttg-alert
BackButtontg-back-button
BiometricManagertg-biometric-manager
ClosingConfirmationtg-closing-confirmation
Confirmtg-confirm
ExpandedViewporttg-expanded-viewport
MainButtontg-main-button
Popuptg-popup
ScanQrtg-scan-qr
SettingsButtontg-settings-button
ShareWidgettg-share-widget
PostWidgettg-post-widget
LoginWidgettg-login-widget
DiscussionWidgettg-discussion-widget

Using with Nuxt 3 ​

Install package:

bash
npm i vue-tg

Include the Telegram web app script in the <head> section of your Nuxt application by adding it to the nuxt.config.ts file:

ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: 'https://telegram.org/js/telegram-web-app.js' }],
    },
  },
})

Next, create a MiniApp.vue component and import the necessary components from vue-tg and utilize them in your component:

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 the MiniApp.vue component into your App.vue file and wrap it inside a <ClientOnly> component. This ensures that the component is only rendered on the client-side:

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 MiniApp.vue component using Nuxt's built-in useState or any other state management library like pinia.