Top 10 Vue.js Libraries

Navigating the ever-expanding world of Vue.js and all of its libraries can be difficult. That is why I have put together this guide to show you the Top 10 libraries according to awesomejs.dev.

1. @storybook/vue - Storybook for Vue is a UI development environment for your Vue components. With it, you can visualize different states of your UI components and develop them interactively.

   storybookjs / storybook

   Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

   

   Build bulletproof UI components faster

   
   

   
   

   Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. Find out more at https://storybook.js.org

   

   View README for:
   

   Table of contents

   • 🚀 Getting Started
   • 📒 Projects
     • 🛠 Supported Frameworks & Examples
     • 🔗Addons
   • 🏅 Badges & Presentation materials
   • 👥 Community
   • 👏 Contributing
     • 👨‍💻 Development scripts
     • 💵 Backers
     • 💸 Sponsors
   • 📝 License

   Getting Started

   Visit Storybook's website to learn more about Storybook and to get started.

   Documentation

   Documentation can be found on Storybook's docs site.

   Examples

   View Component Encyclopedia to see how leading teams use Storybook.

   Use storybook.new to quickly create an example project in Stackblitz.

   Storybook comes with a lot of addons for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to…

   View on GitHub
2. element-ui - Element, a Vue 2.0 based component library for developers, designers and product managers

   ElemeFE / element

   A Vue.js 2.0 UI Toolkit for Web

   

   
   

   A Vue.js 2.0 UI Toolkit for Web.

   Element will stay with Vue 2.x

   For Vue 3.0, we recommend using Element Plus(Element Plus is a community develop project)

   Links

   • Homepage and documentation
     • International users
     • Chinese users
     • Spanish users
     • French users
   • awesome-element
   • FAQ
   • Vue.js 3.0 migration
   • Customize theme
   • Preview and generate theme online
   • Element for React
   • Element for Angular
   • Atom helper
   • Visual Studio Code helper
   • Starter kit
     • element-starter
     • element-in-laravel-starter
   • Design resources
   • Gitter
     • International users
     • Chinese users

   Install

   npm install element-ui -S

   Quick Start

   import Vue from 'vue'
   import Element from 'element-ui'
   
   Vue.use(Element)
   
   // or
   import {
     Select,
     Button
     // ...
   } from 'element-ui'
   
   Vue.component(Select.name, Select)
   Vue.component(Button.name, Button)

   For more information, please refer to Quick Start in our documentation.

   Browser Support

   Modern browsers and Internet Explorer 10+.

   Development

   Skip this…

   View on GitHub
3. vuetify - Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.

   vuetifyjs / vuetify

   🐉 Vue Component Framework

   

   
   
   

   Supporting Vuetify

   Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from the entire Core Team. Sponsor Vuetify and receive some awesome perks and support Open Source Software at the same time! 🎉

   • Become a backer or sponsor on GitHub or Patreon (supports John and Heather)
   • Become a backer or sponsor on Open Collective (supports the Core team)
   • Become a subscriber on Tidelift
   • Make a one-time payment with Paypal
   • Book time with the Team

   What's the difference between GitHub Sponsors, Patreon, and OpenCollective?

   Funds donated through GitHub Sponsors and Patreon go directly to support John and Heather's full-time work on Vuetify. Funds donated via Open Collective are managed with transparent expenses and will be used for compensating work and expenses for Core team members. Your name/logo will receive proper recognition and exposure by donating on either platform.

   …

   View on GitHub
4. vuex - Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export/import.

   vuejs / vuex

   🗃️ Centralized State Management for Vue.js.

   Vuex

   

   ---

   Pinia is now the new default

   The official state management library for Vue has changed to Pinia. Pinia has almost the exact same or enhanced API as Vuex 5, described in Vuex 5 RFC. You could simply consider Pinia as Vuex 5 with a different name. Pinia also works with Vue 2.x as well.

   Vuex 3 and 4 will still be maintained. However, it's unlikely to add new functionalities to it. Vuex and Pinia can be installed in the same project. If you're migrating existing Vuex app to Pinia, it might be a suitable option. However, if you're planning to start a new project, we highly recommend using Pinia instead.

   ---

   Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable…

   View on GitHub
5. vue-devtools - Chrome and Firefox DevTools extension for debugging Vue.js applications.

   vuejs / devtools

   ⚙️ Browser devtools extension for debugging Vue.js applications.

   vue-devtools

   

   Documentation | Install the extension

   Monorepo

   Package	Description
   api	The public devtools API that can be installed in Vue plugins
   app-backend-api	Abstract API to link the Public API, the core and Vue handlers
   app-backend-core	The main logic injected in the page to interact with Vue apps
   app-backend-vue1	Decoupled handlers to support Vue 1 (soon)
   app-backend-vue2	Decoupled handlers to support Vue 2
   app-backend-vue3	Decoupled handlers to support Vue 3
   app-frontend	Vue app displayed in the browser devtools pane
   shell-chrome	Chrome/Firefox extension
   shell-electron	Electron standalone app
   shell-host	Development environment
   shell-dev-vue2	Demo app for development (Vue 2)
   shell-dev-vue3	Demo app for development (Vue 3)

   Contributing

   See the Contributing guide.

   License

   MIT

   Sponsors

   💚️ Become a Sponsor

   

   View on GitHub
6. vue-router - Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze.

   vuejs / vue-router

   🚦 The official router for Vue 2

   vue-router

   This is vue-router 3.0 which works only with Vue 2.0.

   • For the 1.x router see the 1.0 branch.
   • For Vue Router 4 (for Vue 3) see vuejs/router.

   Supporting Vue Router

   Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source project with its ongoing development made possible entirely by the support of Sponsors. If you would like to become a sponsor, please consider:

   • Become a Sponsor on GitHub
   • One-time donation via PayPal

   Gold Sponsors

   

   Silver Sponsors

   

   Bronze Sponsors

   

   ---

   Get started with the documentation, or play with the examples (see how to run them below).

   Development Setup

   # install deps
   yarn
   
   # build dist files
   yarn build
   
   # serve examples at localhost:8080
   yarn dev
   
   # lint & run all tests
   yarn test
   
   # serve docs at localhost:8080
   yarn docs

   Releasing

   • yarn run release
     • Ensure tests are passing yarn run test
     • Build dist files…

   View on GitHub
7. framework7 - Framework7 - is a free and open-source framework to develop mobile, desktop or web apps with native look and feel. It is also an indispensable prototyping tool to show working app prototype as soon as possible in case you need to.

   framework7io / framework7

   Full featured HTML framework for building iOS & Android apps

   

   

   Framework7

   Full Featured Mobile HTML Framework For Building iOS & Android Apps

   Supporting Framework7

   Framework7 is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider becoming a backer or sponsor on Patreon.

   Sponsors

   Getting Started

   • Getting Started Guide

   Framework7 Development

   First, install all dependencies:

   $ npm install
   

   Development Builds

   The following npm scripts are available to create development builds:

   • build:dev - build development versions of all packages (Core, Vue, React, Svelte)
   • build-core:dev - build development version of Core (vanilla JS) Framework7
   • build-react:dev - build development version of Framework7 React package
   • build-vue:dev - build development version of Framework7 Vue package
   • build-svelte:dev - build development version of Framework7 Svelte package

   Compiled results will be available in build/ folder.

   Production Builds

   To build production versions the following npm scripts are available:

   • build:prod - build…

   View on GitHub
8. quasar - Quasar (pronounced /ˈkweɪ.zɑɹ/) is an MIT licensed open-source Vue.js based framework, which allows you as a web developer to quickly create responsive++ websites/apps in many flavors

   quasarframework / quasar

   Quasar Framework - Build high-performance VueJS user interfaces in record time

   

   Quasar Framework

   Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!

   

   

   

   Please submit a PR to https://github.com/quasarframework/quasar-awesome with your website/app/Quasar tutorial/video etc. Thank you!

   Supporting Quasar

   Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome backers.

   Please read our manifest on Why donations are important. If you'd like to become a donator, check out Quasar Framework's Donator campaign.

   Proudly sponsored by:

   Documentation

   Head on to the Quasar Framework official website: https://quasar.dev

   Stay in Touch

   For latest releases and announcements, follow us on our Twitter account: @quasarframework

   Chat Support

   Ask questions at the official community Discord server: https://chat.quasar.dev

   Community Forum

   Ask questions at the official community forum: https://forum.quasar.dev

   Contributing

   Please make sure to read…

   View on GitHub
9. bootstrap-vue - With BootstrapVue you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue.js and the world's most popular front-end CSS library — Bootstrap v4.

   bootstrap-vue / bootstrap-vue

   BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

   

   
   

   With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4.5 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup.

   
   

   
   
   

   Links

   • 📘 Documentation
   • 🔨 Release Notes
   • 💬 Discord Chat
   • 🐦 Twitter

   Sponsors

   Support this project by becoming a sponsor.

   Your logo will show up here with a link to your website. [Become a sponsor]

   

   Backers

   Thank you to all our backers! 🙏 [Become a backer]

   

   Contributors

   This project exists thanks to all the people who contribute. [Contribute].

   

   Partners

   

   License

   Released under the MIT License. Copyright (c) BootstrapVue.

   

   View on GitHub
10. vue-resource - The plugin for Vue.js provides services for making web requests and handle responses using an XMLHttpRequest or JSONP.

    pagekit / vue-resource

    The HTTP client for Vue.js

    vue-resource

    The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.

    Features

    • Supports the Promise API and URI Templates
    • Supports interceptors for request and response
    • Supports latest Firefox, Chrome, Safari, Opera and IE9+
    • Supports Vue 1.0 & Vue 2.0
    • Compact size 14KB (5.3KB gzipped)

    Installation

    You can install it via yarn or NPM.

    $ yarn add vue-resource
    $ npm install vue-resource
    

    CDN

    Available on jsdelivr, unpkg or cdnjs.

    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.3"></script>

    Example

    {
      // GET /someUrl
      this.$http.get('/someUrl').then(response => {
    
        // get body data
        this.someData = response.body;
    
      }, response => {
        // error callback
      });
    }

    Documentation

    • Configuration
    • HTTP Requests/Response
    • Creating Resources
    • Code Recipes
    • API Reference

    Changelog

    Details changes for each release are documented…

    View on GitHub