Top Vue.js open-source projects: The Best Libraries, Tools and Packages

To celebrate this success, we’ve decided to go through some of the libraries, tools and packages which make the Vue ecosystem so great. Let’s start.

See also: 13 Top Companies That Have Trusted Vue.js.

Vue-cli

Vue-cli is like create-react-app on steroids. It allows you to create a Vue project with different configurations in a matter of seconds. It focuses on ensuring that all your dependencies and tools work well together, so you can just start writing our app rather that fiddling with configuration with days. If you’re new to CLI, there is a UI interface to get your project started. And oh, you don’t need to eject, ever!

Vuex

Vuex is a state management library supported by the Vue organization. It helps you manage the complex state of your applications by providing the ability to store all data required in the application in a single object, also known as a store. In simpler words, Vuex is to Vue what Redux is to React.

Nuxt.js

Nuxt is a framework built on top of Vue.js, and it comes with some additional built-in features required for building universal applications. It supports server-side rendering, static site generation, code-splitting etc. out of the box. To put it simply, Nuxt is to Vue what Gatsby is to React.

Vue-devtools

If you’re developing applications using Vue.js, this one is a must-have. Vue-devtools is an extension that makes debugging Vue.js applications a breeze. Also, did you know that it’s officially supported by the Vue.js organisation? Sweet!

Vetur

Vetur is an extension that provides Vue.js tooling for Visual Studio Code - it’s a must-have if you’re developing a Vue.js application on VS Code. It comes bundled with awesome features such as syntax-highlighting for .vue files, emmet support, auto-completion, code snippets, and others that make coding a fun experience.

Vue-test-utils

This official library provides utilities for unit-testing Vue components. IT doesn’t need to be installed separately if you setup your project with the help of vue-cli and choose to use unit-testing solutions.

Vuetify

Vuetify is one of the most popular component frameworks in the Vue ecosystem. It provides you with a set of components based on material design, such as buttons, inputs, cards, carousels, tables, lists etc., which you can use to create your app’s UI much faster. Vuetify also allows you to tweak the look and feel of these components easily.

Vue-router

Vue-router helps manage routing when developing single-page applications with Vue.js. This library is officially supported by the Vue organisation. Deep integration with the Vue.js core allows you to use it with extreme ease, no need to worry. In other words, React has its react-router, and Vue.js has vue-router.

Eslint-plugin-vue

Eslint-plugin-vue provides a set of rules for eslint to validate your Vue.js code. It is a definite MUST HAVE when developing anything with Vue.js. It helps you prevent errors, improve readability and minimise arbitrary choices. Could it be better? Of course it could! This plugin is officially supported by the Vue organization.

Vuelidate

Vuelidate is a lightweight library focused on validation in Vue.js. The fairly simple documentation lets you get started pretty quick. It allows you to use both built-in and custom validators. If you are using forms in your app, it might be a good idea to choose it.

VueI18n

VueI18n can be helpful when implementing translation into your Vue app. It supports dynamic localization, pluralization, date time localization, and number localization. Although the plugin is not maintained by the Vue organization, it has extensive documentation describing how to use it in different cases, making development a breeze.

Vue-svg-loader

vue-svg-loader is a webpack loader that allows you to import SVG files as Vue components, which means easier styling, better control, and fewer network requests. It generates code that is SSR-ready and, thanks to the incredible SVGO, the end result is clean and optimized.

Vue-apollo

Vue-apollo is a Vue.js plugin that integrates with the Apollo Client and provides a handful of useful utilities and components to allow easy and fun integration with any GraphQL backend.

What's even more exciting is that there is already a vue-cli-plugin-apollo that automatically integrates vue-apollo, embeds the Apollo client configuration, includes an optional GraphQL API server, and adds GraphQL validation using eslint.

All this to reduce the time and effort required to get started with this awesome piece of tech!

Vuency

Vuency helps you manage complex, event-driven operations with minimal code. It adds an extra layer between an operation and the execution of that operation.

Using Vuency, each operation has its own state, so there is no need to manually set and update flags (i.e. isRunning), to handle common UI interactions.

Moreover, with Vuency each operation can be restarted, repeated or cancelled at any moment. That makes the control flow of operations to be extremely transparent and controllable.

Have we missed anything?

We could definitely include more open source projects for Vue, as the active community keeps adding new ones and improving the existing tools, libraries and packages. However, we wanted to share the essential ones that would come handy in developing any kind of application smoothly. The list is not closed though – we’ll be updating it regularly.

The projects were picked by Michał Sajnóg, Mateusz Rybczonek, Vivek Patel, Paweł Nowak and Damian Stasik.