As we all know, Vue is becoming more and more popular and adopted by many developers, so its ecosystem is becoming more and more complete, and the related tools and libraries are abundant. Vue’s learning curve, clear design structure, and usage documentation make it easy for experienced developers to start with other frameworks (React and Angular). For today’s post, I’ve chosen these 10 popular tools and libraries based on their usefulness, effectiveness, and uniqueness, rather than Github popularity or star rating. Some you’re already familiar with and use, and some you’re not. Let’s take a look at the top 10.

1, the Vue CLI

Like other front-end frameworks, cli-like scaffolding tools are provided for developers to get started quickly. The Vue CLI is a full-featured set of tools for fast Vue development. The Vue CLI is dedicated to standardizing the tool base in the Vue ecosystem. It ensures that the various build tools work smoothly based on smart defaults, so you can focus on writing your app instead of spending days obsessing over configuration. For example, you can easily integrate plug-ins like Babel, TypeScript, ESLint, PostCSS, PWA, Jest, Mocha, Cypress and Nightwatch into your project.

2, VuePress

VuePress is a vUe-powered static website generator, a single-page application powered by Vue, Vue Router, and WebPack. In VuePress, you can write documents using Markdown and then generate web pages. Every page generated by VuePress has pre-rendered HTML, which is also very good for loading performance and SEARCH engine optimization. Meanwhile, once the page is loaded, Vue takes over the static content and turns it into a full single-page application, while other pages load on demand only as the user navigates through them.

The official address: https://v1.vuepress.vuejs.org/

3, Gridsome

Gridsome is similar to, but not identical to, VuePress and builds websites using the latest web technology tools that developers love – vue.js, GraphQL and Webpack. Get all the functionality of hot reloading and Node.js. Gridsome makes building sites fun again. If you want to start a blog, consider it. Its characteristics are as follows:

  • Build websites using modern tools such as vue.js, Webpack and Node.js.
  • Use any CMS or data source to get the content. Extract data from WordPress, Contentful, native Markdown, or any other headless CMS or API.
  • Load only the key HTML, CSS, and JavaScript first. The next page is then prefetched so that the user can click very quickly without having to reload the page, even when offline.
  • Gridsome uses the power of ultra-fast static site generators, JavaScript, and apis to create an amazing dynamic Web experience.
  • Gridsome sites are typically not connected to any database and can be hosted entirely on a global CDN. It can handle thousands to millions of clicks and doesn’t require expensive server costs.

Official address: https://gridsome.org/

4, Vuex

In the development of SPA single-page components, both VUex of Vue and Redux of React are called the same state management. Personally, I think global state management is more appropriate. The simple idea is that once you define a piece of data in state, you can retrieve and modify it in any component of your project, and your changes can be globally responsive to changes. At the heart of every Vuex application is the Store. A “store” is basically a container that contains most of the states in your app. The store consists of four parts:

  • State – The application’s data content object
  • Getters – Defines methods to get data in state
  • Mutations – defined methods that manipulate data in state
  • Actions — Actions are similar to mutation, except that the Action commits mutation instead of directly changing the state. Actions can contain any asynchronous operation.

Official website: https://vuex.vuejs.org/

5、 Nuxt

Nuxt.js is a lightweight application framework based on Vue. It can be used to create server-side rendering (SSR) applications, and can also act as a static site engine to generate static site applications, with elegant code structure layering and hot loading features.

Its official address: https://nuxtjs.org/

6, Vuetify

Vuetify is currently one of the best UI component libraries based on VUE. It provides a large number of components (80+) crafted based on the Material Design specification, sufficient to meet the needs of any application.

You can use it to build SSR applications, SPA, PWA, and mobile applications. All Vuetify components are well documented and provide clear examples.

The official website: https://vuetifyjs.com/en/

7, Quasar

Quasar (pronounced /kweɪ.zɑɹ/) is an MIT-licensed open source framework (based on Vue) that helps Web developers create:

  • Responsive web site
  • PWA (Progressive Web App)
  • Build mobile Apps via Apache Cordova (Android, iOS…)
  • Multi-platform desktop Application (using Electron)

Quasar allows developers to write code once and then deploy to a website, PWA, Mobile App, and Electron App simultaneously using the same code base. Design applications using state-of-the-art CLI and provide well-written, very fast Quasar Web components.

When using Quasar, you don’t need to load extra libraries like Hammerjs, Momentjs or Bootstrap. It has all these features, and it’s tiny!

Official website: https://quasar.dev/

8 Storybook.

For front-end development, componentization technology has been a required course, which mainly includes React and VUE. However, when developing components, especially common components or third-party component libraries, there are often some problems:

  • Can’t manage multiple components well, especially when previewing components at a glance
  • A component preview also does not reflect the various states of a component
  • Automated interaction tests can use enzymes, but many times you have to manually test, which is more cumbersome
  • When writing the document, it is more difficult to write the component preview alongside the document and switch to a different state

Storybook is designed to solve these problems by providing a powerful development environment for your components. It provides the following features:

  • Provides a powerful UI component management page that can easily and clearly group and manage multiple components or multiple states of a component
  • In addition to automated interaction testing, manual interaction testing is very convenient, and component parameters can be dynamically changed to view changes
  • Component previews can be exported as static resources, which makes it easy to view the documentation of components and different views for different parameters
  • There are also a number of plug-ins that provide additional functionality to help you develop, test, and optimize components

The tool enables developers to create components independently of the main application and present them interactively in an isolated development environment without worrying about application-specific dependencies and requirements. It is convenient for developers, product managers and designers to participate in the project.

The official website: https://storybook.js.org/

9, Vue Apollo

There’s been a lot of talk about GraphQL recently. So if you’re already familiar with it and want to integrate it with Vue, you should try the Vue Apollo. This library makes it easy to integrate Vue and GraphQL.

Official website: https://vue-apollo.netlify.com/

10, Eagle. Js

Eagle. Js is a slide system based on vue. js Web framework. It supports animations, themes, interactive widgets (for web presentations), and makes it easy to reuse components, slides, and styles between presentations.

The official website: https://github.com/zulko/eagle.js/

section

This is the end of today’s content, I hope you can find the heart of tools and libraries, if you have a good tool and library recommendation, welcome you to share in the comments area.

More exciting content, please pay attention to the wechat “front-end talent” public number!