Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/opentiny/tiny-vue

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
https://github.com/opentiny/tiny-vue

component-library frontend headless-components opentiny renderless-components tiny-vue vue vue-components vue3

Last synced: 5 days ago
JSON representation

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

Host: GitHub
URL: https://github.com/opentiny/tiny-vue
Owner: opentiny
License: mit
Created: 2022-11-26T07:32:44.000Z (about 2 years ago)
Default Branch: dev
Last Pushed: 2024-12-13T05:23:47.000Z (9 days ago)
Last Synced: 2024-12-14T07:59:37.932Z (8 days ago)
Topics: component-library, frontend, headless-components, opentiny, renderless-components, tiny-vue, vue, vue-components, vue3
Language: Less
Homepage: https://opentiny.design/tiny-vue
Size: 51.2 MB
Stars: 1,757
Watchers: 23
Forks: 273
Open Issues: 209
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

English | [简体中文](README.zh-CN.md)

🌈 Features:

- 📦 104 clean, easy-to-use and powerful components.
- 🖖 One code, Support both Vue.js 2 and Vue.js 3.
- 🖥️ One code, Support both PC and Mobile.
- 🌍 Support internationalization.
- 🎨 Support theme customization.
- 📊 Components support configuration development, can support low-code platform.
- 💡 Use a cross-end and cross-framework architecture, flexible and portable.

## 🛠️ Usage

### 1. Installation

Execute the following command to install the TinyVue component library for Vue.js 3.

```shell
npm i @opentiny/vue@3
```

Execute the following command to install the TinyVue component library for Vue.js 2.

```shell
npm i @opentiny/vue@2
```

### 2. Import component

Then you can use the TinyVue component(such as ``) in the `App.vue` file.

```html

import { Button as TinyButton } from '@opentiny/vue'

Tiny Vue

```

## 🖥️ Development

```shell
git clone [email protected]:opentiny/tiny-vue.git
cd tiny-vue
pnpm i

# Vue.js 3
pnpm dev

# Vue.js 2
pnpm dev2
```

Open your browser and visit: [http://127.0.0.1:7130/](http://127.0.0.1:7130/)

## 🤝 Contributing

Welcome to join our OpenTiny community!🎉

If you don't know how to start, please read our [contributing guide](CONTRIBUTING.md).

- Add the official assistant WeChat `opentiny-official` and join the technical exchange group.
- Add to the mailing list `[email protected]`

## ✨ Contributors

Contributors are community members who have 1 or more PR merged in OpenTiny.

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_Kagol
💻

_ajaxzheng
💻

_TC-twwang
💻

_jacknan
💻

_Pithy
💻

_heygsc
💻

_MangoWu
💻

_ADNY
💻

_chenxi-20
💻

_Alaray
💻

_ing
💻

_申君健
 💻

_MomoPoppy
💻

_WXC-Spring
💻

_GaoNeng
💻

_acyza
💻

_ygj6
💻

_MrWang2016
💻

_qinwencheng
💻

_黄怡林
 💻

_zuixinwang
💻

_luopei
💻

_前端爆冲
 🚇

_{Xie Jay}
🚇

_linxiang
💻

_{程序员包子}
💻

_{peter G}
💻 📖

_gimmyhehe
💻

_dong
💻

_凌览
 💻

_Caesar-ch
💻

_chenqifeng66
⚠️

_Zz-ZzzZ
⚠️

_Lyx
💻

_{Spark Bill}
💻

_wendZzoo
💻

_{Gweesin Chan}
💻

_{Binks_}
📖

_yoyo
💻

_Kif
💻

_jack-zishan
💻

_LinboLen
💻

_vaebe
💻

_{YuYan Li}
💻

_shonen7
💻

_xlearns
💻

_tianxin
💻

_Xppp0217
💻

_AcWrong02
🐛

_betavs
💻

_{fanbingbing16}
💻

_dyh333
📖

_{betterdancing}
📖

_David
💻

_falcon-jin
💻

_wuyiping0628
⚠️

_James
📖

_ichynul
💻

_Davont
💻

_{Nick Wu}
💻

_Floyd
💻

_Jevin
💻

_星河
 💻

_{Ranier Yu}
💻

_Zcating
💻

_{Aoi Kaze}
⚠️

_{Simon He}
📖

_zhangpaopao
🔧

_Nowitzki41
💻

## ❤️ Credits

Thanks to:

- The [element](https://github.com/ElemeFE/element) project which is an old component library based on Vue.js. TinyVue draws on Element at the beginning of its design, and is compatible with Element's component API.
- The [floating-ui](https://github.com/floating-ui/floating-ui) project which is a small library that helps you create "floating" elements such as tooltips, popovers, dropdowns, and more. Many components of TinyVue are based on the capabilities provided by Floating UI.
- The [vxe-table](https://github.com/x-extends/vxe-table) project which is a Vue-based table component, supports rich features, TinyVue's Grid component is based on vxe-table.
- The [sortablejs](https://github.com/SortableJS/Sortable) project which is a powerful drag-and-drop library. The drag-and-drop sorting function of TinyVue's Grid / Transfer / Tabs and other components is based on Sortable.
- [@adamwathan](https://github.com/adamwathan)'s article [Renderless Components in Vue.js](https://adamwathan.me/renderless-components-in-vuejs/), which inspired TinyVue's renderless component design architecture and ultimately enabled cross-end and cross-framework capabilities in the TinyVue project.

## License

[MIT](LICENSE)