The best Vue.js Frameworks 2021

Framework-ception! This collection of frameworks helps you kickstart your Vue projects. There's a variety of libraries within the Vue-niverse that support you with routine tasks and boilerplate code.

If you think we're missing an essential entry on this list, just tell us via Twitter @MadeWithVueJS!

General Frameworks

Nuxt.js  37249

Nuxt is an opinionated framework for creating Vue apps. A framework for the framework, so to say. It makes it easy to develop universal apps (but also helps with developing typical Vue SPAs).

Nuxt focuses on the UI rendering aspect and offers modes for server-side rendering, static site generation or creating an SPA. It presets all of the config and structure you need to make the development easier for you.

Nuxt.js Intuitive Vue Application Framework
icon-eye-dark Created with Sketch. 16.101

Static Site Generators

VuePress  19215

This static site generator is made by the Vue.js team itself. Originally, it has been developed to power the official Vue Docs.

It works with a markdown-centered project structure, and generates pre-rendered HTML that then feeds into an SPA. VuePress 19215 is a pretty minimal, lightweight and themeable solution that gets you from zero to published in no time. As of now, it offers a theme for documentations and a blog out of the box.

VuePress Vue-powered Static Site Generator
icon-eye-dark Created with Sketch. 5.448

Gridsome  7781

Gridsome is an open-sourced static site generator powered by GraphQL and Vue.js. It helps you quickly build PWAs for any data source. You can connect it to headless CMS, local files or APIs.

It takes care of performance optimization by pre-rendering HTML, code splitting, automatic image compression, lazy loading and more.

Gridsome Jamstack Framework
icon-eye-dark Created with Sketch. 3.089

eCommerce Frameworks

Vue Storefront  8711

Vue Storefront is a framework that lets you create PWA for any eCommerce backend – Magento, Pimcore, BigCommerce, Prestashop,... It helps you build performant store frontends based on a microservice architecture.

It's a very active open-source project (180+ contributers) that offers new useful features and services regularly – like a voice commerce integration to connect your store with Alexa or Google Assistant, or a GraphQL service.

Vue Storefront Headless PWA storefront for your eCommerce
icon-eye-dark Created with Sketch. 27.351

VueFront  14243

VueFront lets you create an SPA frontend for eCommerce sites and blogs. It currently supports Magento, PrestaShop and OpenCart, as well as WordPress.

Once you installed the VueFront web app and connected it to your CMS, you can choose from ready-made themes for your shop frontend – or customize them to fit your needs. The templates are all structured using Atomic Design.

This solution might be interesting for those with older shops, that want a tech update without having to build everything from the ground up!

VueFront Open-source PWA & SPA Frontend for CMS
icon-eye-dark Created with Sketch. 5.603

UI Frameworks

Vuetify 31559

Vuetify is a material design component framework for Vue.js that empowers developers to create amazing applications fast and efficiently.

It has been around since 2016 and is maintained and extended consistently.

All of the framework components are meticulously crafted to provide an easy to use interface while still maintaining the flexibility for seriously complex implementations. From first time developer to veteran, Vuetify has you covered.

Vuetify.js Material Component Framework
icon-eye-dark Created with Sketch. 81.235

Quasar  19122

Build responsive websites, PWAs, hybrid mobile Apps (that look native!) and Electron apps, all simultaneously using the same codebase, powered with Vue.

It offers a set of 120+ components from simple to more advanced like timelines, datatables, calendars, WYSIWYGs and more.

Quasar is modular and open-sourced, and is developed following best practices. It's stable since mid-2019.

Quasar Framework Multi-Platform Framework
icon-eye-dark Created with Sketch. 24.677

Vuesax  5158

Vuesax is a library of Vue components focusing on making development easy in style. It has a super interesting design that differentiates it from more utilitaritan frameworks, and makes your apps look different than yet-another material UI.

It has been developed and expanded continuously and we love to watch it grow! Currently, Vuesax 4 is in development.

Vuesax UI library
icon-eye-dark Created with Sketch. 28.726

Buefy  8748

Buefy is a lightweight library of UI components for Vue.js based on the Bulma framework and design. It's like a JS layer for your Bulma interface.

Buefy is only about 60KB (minified & gzipped) and has no other internal dependencies. One of its core principles is "Keep it simple", which can really be felt when using it.

Buefy UI Component Library
icon-eye-dark Created with Sketch. 19.334

Bootstrap Vue  13329

Bootstrap-Vue provides a very comprehensive implementation of Bootstrap V4 components and grid system.

It offers more than 30 plugins and 80 UI components and is accessible by default by providing automated WAI-ARIA markup.

(It's also super easy to integrate into Nuxt.js projects!)

Bootstrap Vue Bootstrap Implementation for Vue.js
icon-eye-dark Created with Sketch. 11.490

Element UI 50566

Element is a component toolkit available for Vue.js, React and Angular.

It does not only support the workflows of developers, but designers and project managers as well – f.ex. by offering Axure or Sketch templates.

Element UI UI Toolkit
icon-eye-dark Created with Sketch. 153.254

Vue Material  9441

Vue Material is lightweight framework built exactly according to the Material Design specs.

It's also the basis for the themes Vue Material Dashboard and Vue Material Kit by Creative Tim, which we're definitely fans of! 

Vue Material Material Design Framework
icon-eye-dark Created with Sketch. 23.963

Keen UI  4026

Keen UI is a lightweight collection of UI components inspired by Material Design.

It does not include styles for a grid system, typography etc – it focuses on interactive JS components. You can use it with any page layout, structure or CSS framework. 

Keen UI Material Design UI Library
icon-eye-dark Created with Sketch. 15.885

VueTailwind 1469

VueTailwind is a utility-first set of Vue components, created to be customized to fit unique application designs. This means that you are not bound by any pre-defined style like with Bootstrap or Material design.

It comes with configurable classes ready for TailwindCSS – hence the name!

We're absolute Tailwind fans, so we think this library is super interesting. While pre-styled components are always a great starting point, we do think that a unique brand aesthetic is important.

Vue Tailwind Customizable Component Library optimized for TailwindCSS
icon-eye-dark Created with Sketch. 18.763

PrimeVue  1444

PrimeVue is a comprehensive, open-source UI library for Vue with over 80 components. You can use it with Vue 3 as well as Vue 2.

It's design agnostic and offers various themes to choose from (Material Design, Bootstrap, FluentUI,.. – some of them premium), and helps you configure your own with their visual theme designer.

PrimeVue UI Component Library
icon-eye-dark Created with Sketch. 15.106

Mobile UI Frameworks

Framework7  16302

Framework7 is an open-source framework that lets you develop hybrid mobile apps or web apps that look like native apps. It offers iOS, Material Design and Aurora themes out of the box which makes it super easy to create apps with a native iOS or Android look and feel.

Framework7 Vue Framework for building iOS, Android & Desktop Apps
icon-eye-dark Created with Sketch. 11.773

Vux  17483

Vux is a collection of mobile UI Components based on Vue & WeUI that can be used in a modular way.

The (extensive) documentation is only available in Chinese right now, but be sure to check out the (english!) demo nonetheless.

Vux Mobile UI Component Library
icon-eye-dark Created with Sketch. 15.775

Onsen UI  8420

Onsen UI provides a variety of Vue.js components to create hybrid & mobile web apps with a native iOS & Android native look and feel as well.

The components automatically adapt to the respective styles according to the device the app is running on.

Onsen UI Vue Mobile App Development Framework
icon-eye-dark Created with Sketch. 12.007
 
Similar Articles
#intervue: Jonathan Johnson, Creator of the Webpack Bundle Analyzer Packtracker
16.07.2019  •  in #Intervue
In this part of our #intervue series, Jonathan Johnson shares his journey of building packtracker.io, a Webpack Bundle Analyzer built with Rails and Vue.js. Read on to find out about his process and challenges.
Vue.js App Performance Optimization – A Tutorial Series [via ITNEXT]
25.02.2019
Performance – such an important topic! In his tutorial series, Filip Rakowski is sharing what he and his team learned while working on making Vue Storefront load as fast as possible.