What is Varlet UI

Let’s introduce this library to those who are not familiar with it. Varlet UI is a Material style mobile component library based on Vue3. It fully embraces the Vue3 ecosystem and is maintained by the component library team established by the community. Characteristics are as follows

  • 🚀 provides 50 high quality generic components
  • 🚀 components are very lightweight
  • 💪 developed by Chinese, perfect English and Chinese documents and logistics support
  • 🛠️ Supports on-demand import
  • 🛠️ Theme customization is supported
  • 🌍 Support internationalization
  • 💡 supports webstorm and vscode component properties highlighting
  • 💪 support SSR
  • 💡 support Typescript
  • 💪 ensures more than 90% unit test coverage and provides stability assurance
  • 🛠️ Supports Dark mode

Our little gang

Our crew members are all working on iterations in their spare time and have been in continuous maintenance for nearly a year since the official release of version 1.0 on April 21, 2020. In this year, our small group gradually grew from three to more than ten people. We gained friendship, shared passions and had more direct technical communication channels. Now they are dealing with their own things, such a change is really emotional. That may be the beauty of open source. From one person making our own things, to a group of people making everyone else’s things, we also like to use our own things.

Why make Vue2 version

As mentioned above, Varlet is a Vue3 based repository and cannot be used in a Vue2 environment. At the same time, we also received a lot of feedback, some children are still using Vue2, or can not directly migrate to Vue3 due to the company structure, we have been concerned about such a situation, considering the time cost of migration, we cannot immediately take action to do such a thing.

Until one day, I accidentally got to know a young UP leader at the front of a small broken station. Both he and his fans were willing to do such a thing, and they had super high execution power. We briefly held migration meetings, rewrote the component library packager that built for Vue2, reconfigured the entire command line into the architecture of Vue2, and after a month of hard work, we were pretty much done.

Varlet Vue3 and Varlet Vue2

Although we architecturally separate Varlet Vue3 and Varlet Vue2 into two different repositories, there is a high degree of consistency in our API. In addition, we have made a lot of efforts on the consistency of component behavior, and there is almost no difference in the way of use, and in the subsequent maintenance process, we will also take Varlet Vue3 as the core, synchronization function, to minimize the difference.

Still, we want to try Vue3 as often as we can, because Vue3 is really good. This Vue2 version is also a way to give some young students who are still using Vue2 a taste, and also give us more feedback. We attach great importance to user experience and developer experience.

Vue3

Vue2

Varlet Vue2 current status

At present, Vue2 version has completed the migration of all component functions, and is supplemiting unit testing to make it more stable. Currently, it only supports the use of full import, and has not tested the server rendering. It is suitable for internal testing and early taste, and is not recommended to use in production environment.

We also welcome friends from the community to help us correct mistakes. Documentation errors, functional inconsistencies with Vue3, component bugs, and unit test errors can all be mentioned in our Vue2 issue list. PR is also welcome.

compatibility

Our migration is based on the Vue3 version of the source code to modify and rewrite the implementation, the theme system still uses CSS Variable, still provides first-party dark mode support, Vue3 version and Vue2 version of the browser compatibility will remain the same, which helps to maintain the consistency of the behavior of components in the two repositories.

Build tools

We still recommend building projects using Vite. As with Vue3, we will provide automatic import plug-ins on demand and vscode documentation prompts for Vue2. We will also optimize Volar to make it more comfortable for developers to develop with Vue2

Thanks for contributions (in no particular order)

The following are all code contributors, but open source contributions are not only code contributions, and thanks to those who give us ideas and guidance. Some of us went to great lengths to recommend this library to our friends and colleagues (we still don’t deserve it), but we can’t thank them enough.

Vue3 version

Vue2 version

A link to the

Vue3 version

Varlet Vue3 Github repository Varlet Vue3 documentation Varlet Vue3 component online editor can play

Vue2 version

Varlet Vue2 Github repository Varlet Vue2 documents

Write in the last

Open source is not easy, we hope you can support us a lot, help us a lot, a year ago from nuggets, thank you for your support, welcome everyone to star, fork, PR, issue, and all kinds of advice ~. This will help us a lot