Table of Content
- What is a Vue Component Library?
- Benefits of using UI Components
- List of Vue Components
- And that’s a Wrap!
1. What is a Vue Component Library?
When speaking about component libraries, it is quite evitable of you to think of a large project featuring a wide range of developers and designers. The main objective of Vue CLI here is to set design standards and principles for a project or company. But, the concept of a component library and its benefits are not based on the size of the application or project. I would say that a small project has as much to gain from a component library as a larger project. A Vue CLI (component library) is a set of reusable components. Here you have elements, they provide a Chrome Extension that lets you customize your theme and preview it in real time
Whether its a folder featuring common components used throughout the application. It could be a distributed package on npm. It could also be a part of a bigger design system. A component library can be small and it can be large. Apart from there we have Bootstrap Vue (13.1K ⭐️) Bootstrap is one of the most popular free and open source CSS and JS framework that helps developers build responsive applications. The components of this library are also compatible with WAI-ARIA guidelines for web Accessibility.
However, there are no official rules for what a component library means. It depends on your project and your needs. It can be either component that you created yourself or a public library from a big company. There are dozens of public component libraries that you could use and take inspiration from. We have listed a handful of them in the end.
1.1 When to use a Component Library?
Let’s assume a situation where you are using a similar component in two or more different places. Most Vue developers tend to create a general component and place it inside a library folder. Then use that component in both places instead. If they need to differ in some way you can set this up with properties or other logic to determine its output.
Another reason to use a component library is if you are not interested in design and just want a component that looks good and does what it should. Then you can use one of the public libraries where you get a design and a battle-tested component out of the box.
2. Benefits of using UI Components
There has been a lot of buzz going for reasons to choose Vue framework for your development project or creating a component library. Well, one of the obvious advantages is to reduce complexity and make development way easier for your team. Without much ado, let’s just take a look at certain advantages offered by a Vue component library.
2.1 Collaborate Efficiently
Developers working with Vue UI component libraries often have realized the fact that it provides a great aid when they collaborate with the design team. Apart from enhancing collaboration, the UI component library also improves frontend development to a great extent. For instance, if a designer requires to design a new bunch of components what he or she will do is begin by simply checking the library and gathering all the necessary elements for creating a new Vue UI component.
In case, there is an element missing since they are new, all a designer or developer requires to do is designing new UI elements. After accomplishing the designs, the only thing they have to do is combine everything with the new element and the new component is there! Now in such a scenario, what if the front-end team happens to integrate the library into their workflow? Simple, the process of implementation of user interfaces will automatically start as soon as the designer adds the component to the library.
Now most of the time when we take a new project to build mobile apps, developers and designers often look for a custom look and feel in advance. So being a developer, what you need to take care of is create components with that and feel.
In most UI libraries there’s support for some theme-ability. This mainly means changing the colour palette used by all the components (primary buttons turns turquoise instead of blue, etc.) In my experience, it usually doesn’t stop with colours — there are also changes to how buttons, inputs, and checkboxes look. When using a UI library, you need to override classes (which hopefully does not include too many ! important’s). It can take time and effort to get existing components of your Vue apps to look how you or the designer intended.
In your custom component library, to create dynamic applications is isn’t really a problem. Since you’re building it from the ground up, you don’t need to account for any existing styling.
2.3 Staying Consistent
A huge risk in designing software, website or products with multiple designers is consistency. If multiple designers work on a product and there are no libraries or strict guidelines, the design will become inconsistent: 100% guaranteed.
For example; if you use a primary button, it should always look the same to keep the usability as high as possible. Other designers will let their creativity decide how a button will look if you don’t work with a library. Instead of using the same button for a similar interaction, there will be multiple designs for just one button. We most often see this happening at the start of projects, but after a while, it is critical to even this out and create consistent styles for developing web applications.
2.4 Build Components in Isolation, to Make Them Reusable by Default
When building one of the components needed, you add the CSS that makes it match the design on that page. All good, job is done! After a while, a designer creates a new design for another page utilizing the same component you built, but with a few modifications. And for once, if it gets assigned to your colleagues (which accidentally is located in one of the other offices in your organisation) because he/she had time available for this task. Your colleague solves the task in the same way as you did because he/she didn’t know about the component you had already build. Now you have two very similar components in the same product leading to unnecessary bytes for the end-users and unnecessary code to maintain for the team.
However, the aforementioned example might seem far-fetched but nonetheless do you think it’s entirely unrealistic? Well, I disagree! I mean imagine what if people don’t talk or don’t do regular Vue code reviews – what would be the scenario? Probably, it will become hard to know regarding all features and several other parts of the application.
This is when a Vue component library or Vue development tools comes to the rescue! This enables developers to create a component in the Vue UI component library, you may find yourself being isolated right from the beginning. And when this happens, just make sure that:
It is reusable right from the beginning since web developers are forced to work outside of a certain page-context
Also, try to ensure that it is visible to other developers in the team, so they don’t end up building the same similar component, but instead, consider if they can reuse and/or extend the existing component. This saves time and money in the long run.
Now it won’t be right for me to say that component library solves all problems especially in regards to communication and code reviews but having one place for all components definitely helps that process and makes it easier.
Last but not least comes maintenance, since we have all components in one place it makes it way easier to maintain. Updating components or adding new features is done once and will be reflected on every implementation of that component. Pushing updates is a lot faster and more consistent. It’s also easier for new employees to get an overview of the architecture and what bricks you have to play with.
3. List of Vue Components
3.1 Vue Material
There are 60 handcrafted components as part of the kit, two customized plugins, and three example pages.
Another interesting UI component library that offers Mobile UI Components based on Vue & WeUI (the folks behind WeChat). The library also supports a WebPack + Vue-Loader + Vux workflow.
As the name implies, VUX is originated from China and has most of its documentation in Chinese with minimal english translation. VUX is one of the leading Vue UI component libraries that has been emphasizing on quick development of mobile components for your Vue application.
Now in case, if you are considering building mobile apps then this one acts as a great help!
3.3 iView UI
Another interesting Vue UI component library is iView. This Vue UI library is a high-quality user interface tool kit that is mainly built on Vue.js 2.0. With dozens of Vue UI component, Iview has been used by giant companies like Alibaba, TalkingData, Lenovo, etc. The Vue UI component library design focuses on contrast and repetition plus, the library provides a CLI terminal for scaffolding projects.
Some of the astonishing features of this Vue UI library includes a high-quality user interface, designated CLI tool for scaffolding. In addition to this, iView Admin template can assist well in working with the Vue framework creating Vue Material is regarded as the best integration between Vue.js (Vue’s basic usage) and Material Design specifications because of its easy-to-use API. Iview UI also has its own CLI tools to help visually create projects and an offline version of the documentation.
3.4 Vue Material Kit
Another widely used name among the best Vue UI Component libraries includes Vue Material. Do you know what’s so unique about the lightweight library? It is that it’s not as opinionated as other frameworks. This means you need to make fewer design choices so that you can create desktop applications or mobile applications without the downside of having to override the default styles of the library.
Also, you can begin with your Vue project right on by using its fully-featured Advanced SPA boilerplate template based on Webpack. If you are looking for something solid but lightweight UI components which is also easy to use, just go for this one!
3.5 Mint UI
Specifically developed according to Material Design specifications, each component is built with a mobile first approach to be both responsive and extremely modular. It provides CSS framework and the size of the package is around 30Kbs which makes it easy to use for mobile applications. Such Vue UI component libraries include Toast, Indicator, Infinite scroll, Message box, Action sheet, pop-up, and a lot more. The CSS components include- Header, Tabber, Navbar, Buttons, Cell, Cell swipe, spinner, and so on. Overall, Mint UI is a great choice for creating web pages and mobile-looking applications with an iOS look and feel.
3.6 Keen UI
Here you will find 30 reusable components. The components are customizable by overriding the styles using SASS variables. you can integrate it into your project either using CDN or npm.
4. And that’s a Wrap!
Some of the Other famous component libraries are Vue Apollo, Fish UI (Fish Ui offers many components incorporating semantic CSS elements like Checkbox and many more)
I hope I have covered almost every single aspect here! In case, if you have any query regarding the topic, feel free to mention that in the comment section below!