The best Vue.js Frameworks 2024

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  60790

Nuxt is an opinionated framework that helps you create performant and SEO-friendly fullstack Vue apps. 

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 development easier for you.

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

Static Site Generators

VuePress  2828 & VitePress 18232

VuePress is a static site generator made by the Vue.js team. 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 2828 is a themeable solution that gets you from zero to published in no time. VuePress 1 is built on top of Webpack, but VuePress 2 also supports Vite.

A lightweight Vue 3 alternative also built by the core team on top of Vite is VitePress 18232, which is more opinionated and minimal. 

VuePress Vue-powered Static Site Generator
icon-eye-dark Created with Sketch. 3.627
Vitepress Static Site Generator
icon-eye-dark Created with Sketch. 2.339

eCommerce Frameworks

Vue Storefront  10942

Vue Storefront is an open-source headless eCommerce framework that lets you create frontends for any eCommerce backend or CMS. It's an API-first solution based on Nuxt.js, providing a great starting point for eCommerce, including a ready-to-use theme (Storefront UI).

It's an active open-source project adding new useful features and integrations regularly.

Alokai (formerly Vue Storefront) Frontend Platform for Headless Commerce
icon-eye-dark Created with Sketch. 12.976
StorefrontUI UI Framework for eCommerce
icon-eye-dark Created with Sketch. 21.353

UI Frameworks & Libraries

Vuetify 41032

  • ✅ Support for Vue 2 + 3

Vuetify is an open-source material design component framework for Vue.js that has been around since 2016.

It offers a large collection of components including flexible form fields, app bars and components for viewing larger amount of data. It's suitable for simple or more complex enterprise-grade use cases.

You can view some apps built with Vuetify here!

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

Quasar  27204

  • ✅ Support for Vue 2 + 3

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. 7.463

PrimeVue  14456

  • ✅ Support for Vue 2 + 3

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. 44.565

Element UI 54057 & Element Plus 27694

  • ✅ Support for Vue 2 + 3

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 – e.g. by offering Axure or Sketch templates.

Element UI is the Vue 2 version, and Element Plus is its successor based on Vue 3.

Element UI UI Toolkit
icon-eye-dark Created with Sketch. 122.048
Element Plus UI Component Library
icon-eye-dark Created with Sketch. 16.177

Naive UI 18507

  • ✨ Support for Vue 3

Naive UI is a customizable Vue 3 component library. In the words of its creator it's "fairly complete, not too slow and kinda interesting".

Naive UI is written in TypeScript and offers more than 80 treeshakable components – a nice, themeable system!

Naive UI Vue 3 Component Library
icon-eye-dark Created with Sketch. 38.048

Headless UI Vue 15558 & Nuxt UI 6854

  • ✨ Support for Vue 3

Headless UI is a set of unstyled, accessible UI components that are designed to integrate with TailwindCSS (built by Tailwind Labs themselves).

NuxtUI is a styled, more ready-to-use option which is built on top of Headless UI. It provides everything related to UI when building apps with Nuxt - components, icons, colors, dark mode and even keyboard shortcuts.

Headless UI Vue UI Component Library
icon-eye-dark Created with Sketch. 16.004
Nuxt UI Component Library for Nuxt
icon-eye-dark Created with Sketch. 12.461

Radix Vue 6741 & shadcn-vue 10487

  • ✨ Support for Vue 3

Radix Vue is a port of the React-based Radix UI primitives. It's an open-source, unstyled UI library for building design systems and web apps. You can use the customizable components as a base layer of your design system, or adopt them incrementally.

It focuses on accessibility, so all components are WAI-ARIA compliant, supporting keyboard navigation and following best practices.

You can also check out the component library shadcn-vue that is built on top of Radix Vue and TailwindCSS, offering 40+ components!

Reka UI Unstyled & Accessible Component Library
icon-eye-dark Created with Sketch. 3.998
shadcn-vue UI Component Library
icon-eye-dark Created with Sketch. 8.039

Ant Design Vue 21629

  • ✅ Support for Vue 2 + 3

Ant Design Vue is a Vue implementation of the React-based enterprise component library Ant Design. 

It offers 70 customizable UI components including flexible tables, form components, lists and layout options for grids, menus and more.

Ant Design Vue Enterprise-class UI component library
icon-eye-dark Created with Sketch. 8.623

Buefy  9519 & Oruga 1165

  • ✅ Support for Vue 2 + 3

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

Buefy has been around for quite a bit and was a popular choice, so we did want to include it here, even though the main branch currently only supports Vue 2. There does exist a (WIP) Vue 3 version now (buefy-next), though.

Initially, Buefy was not intended to get a Vue 3 port – Oruga UI was planned to be an alternative for Vue 3 by the core maintainer of Buefy. It is a minimal UI component library that doesn't depend on any CSS framework. It offers a set of components that give you the flexibility to make them your own. Oruga offers a default stylesheet, but it contains only essential rules to display the components. It's super lightweight and unopinionated.

Now that both are (going to be) Vue 3-ready, both frameworks might be interesting for you!

Buefy UI Component Library
icon-eye-dark Created with Sketch. 5.720
Oruga UI Component Library
icon-eye-dark Created with Sketch. 3.633

Mobile UI Frameworks

Ionic Vue 47774

  • ✅ Support for Vue 2 + 3

Ionic is an open-source toolkit for building native-looking apps for iOS, Android and the web from one single codebase.

Their Vue version provides their UI components including animations and gestures with Vue-specific tooling. Smooth & straightforward!

Ionic Vue Cross-Platform Mobile App Development Framework
icon-eye-dark Created with Sketch. 7.354

Framework7  18430

  • ✅ Support for Vue 2 + 3

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. 6.153

Onsen UI  8859

  • ✅ Support for Vue 2 + 3

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. 4.173
 
Armin Ulrich
Written by
Armin Ulrich
Posted on
January 17, 2024
Similar Articles
Our Point of Vue: Evolving through Innovation at Veoci [via Vuetify]
September 14, 2018  •  in #Vuetify
In the last 7 years, Veoci's platform evolved from using Vanilla JS & jQuery to BackboneJS and ultimately Vue – using the Vuetify Framework. This is the story about their journey!
Server-Side Rendering With Laravel & Vue.js 2.5 [via Antony Gore]
April 10, 2018  •  in #Bookmarks
In case you didn't notice before: Laravel is kinda my jam! So I was excited for Server-Side-Rendering being supported for Laravel since last year / Vue.js 2.5 😊 If you need to jump into SSR with Vue.js & Laravel, I recommend Anthony Gore's articl...