TeleVue

TeleVue

TeleVue is a simple lightweight UI library for Telegram Web Apps in Vue

Installation

You can simply use NPM to install TeleVue package in your Vue project.

npm install @erfanmola/TeleVue

Motivation

Telegram expanded it’s field by introducing the WebApps built-in the messenger. Soon after developers started developing their own useful WebApps as Telegram Web Apps, but this introduced the problem of unfitting appearances of most WebApps on Telegram clients, since Telegram supports different themes and color schemes (Dark, Light) on different platforms (Android, iOS, Desktop, etc)

That’s TeleVue project started aiming to become the UI Library for Vue including all the components of Telegram clients with their native-like styles on different platforms, to reduce the headaches of designing components that look same as the client on each platform.

Documentation

You can see our Documentation as Storybook

Example WebApps

This kit is developed mainly for simplifying the development of SimpList Bot for Telegram Mini App Contest, so it’s good to mention the SimpList Bot as an example, also here could be a list of WebApps developed by you too.

Progress

TeleVue is still an in-development library and some features may change overtime until it reaches an stable point, but here is our plan for development of this library.

Providers

  • AppearanceProvider
  • LocaleProvider
  • AuthorizationProvider

UI Components

  • Switch
  • CheckBox
  • Section
  • ColorPicker
  • Chips
  • Avatar
  • SkeletonLoading
  • Charts
  • ToastMessage
  • Tabs
  • TGS Player (Lottie, Animated Telegram Stickers)

WebApp Components

  • BackButton
  • MainButton

Other UI Frameworks

Currently I have no plans to implement the library for other frameworks/libraries, Specially that one thing which they call it “React” and looks like “Wat Sap”, Vue is the Telegram of the frameworks, so just stick with it.

Contribution

Everyone is welcomed to contribute to the project, you can start from TeleVue’s Github Repository

GitHub

View Github