[This is the 12th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.]
Vue3 has been out for a while, and the version is stable and ready for production. While many developers have given this release mixed reviews, the new release is due to a lack of resources associated with a re-build of the ecosystem. Compared to Vue2’s rich UI framework, Vue3 is a bit sparse, which is one of the reasons why developers use Vue3.
Using a UI framework in Vue is a good combination because it allows developers to focus more on abstracting common components, thus providing a maintainable, efficient development process. In no particular order, this article recommends a few of the popular VUE3 UI frameworks that provide a great developer experience, use them wisely, or learn from them.
Ant Design Vue
Official website: 2x.antdv.com/components/…
Ant Design Vue is a very mature framework that makes it easy to create user interfaces with components that can be adapted to a variety of icon styles, fonts, and black themes. Ant Design Vue continues to improve its more than 60 components, basically covering most of the project’s requirements, and making them better and more accessible.
The Ant Design package at Vue3 is smaller, feels lighter, and supports SSR (as well as composite apis). Ant Design has sophisticated components such as data tables, stats boxes, POP confirmations, modes, and pop-ups.
Ant Design Vue has 15K + stars on GitHub and 49K downloads per week, so the numbers speak for themselves.
BalmUI
Official website: next-material.balmjs.com/#/
BalmUI has released their version 9.0, which supports Vue3. Balm is based on Google’s Material Design, which is why it looks familiar. Balm comes with Vue plug-ins and instructions, as well as highly customizable components ranging from simple to complex.
BalmUI is evolving very quickly, and is ideal for Vue3 projects if you want to use a Material Design style that uses complex built-in instructions such as debouncing and UI ripples to create custom components.
Wave UI
Official site: antoniandre. Making. IO/wave – UI /
WaveUI is well positioned after the release of Vue3. Development of WaveUI began while Vue3 was still in the alpha stage, with the goal of supporting it as soon as its API stabilised, making it one of the first Vue3 UI frameworks.
WaveUI has more than 40 beautiful and responsive components ranging from a spreader to a calendar, and everything in between. WaveUI also provides utilities, customizability, and sophisticated integrated form validation capabilities.
WaveUI provides very beautiful components, animations are very good, and its style is consistent throughout the framework. Enterprise responsive Vue3 applications are a good choice.
Vuestic
Official website: vuestic.dev/
Vuestic is one of the most beautiful open source management panels in Vue. It is good at writing maintainable Vue code and making flexible components and interfaces.
The team recently released Vuestic’s Vue3 version, which includes the popular Vuestic Admin UI and more components. Vuestic emphasizes its out-of-the-box support for keyboard navigation, which is popular with the front-end community because of the user experience it provides.
Vuestic offers over 50 uniquely functional and broadly configurable components designed to work at almost any screen resolution. Vuestic provides seamless translation support and keyboard accessibility throughout the framework.
Vuestic has established itself as one of the most beautiful Vue3 UI frameworks with its beautiful component catalog. They are now stepping up to create more complex components, such as date pickers or data tables, that are sure to be as creative as their current offerings.
Element+
Official website: element-plus.org/#/zh-CN
Element+, which has made its name in Vue2, brings a large number of unobtrusiveness components to Vue3, and most of the content needed to create a very complex application is already made and available. Element+ provides mature date and time selectors, trees, timelines, and calendar components.
Element+ provides even the tiniest widgets a developer might need to build a UI, from simple animations to a frame-wide internationalization system that can be paired with the I18N to create custom translations and even add non-built-in languages.
With 11.1K + stars on GitHub, Element+ is on its way to becoming one of the most popular Vue3 UI frameworks on GitHub, meeting developer expectations with excellent issue management, timely updates, pluggable components, and high customization via SCSS variables.
Ionic
The official website: ionicframework.com/docs/vue/ov…
Ionic is one of the first UI frameworks to provide support for Vue3, Ionic is more mobile UI oriented, and the team knows how to cater to and maintain a good UI framework.
Ionic Vue is a mature framework with a stunning community, plenty of StackOverflow issues, enterprise support, and a large Slack channel with core members that make it easy to get support when you need it.
Ionic Vue framework, which has 45K + stars on Github, has been used by a number of major companies, including Airbus and Electronic Arts, and Ionic’s team is known for being good at maintaining their UI framework, which is a great choice for now and in the future.
Naive UI
Official website: www.naiveui.com/zh-CN/os-th…
Naive UI is posted on Twitter and then forwarded by Vue’s creators, driving a lot of traffic to this nascent component library. Now, Naive UI has 5.1k stars on GitHub in less than three months.
It offers over 70 well-crafted components that can be seamlessly integrated into almost any type of Vue3 application. Naive components are high-performance, highly customizable, and support for TypeScript, providing a great development experience.
The document site is easy to navigate and has full custom input to help developers preview how the components will look in their own theme. You can use these options to create your own full theme with color patterns and fonts. This custom theme can be downloaded and easily added to the application to override the default values.
Quasar
Official website: nex.quasar.dev /
Quasar is a complete, performance-centric framework for building Vue user interfaces (SPA, PWA, SSR, mobile and desktop). In addition to Vue, Node and Webpack, Quasar includes Cordova, Capacitor and Electron. They can help build desktop and mobile experiences without having to learn separately.
The Quasar framework seems to be based on Material Design, but once you get started, everything can be well customized to suit your own Design system.
Support for Vue3 is also fast, and Quasar has released almost all of the V1 components, plug-ins, and directives. In addition, they have released composable components to help developers learn more about the Quasar API.
PrimeVUE
The official website: primefaces.org/primevue/sh…
PrimeVUE was also one of the first frameworks to support Vue3, and it didn’t disappoint. With more than 80 components, PrimeVUE proves to be one of the most extensive frameworks on this list.
Components include password forms with meters, sliders, trees, graphics, split buttons, knobs, charts, and more. PrimeVUE even integrates a form-validation library, Vuelidate. Comes with pre-made themes and provides a full-fledged visual editor to help developers customize their own themes.
conclusion
Moving from Vue2 to Vue3 will become easier as the ecosystem migrates, so combining these UI frameworks with the APIS and responsiveness offered by Vue3 will make project development better, faster, and more flexible.