Vue.js UI Components Library for Telegram Mini Apps

[flexscss]

Summary

Introduction:
While there are existing UI component libraries built on React for Telegram Mini Apps, a significant number of developers prefer Vue.js due to its simplicity and flexibility. Vue.js is one of the most popular frameworks in the JavaScript ecosystem, boasting over 208k stars on GitHub. A dedicated Vue.js component library for Telegram Mini Apps would be highly beneficial for this developer community, enabling them to build consistent, responsive, and theme-aware user interfaces aligned with Telegram's design standards.

Objective:
The project aims to develop a comprehensive Vue.js UI Components library tailored for Telegram Mini Apps. This library will faithfully implement the design language outlined in the Figma Telegram UI Kit, ensuring a seamless and cohesive user experience across all Telegram platforms.

Functionality:

• Theme Auto-Switching: Components will automatically switch between light and dark themes based on the user's system settings or explicit user choice.
• Telegram Colors Tokens: The components will support dynamic theme-based colors provided by the Telegram Mini Apps platform, ensuring visual consistency.
• Responsive Design: Components will be responsive and adaptable to various screen sizes and orientations without compromising functionality or aesthetics.
• Cross-Platform Compatibility: Ensuring consistent rendering of components across all Telegram applications, including mobile, desktop, and web.
• Interactivity: Components will include interactive states (hover, active, disabled, etc.) as specified in the Figma UI Kit.

Technical Requirements:

• Out-of-the-box SDK Support:
  The library will handle essential Telegram Mini Apps events, such as themeChanged and viewportChanged.
  It will support transitioning to fullscreen mode upon app start and adapt to the appearance/hiding of the Main Button using setParams.
  The components will consider the characteristics of both fullscreen and compact web views, as well as Insets & Safe Area considerations for iOS and Android.

• Dynamic Import:
  The UI Kit will be structured to facilitate modular component imports, enabling developers to use only the components they need.

• Modularity:
  Components will be designed as reusable, standalone elements that can be easily integrated into any project.

• Documentation:
  Comprehensive documentation will be provided for each component, including examples of usage, API descriptions, and integration guidelines.

Deliverables:

• Source code for all components.
• A live demo page showcasing all components.
• A documentation site to assist developers with integration.
• An NPM package for easy installation and integration.

Context

To develop a Vue.js UI Components library for Telegram Mini Apps that implements the design language outlined in the Figma Telegram UI Kit.

References

https://github.com/Telegram-Mini-Apps/TelegramUI
https://weui.io/
https://vkcom.github.io/VKUI/
https://mantine.dev/

Estimate suggested reward

15000

[delovoyhomie]

Thank you for your proposal and for your dedication to enhancing the ecosystem. We regret to inform you that we cannot proceed with it at this time, as we have not observed a significant demand for this tool in relation to Vue. While your implementation of https://github.com/thebatclaudio/ton-dapp-vue-template is impressive and highly appreciated, it currently does not align with the community's immediate needs.

We are grateful for your efforts and encourage you to continue your valuable contributions to the ecosystem. Thank you once again for your work and commitment.