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.
-
@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
Table of contents
- 🚀 Getting Started
- 📒 Projects
- 🏅 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…
-
element-ui -
Element, a Vue 2.0 based component library for developers, designers and product managers
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
- 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
- Design resources
- Gitter
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…
-
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.
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.
… -
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.
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…
-
vue-devtools -
Chrome and Firefox 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
Sponsors
-
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:
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…
- Ensure tests are passing
-
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
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…
-
-
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…
-
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
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.
-
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
Changelog
Details changes for each release are documented…
Top comments (0)