Nuxt Telegram Miniapps UI Kit

This is an experiment in building a library of Telegram web application interface components with Tailwind CSS. All components inherit the design concept of Telegram for Android, but do not try to match it exactly.

⚠️ Please do not use this library in real projects until the first stable version is published. Breaking changes may occur without prior notice!

Installation

npm install -D nuxt-telegram-webapps

Note: This also installs required nuxt modules:

• @nuxtjs/tailwindcss
• @nuxtjs/google-fonts
• nuxt-icon
• @vueuse/nuxt

Usage

This component library is Nuxt Layer. To use it, just add the extends setting.

// nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    'nuxt-telegram-miniapps',
  ]
})

Then create a page that is supposed to be a web application or place the web application components in the app.vue. It's recommended to place all components inside helper component TgContent.

<template>
  <TgContent>
    <TgSection>
      <TgCell title="Some title" />
    </TgSection>
  </TgContent>
</template>

Components

TgSection

A component within which you can place TgCell`s groups or any content block of a web application

Props

<!-- Section with cells -->
<TgSection title="Section title">
  <TgCell title="Cell 1" />
  <TgCell title="Cell 2" />
</TgSection>

<!-- Section with content -->
<TgSection title="Section title" content>
  <p>Some section content</p>
</TgSection>

TgCell

This is the main component of the menu. It automatically sets paddings, icon positioning, colors and dividers.

Props

Slots

<!-- Simple cell -->
<TgCell title="Some title" description="Some description" />

<!-- Cell with content -->
<TgCell>
  <p>Some content inside the cell</p>
</TgCell>

<!-- Cell with slots -->
<TgCell title="Some title" description="Some description">
  <template #icon>
    <TgIconBox icon="material-symbols:qr-code" />
  </template>
  <template #right>
    <TgButton size="sm">Button</TgButton>
  </template>
</TgCell>

TgButton

This is just button, not something special 💁‍♂️ It is used to trigger some actions

Props

TgIconBox

A component to display an icon inside a circle or rectangle with rounded corners. The icon can be replaced by text

Props

You can place the TgIconBox in the icon slot of the TgCell component:

<TgCell title="Some title" description="Some description">
  <template #icon>
    <TgIconBox icon="material-symbols:qr-code" />
  </template>
</TgCell>

TgInput

Just input without borders

Props

<TgSection title="Section title" content>
  <TgInput v-model:value="input" />
</TgSection>