@telegram-apps/sdk-vue

Vue.js package providing utilities that developers may find useful when developing a mini application.

TIP

Since this package offers utility functions that extend the functionality of @telegram-apps/sdk, it is recommended to review the SDK package documentation first.

Installation

Before proceeding, it is assumed that you have already installed the vue package, as it is a peer dependency of this package.

pnpm

pnpm i @telegram-apps/sdk-vue

npm

npm i @telegram-apps/sdk-vue

yarn

yarn add @telegram-apps/sdk-vue

INFO

This package fully re-exports the @telegram-apps/sdk package, so you don't need to install it separately.

Usage

Here is a simple usage example of the package:

index.ts

import { createApp } from 'vue';
import { init } from '@telegram-apps/sdk-vue';
import App from './App.vue';

// Initialize the package.
init();

const app = createApp(App);

app.mount('#root');

PopupButton.vue

<script setup lang="ts">
/**
 * Component which opens native Telegram Popup.
 */
import { popup } from '@telegram-apps/sdk-vue'

const props = defineProps<{ title: string, message: string }>()

function open() {
  if (popup.isSupported()) {
    popup.open(props);
    return;
  }

  // Open fallback HTML dialog...
}
</script>

<template>
  <button aria-haspopup="dialog" @click="open">
    Open popup
  </button>
</template>

Hooks

useSignal

A helper that allows you to use our signals in the application. It returns a Vue ref which updates every time, our signal changes.

/**
 * Composable which encapsulates mainButton interaction logic
 */
import { mainButton, useSignal } from '@telegram-apps/sdk-vue';

export function useMainButton() {
  if (!mainButton.isMounted()) {
    mainButton.mount();
  }

  const isVisible = useSignal(mainButton.isVisible);

  return { isVisible };
}

useLaunchParams

A function that returns the mini application's launch parameters. For Vue.js it's just retrieveLaunchParams function from @telegram-apps/sdk.

/**
 * Composable which encapsulates start param processing logic
 */
import { useLaunchParams } from '@telegram-apps/sdk-vue';

export function useInitApp() {
  const lp = useLaunchParams();

  if (lp.startParam) {
    switch (lp.startParam) {
      case 'navigate-to-page':
        // evaluate navigation
        return;
    }
  }
}

Vue Router integration

Telegram application uses URL's hash to transmit launch parameters into TMA, see that article for more details.

Therefore, Vue router should use HTML5 mode:

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})