Vue DevUI is a Vue3 component library based on DevUI design architecture, advocating immersive, flexible and minimalist design values, using the latest Vue3+Vite+TypeScript+JSX technology stack.

Currently, the following features are supported:

  1. useVue3+TypeScript+JSX33 basic components developed
  2. Complete component demo/ API documentation
  3. Support on demand import
  4. Support theme customization (built-in dark and light mode two themes)
  5. Support internationalization
  6. supportSSR

This is a purely community run open source project.

Vite just released version 2.0.0-beta.15 on January 9, 2021, which we used to build the foundation engineering for Vue DevUI.

On November 28, 2021, after 323 days, we have:

  • 67contributors
  • 61A component
  • 294A PR
  • 1409Time to submit

Here is a list of contributors to Vue DevUI:

Thank you to every DevUI contributor!

The latest version of Vue DevUI is v1.0.0-beta.7

The time is almost ripe for a 1.0 release, and we plan to release Vue DevUI 1.0 on December 24, 2021. 🎉🎉 welcome to try Vue DevUI and give us feedback! Version 1.0 is just the beginning, and we welcome your contributions to build DevUI’s open source ecosystem!

Here are the latest developments in Vue DevUI.

Component (61).

🌟 : New components (8)

General (10)

  1. Button Button assembly – Zcating
  2. ClickOutside Click on external elements – kd554246839
  3. Fullscreen Fullscreen – micd
  4. Icon Icon – Kagol
  5. Overlay Mask layer – zcating
  6. Panel Panel component – To0Simple
  7. Ripple Water ripples – ErKeLost
  8. Search Search box – Laiweilun
  9. Status Status – LiuSuY
  10. Sticky then – maizhiyuan

Navigation (6)

  1. 🌟Accordion Accordion – Zyc2019
  2. Anchor Anchor – Asian-TMAC
  3. 🌟BackTop back to top – c0dedance
  4. – Jecyu
  5. 🌟Dropdown drop-down menu – zcating
  6. NavSprite navigation wizard – Flxy1028
  7. Pagination – 50-50
  8. StepsGuide operation guide – Pupulus
  9. Tabs TAB component – FLxy1028

Feedback (7)

  1. Alert Alert – to0simple
  2. Drawer Board – NowisFuture
  3. Loading Loading prompt – 50/50
  4. Modal popover – Zcating
  5. Popover Suspension tip – JsHai
  6. Toast global notification – IEL
  7. Tooltip prompt – xiao_jius_father

Data entry (16)

  1. Cascader Cascading menu – Laiweilun
  2. CheckBox CheckBox – brenner8023
  3. DatePicker DatePicker – mrundef
  4. EditableSelect can be entered in the drop-down box – chengxi_24
  5. Form Form – AlanLee97
  6. Input text box – Brenner8023
  7. InputNumber Number input box – yqsheng
  8. Radio check box – Brenner8023
  9. Select drop-down selection box – lookForWhat
  10. Slider – httpxiaobocom
  11. Switch Switch – Brenner8023
  12. TagInput – Brenner8023
  13. 🌟Textarea multi-line text box – afterain
  14. TimePicker TimePicker – Dr_HHH
  15. Transfer shuttle frame – GuaimeengMengxiaoxiong
  16. TreeSelect Tree selection box – Mingol
  17. Upload – ~zZ.Lucky

Data Presentation (12)

  1. Avatar Avatar – to0simple
  2. Badge – Duqingyu Badge
  3. Card Card – Vergil
  4. Carousel – onlyoupon
  5. 🌟Comment – Li-Shiyao-njl
  6. 🌟Gantt Gantt – liuyingbin
  7. ImagePreview ImagePreview – sise209
  8. Progress bar – Lao — Hu
  9. QuadrantDiagram QuadrantDiagram – nowisfuture
  10. Rate Score – ~ zz.lucky
  11. Skeleton Screen – IvestsZheng
  12. Table – Kagol & IvestsZHENG
  13. 🌟Tag Tag – c0dedance
  14. TimeAxis — jenson-miao
  15. Tree – Gxuud & Sufuwang

Layout (2)

  1. 🌟Grid Grid – Tanwenxue
  2. Layout – Tanwenxue
  3. Splitter – Jecyu

A major breakthrough in Table components

After November’s development, in addition to the addition of 8 new components, we ushered in the DevUI component library complexity TOP1 Table component major breakthrough!

Currently, the Table component supports the following functions:

  1. Base table rendering
  2. Table basic style customization: zebra pattern, table head color, layout, Hover state
  3. Support loading and no data state
  4. Table row check
  5. Table column sorting and filtering
  6. Header fixed
  7. Table column fixation

Thank Zcating and silent students for their hard work!

Zcating is a PMC member of our DevUI open source organization. In the Story of DevUI open source, we also spend a lot of space to introduce Zcating to everyone, because he is very excellent and actively participates in the whole process of DevUI open source. At present, he has always been very active. Actively review code, propose and solve problems, and is currently the owner of DevUI’s TOP1 Table component, as well as the owner of Dropdown, Modal, Overlay, and many other components.

This is Zcating’s personal official account: ZCX studio, welcome to pay more attention to him!

Silent student is the owner of Skeleton screen component. Although he has not been a member of Vue DevUI open source project for a long time, he is very active and is currently the TOP5 contributor of Vue DevUI by number of submissions.

As for the design and thinking of Skeleton screen component of Skeleton, silent students also wrote a special article to summarize, which is very good. It not only describes the technical implementation principle of Skeleton, but also thinks about the application scenario and value of Skeleton component. Please give him a thumbs up and support!

Document my first open source component: the Skeleton screen

DevUI is recruiting contributors

Both Vue DevUI and Ng DevUI are currently recruiting community contributors, welcome to join us!

Learn the latest Vue3+Vite+TypeScript+JSX technology, get to know the community partners who love learning and open source like you, build an excellent Vue3 component library products, and build an open, friendly and growing open source community ecosystem together!

Add small assistant wechat: Devui-Official to get you into devui technical communication group.

Welcome to: DevUI open Source story, and join the DevUI open source ecosystem to build!