Top 5 CSS frameworks for your Vue.js project (2021)

If you’re a front-end developer like me, you’re probably using CSS frameworks. They save you development time, make your websites responsive, consistent and well-structured.

Some of the most popular CSS frameworks have been adapted for single page applications (SPAs) such as Vue.js.

If you’re building a Vue.js app and want to choose the best CSS framework of 2019 here’s a list for you.

BoostrapVue – Bootstrap + Vue

BootstrapVue is the most popular CSS framework adapted for Vue.js. It has almost 10,000 stars on GitHub and is using the world’s most popular CSS framework – Bootstrap 4. Bootstrap was initially built by Twitter.

With BootstrapVue you can build responsive, mobile-first projects on the web using Vue.js and the world’s most popular front-end CSS library — Bootstrap v4.

Pros:
– There’s a long list of components you can choose from.
– It’s very intuitive.
– Easy to install and start using.
– Has good community support.
– Updated frequently.
– Well documented.
– Components can be individually imported.
– WAI-ARIA accessibility markup.
– Doesn’t require jQuery.
– Backed by Twitter.
– SASS support.

Cons:
– UX/UI similarity. There will be thousands of Vue.js apps that will look the same as yours.
– Not the best breakpoints for screen widths support. (See the comment)

Buefy – Lightweight UI components based on Bulma

Buefy is build using Bulma, a very popular, open source, CSS framework and has over 5000 stars on GitHub.

Lightweight UI components for Vue.js based on Bulma.

Pros:
– Lightweight.
– Well documented.
– Good community support.
– Updated frequently.
– Components can be individually imported.
– Built with SASS.
– Mobile first.
– A lot of UI components to choose from.

Cons:
– A lot of open issues on GitHub (over 150).

Vuetify – Material Design Component Framework

If you’re building a project that follows the Material Design by Google – Vuetify will be the best choice. It has over 19,000 stars on GitHub.

Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze.

Pros:
– Based on flexbox.
– Well documented.
– Vibrant community.
– Vue CLI 3 support.
– A lot of UI components.
– Continuous support.
– Best Material Design Framework for Vue.js.

Cons:
– Annoying syntax: a lot of nesting.
– A lot of open issues on GitHub (more than 600!).
– Not easy to customise default components.
– Limited to material design projects only.

TailwindCSS – a utility-first CSS framework

Tailwind CSS is different from all the other frameworks reviewed here. Instead of providing predesigned UI components (cards, tables, form fields etc) it uses low-level utility classes that let you build custom designs without leaving HTML.

You can use Tailwind CSS to build your next Vue.js projects. You can install it using an npm package (learn how to install npm packages). It has over 12,000 stars on GitHub.

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Pros:
– Uses CSS classes.
– More flexible than other frameworks.
– Well documented.
– Great for custom designs.
– Good community support.

Cons:
– Inconsistency throughout your project.
– Too many classes.
– Too young, still at version 1.0.4.

Quasar Framework

Quasar is a Material Design-based framework, designed to build high-performance Vue.js user interfaces. It has over 10,000 stars on GitHub.

Quasar officially supports the following platforms:
– Single page applications (SPAs)
– Progressive web apps (PWAs)
– Server-sider rendered apps (SSR)
– Hybrid mobile apps
– Multi-platform desktop apps

A massive pool of quality components ready for dropping directly into your existing or new projects today.

Pros:
– Well documented.
– A lot of UI components.
– Great for building PWAs.
– Great community support.

Cons:
– Material Design only.
– Not easily customisable components.
– A lot of open issues on GitHub (over 100).
– Still at version 1.0.0 (released 19 hours ago).

Which framework is right for you?

It depends on wether you’re using Material Design standard or not, building a progressive web app or a single page application, want to make your app consistent or custom.

I bet the only way to find out is to try a few and compare them yourself.

If you think that I missed some of the frameworks – let me know in the comments below.

Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-css-frameworks

PS: Make sure you check Vue.js free hosting options and subscribe to my newsletter.

Incoming search terms: