Choosing the Right Front-End Framework for Your Vue App

Andi Pavllo
Sep 19, 2018 · 6 min read
Image for post
Image for post

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

Image for post
Image for post
Login form example implemented with Vuetify

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.

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.

Image for post
Image for post
An overview of Quasar’s documentation

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.

Image for post
Image for post
A dashboard implemented with Element UI

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

Image for post
Image for post
Bootstrap + Vue Carousel implementation

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

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:

  1. 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.
  2. Register them globally.
  3. 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.


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?

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store