Choosing the Right Front-End Framework for Your Vue App
Vue.js is one of the most popular JavaScript frameworks and is being adopted by many web and hybrid-mobile developers for their personal and working projects.
Unfortunately, Vue.js mainly focuses on the application logic and not on its appearance. It is usually a good idea to use it in combination with a front-end UI framework to enrich the user interface.
In this article, we will analyze some of the most popular front-end frameworks currently available for Vue. We will compare their strengths and weaknesses to help to choose the most appropriate one, depending on the use cases.
Vuetify.js — The Best Material Design Framework
If you want to create an application that follows the Material Design standard, Vuetify.js is probably the best choice.
Vuetify is a reusable semantic component framework for Vue.js that aims to provide clean, semantic and reusable components. It supports all the modern browsers and is compatible with Vue CLI-3. It also offers basic templates for Simple HTML, Webpack, NUXT, PWA, Electron, A La Carte, Apache Cordova.
Unfortunately, the documentation is just average. All of the numerous components are documented, but some are missing details and examples here and there. This may sometimes be frustrating as you may need to spend more time trying to understand how a certain component works. Luckily, it’s not a widespread issue but it’s advised to check it out if it meets your expectation, before starting the project development.
Vuetify’s Material Design implementation is very strict, which brings advantages for what concerns style standardization and components reusability. On the other hand, it doesn’t allow too much freedom for the style customization: changing the default element’s style is troublesome, but that has to be accepted as it’s not one of the goals of Vuetify. Unfortunately, if Material Design is not your thing and you want your app to look more iOS-like, or need a custom design, Vuetify.js usage should be avoided. If you are into Material Design or need to use it, Vuetify is hard to beat.
Quasar Framework — A Powerful and Stable Choice
If you are looking to build a stable and fully customizable application, Quasar Framework is probably one of the most robust solutions currently available.
Quasar is a open-source framework that helps web developers create responsive++ websites/apps
The officially supported platforms are:
- SPAs (Single Page App)
- SSR (Server-side Rendered App) (+ optional PWA client takeover)
- PWAs (Progressive Web App)
- Mobile Apps (Android, iOS, …) through Apache Cordova
- Multi-platform Desktop Apps (Electron)
While the supported platforms are similar to what Vuetify.js supports, Quasar also allows the developer to customize their applications with the iOS native theme style. Google Material design is also available. Both themes implementation does not strictly follow the official guidelines so it would be good to check some examples before choosing to use this framework for your next project.
Not only does Quasar support modern browsers, but also Windows Phone and Blackberry platforms, even if outdated. A powerful feature is the ability to progressively migrate your existing projects thanks to UMD (Unified Module Definition) version. To do so, Quasar allows developers to add a CSS and JS HTML tag into their existing project, making them ready to use without requiring a building operation.
Moreover, not only the components are fast and complete, but it also offers additional features to facilitate Cordova and Electron deployment process. With the `quasar.conf.js` file simplifies Webpack configuration. Additionally, there is an easy and powerful template generator to help you get started.
Unfortunately, while documentation offers a lot of examples, it may lack some comprehensive explanation. An experienced developer should not have issues with it, but a beginner may find difficulties that should be accounted for.
If your objective is to have full control, customization and performance, Quasar is definitely one of the best choices.
Element UI — Focused on Web and Desktop Apps
Element UI is a Desktop UI toolkit for Vue.js. Its components are not numerous like the ones that can be found in Vuetify or Quasar, but are all very well implemented and easy to use.
Element UI is not focused on Mobile development, mainly because it lacks responsiveness on mobile WebViews. It has been build to be used for Web and Desktop apps, where usually the local machine performance is not an issue as it is on a Mobile environment. For example, if you are planning to build an Electron application, Element UI would definitely be a good choice.
While the project’s original documentation is mainly in Chinese language, it has been completely translated into English and it’s very well written and organized. To be more specific, it easily guides the developer step by step and provides simple but complete examples of all the available components.
Unfortunately, Element UI does not yet support Vue3, so you should carefully consider its usage before making your choice.
Bootstrap + Vue — Flexible and Well Documented
Many developers already have experience in using Bootstrap, or have at least heard about it. Bootstrap is probably the world’s most popular front-end CSS library, allowing to build responsive mobile and web applications.
Luckily, there is a project called Bootstrap + Vue that, as the name says, combines the two technologies to offer maximum flexibility for your app development. To be more specific
Bootstrap-Vue provides one of the most comprehensive implementations of Bootstrap V4 components and grid system available for Vue.js 2.4+, complete with extensive and automated WAI-ARIA accessibility markup.
The supported platforms are pretty much the same as all the other frameworks. There are currently two `vue-cli` templates available:
- webpack-simple: a quick scaffold for a proof of concept or small app
- webpack: a larger, production-ready template with more options
The components and directives availability look quite exhaustive moreover a specific component or a set of components can be singularly imported, based on the developer’s needs. There are three ways to do so:
- Cherry pick the component/directive by importing it in the file where it’s being used and adding its definition to your own component definition.
- Register them globally.
- Import components groups and directives as Vue plugins. Depending on the target components/directives, all subcomponents and related directives are imported as well.
The documentation is very extensive and well organized, making Bootstrap-Vue a strong choice for both beginners and experienced developers.
While frameworks like Vuetify try to strictly follow the official Material Design specifications, Bootstrap-Vue offers more freedom and space for creativity while following the original Bootstrap’s core goal of allowing the quickest possible HTML markup.
Conclusion
We have analyzed some of the most popular, currently available front-end frameworks for Vue. Hopefully, this article gave you some useful insight about which framework may be suitable for your next project.
It’s good to keep in mind that these frameworks are in constant evolution and some of the opinions written at the time the article has been published may become questionable in the future. There are a lot of other really good front-end UI frameworks for Vue out there, so I invite you to be curious and try them out.
To conclude, we would also love to hear what’s your favorite front-end framework/library for Vue and why?
