@opentiny/vue-common

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


Keywords
vue, vue3, frontend, component-library, components, vue-components, opentiny, renderless-components, headless-components, tiny-vue
License
MIT
Install
npm install @opentiny/vue-common@3.6.0

Documentation

OpenTiny Logo

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

English | įŽ€äŊ“中文

🌈 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.

npm i @opentiny/vue@3

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

npm i @opentiny/vue@2

2. Import component

Then you can use the TinyVue component(such as <tiny-button>) in the App.vue file.

<script lang="ts" setup>
  import { Button as TinyButton } from '@opentiny/vue'
</script>

<template>
  <tiny-button>Tiny Vue</tiny-button>
</template>

đŸ–Ĩī¸ Development

git clone git@github.com: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/

🤝 Contributing

Welcome to join our OpenTiny community!🎉

If you don't know how to start, please read our contributing guide.

  • Add the official assistant WeChat opentiny-official and join the technical exchange group.
  • Add to the mailing list opentiny@googlegroups.com

✨ Contributors

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

Thanks goes to these wonderful people (emoji key):

Kagol
Kagol

đŸ’ģ
ajaxzheng
ajaxzheng

đŸ’ģ
TC-twwang
TC-twwang

đŸ’ģ
jacknan
jacknan

đŸ’ģ
Pithy
Pithy

đŸ’ģ
heygsc
heygsc

đŸ’ģ
MangoWu
MangoWu

đŸ’ģ
ADNY
ADNY

đŸ’ģ
chenxi-20
chenxi-20

đŸ’ģ
Alaray
Alaray

đŸ’ģ
ing
ing

đŸ’ģ
į”ŗ君åĨ
į”ŗ君åĨ

đŸ’ģ
MomoPoppy
MomoPoppy

đŸ’ģ
WXC-Spring
WXC-Spring

đŸ’ģ
GaoNeng
GaoNeng

đŸ’ģ
acyza
acyza

đŸ’ģ
ygj6
ygj6

đŸ’ģ
MrWang2016
MrWang2016

đŸ’ģ
qinwencheng
qinwencheng

đŸ’ģ
éģ„æ€Ąæž—
éģ„æ€Ąæž—

đŸ’ģ
zuixinwang
zuixinwang

đŸ’ģ
luopei
luopei

đŸ’ģ
前įĢ¯įˆ†å†˛
前įĢ¯įˆ†å†˛

🚇
Xie Jay
Xie Jay

🚇
linxiang
linxiang

đŸ’ģ
į¨‹åēå‘˜åŒ…子
į¨‹åēå‘˜åŒ…子

đŸ’ģ
peter G
peter G

đŸ’ģ 📖
gimmyhehe
gimmyhehe

đŸ’ģ
dong
dong

đŸ’ģ
å‡Œč§ˆ
å‡Œč§ˆ

đŸ’ģ
Caesar-ch
Caesar-ch

đŸ’ģ
chenqifeng66
chenqifeng66

⚠ī¸
Zz-ZzzZ
Zz-ZzzZ

⚠ī¸
Lyx
Lyx

đŸ’ģ
Spark Bill
Spark Bill

đŸ’ģ
wendZzoo
wendZzoo

đŸ’ģ
Gweesin Chan
Gweesin Chan

đŸ’ģ
Binks_
Binks_

📖
yoyo
yoyo

đŸ’ģ
Kif
Kif

đŸ’ģ
jack-zishan
jack-zishan

đŸ’ģ
LinboLen
LinboLen

đŸ’ģ
vaebe
vaebe

đŸ’ģ
YuYan Li
YuYan Li

đŸ’ģ
shonen7
shonen7

đŸ’ģ
xlearns
xlearns

đŸ’ģ
tianxin
tianxin

đŸ’ģ
Xppp0217
Xppp0217

đŸ’ģ
AcWrong02
AcWrong02

🐛
betavs
betavs

đŸ’ģ
fanbingbing16
fanbingbing16

đŸ’ģ
dyh333
dyh333

📖
betterdancing
betterdancing

📖
David
David

đŸ’ģ
falcon-jin
falcon-jin

đŸ’ģ
wuyiping0628
wuyiping0628

⚠ī¸
James
James

📖
ichynul
ichynul

đŸ’ģ
Davont
Davont

đŸ’ģ
Nick Wu
Nick Wu

đŸ’ģ
Floyd
Floyd

đŸ’ģ
Jevin
Jevin

đŸ’ģ
星æ˛ŗ
星æ˛ŗ

đŸ’ģ
Ranier Yu
Ranier Yu

đŸ’ģ
Zcating
Zcating

đŸ’ģ
Aoi Kaze
Aoi Kaze

⚠ī¸
Simon He
Simon He

📖
zhangpaopao
zhangpaopao

🔧
Nowitzki41
Nowitzki41

đŸ’ģ

❤ī¸ Credits

Thanks to:

  • The 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 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 project which is a Vue-based table component, supports rich features, TinyVue's Grid component is based on vxe-table.
  • The sortablejs 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's article Renderless Components in Vue.js, which inspired TinyVue's renderless component design architecture and ultimately enabled cross-end and cross-framework capabilities in the TinyVue project.

License

MIT