Widgets

Official Telegram Widgets Documentation

Share Widget

Official documentation

A widget to let users forward content from your website or app to their friends, channels or Saved Messages on Telegram.

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

<template>
  <ShareWidget 
    url="https://vue-tg.pages.dev" 
    comment="Telegram integration for Vue" 
  />
</template>

Props

Name	Type	Description
url	string	URL to share.
comment	string	Optional. Additional comment to be included with the shared URL.
size	string	Optional. Size of the widget ("large", "medium"). Default is "medium".
no-label	boolean	Optional. If set to true, hides the label text on the widget button.
tag	string	Optional. Specify a custom HTML-tag to wrap the widget. Default is "div".

Post Widget

Official documentation

A widget to embed messages from public groups and channels on your website.

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

<template>
  <PostWidget url="durov/68" />
</template>

Props

Name	Type	Description
url	string	URL of the post.
width	string	Optional. Width of the widget.
author-photo	boolean	Optional. Display the author's photo.
color	string	Optional. Accent color.
dark-color	string	Optional. Accent color in dark mode.
dark	boolean	Optional. Indicates whether to use dark mode.
tag	string	Optional. Specify a custom HTML-tag to wrap the widget. Default is "div".

Login Widget

Official documentation

A widget to authorize users on your website.

<script lang="ts" setup>
import { LoginWidget } from 'vue-tg'
import type { LoginWidgetUser } from 'vue-tg'

function handleUserAuth(user: LoginWidgetUser) {
  // ...
}
</script>

<template>
  <LoginWidget 
    bot-username="samplebot"
    @auth="handleUserAuth"
  />
</template>

Props

Name	Type	Description
bot-username	string	Username of the bot.
redirect-url	string	Optional. URL to redirect to after authentication.
size	string	Optional. Size of the widget ("large", "medium", "small"). Default is "large".
corner-radius	number	Optional. Corner radius of the button.
user-photo	boolean	Optional. Display the user's profile photo.
request-write	boolean	Optional. Request access to send messages from the bot.
tag	string	Optional. Specify a custom HTML-tag to wrap the widget. Default is "div".

Events

Name	Type	Description
auth	(user: LoginWidgetUser) => void	Emits when the user is successfully authorized. Note: does not emit when a redirect URL is specified.

Discussion Widget

Official documentation

A widget to embed discussions from any public channel on your website.

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

<template>
  <DiscussionWidget url="contest/198" />
</template>

Props

Name	Type	Description
url	string	URL of the discussion.
comments-limit	number	Optional. Limit on the number of comments.
height	string	Optional. Height of the widget.
color	string	Optional. Accent color.
dark-color	string	Optional. Accent color in dark mode.
dark	boolean	Optional. Indicates whether to use dark mode.
colorful	boolean	Optional. Indicates whether to use different colors for names.
tag	string	Optional. Specify a custom HTML-tag to wrap the widget. Default is "div".