nuxt-telegram-miniapps v0.0.1-test9

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 and partially Telegram for iOS, 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

If the icon option is used, the icon will be displayed differently depending on the platform. On iOS and macOS the icon will be placed inside a colored square (don't forget to set icon-color), while on other platforms it will be displayed without a square and will inherit the system hint color.

If you want to control the display of the icon yourself, use the prepend slot and the TgIconBox component.

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>

Platforms

If you want to test the appearance on different platforms, use the usePlatform compsable in the app.vue file or in the miniapp page by passing the 'ios' or 'android' parameter to it and reloading the page. This is for testing and debugging purposes and may change in the future.