@tma.js/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 @tma.js/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 @tma.js/sdk-vue

npm

npm i @tma.js/sdk-vue

yarn

yarn add @tma.js/sdk-vue

INFO

This package fully re-exports the @tma.js/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 '@tma.js/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 '@tma.js/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 '@tma.js/sdk-vue';

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

  const isVisible = useSignal(mainButton.isVisible);

  return { isVisible };
}

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: [
    //...
  ],
})