20 new and noteworthy Vue open source projects

Translator: Front-end wisdom

By Nastassia Ovchinnikova

Source: flatlogic.com

The more you know, the more you don’t know

Like it and see. Make it a habit

GitHub: github.com/qq449245884… Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

Personal column ES6 has been launched, in-depth ES6, through case study to master some new features of ES6 using skills and principles, continuous update, ← click to subscribe.

An advantage of Vue compared with React is that it is easy to understand and learn, and it occupies the majority in China. We can create any Web application with the help of Vue. Therefore, it is also important to keep abreast of some new and useful Vue open source projects, on the one hand, it can help us develop more efficiently, on the other hand, we can also model the best parts of it.

Let’s take a look at some useful new open source projects.

uiGradients

Address: uigradients.com/

Making: github.com/ghosh/uiGra…

Making Stars: 4.6 k

Color arrays and excellent UX are one of the highlights of this project, as gradients continue to be a growing trend in web design. We can choose the colors we want, and we can get all the possible gradients, and we can get the corresponding CSS code, so bookmark it.

CSSFX

A collection of CSS transitions

Address: CSSFX. Dev

Making: github.com/jolaleye/cs…

Making Stars: 3.5 k

There are a lot of CSS filtering effects in CSSFX, we can choose a specific animation according to your needs, click on the corresponding effect to see the generated CSS code, get started.

Sing App Vue Dashboard

An administrative template

Address: flatlogic.com/templates/s…

Making: github.com/flatlogic/s…

GitHub Stars: 254

Example: * * * * flatlogic.com/templates/s…

** documentation: **demo.flatlogic.com/sing-app/do…

This is a free and open source management template based on the latest Vue and Bootstrap. In fact, it is similar to our domestic VUe-admin-template. We don’t have to use it, but you can study the source code, I believe you can learn a lot of practical skills, come on young.

Vue Storefront

Website: www.vuestorefront.io

Making: github.com/DivanteLtd/…

Making Stars: 5.8 k

This is a PWA that can be connected to any backend (or almost any backend). The main advantage of this project is the use of a headless architecture. This is a comprehensive solution that offers us many possibilities (great support for a steadily growing community, server-side rendering, will improve web SEO, mobile first approach and offline mode).

Faviator

Icon generation library

Website: www.faviator.xyz

Making: www.faviator.xyz/playground

GitHub Stars: 94

If you need to create an icon to increase the experience. You can use any Google font and any color. Simply go through the preferred configuration and select PNG, SVG or JPG format.

iView

Vue UI component library

Address: iviewui.com/

Making: github.com/iview/iview

Making Stars: 22.8 k

Constant iteration makes this set of UI components a good choice for developers of any skill level.

To use iView, you need to have a good understanding of the single-file component, and the project has a friendly API and lots of documentation.

Postwoman

The API requests the builder

Address: postwoman. IO /

Making: github.com/liyasthomas…

Making Stars: 10.5 k

Vue Virtual Scroller

Fast scroll

Address: akryum. Making. IO/vue – virtual…

Making: github.com/Akryum/vue-…

Making Stars: 3.4 k

The Vue Virtual Scroller has four main components. RecycleScroller can render visible items in a list. If we do not know the specific amount of data, it is better to use DynamicScroller. DynamicScrollerItem wraps everything in a DynamicScroller (to handle size changes). IdState simplifies local state management (within RecycleScroller).

Mint UI

Mobile UI library

Address: mint – UI. Making. IO / #! /en

Making: github.com/ElemeFE/min…

Making Stars: 15.2 k

Build mobile applications faster with off-the-shelf CSS and JS components. With this tool, we don’t have to take the risk of too large a file size because we can load it on demand. Animations are handled by CSS3 to improve performance.

V Calendar

A dependency free plug-in for building calendars

Address: vcalendar. IO

Making: github.com/nathanreyes…

Making Stars: 1.6 k

You can choose different visual indicators to decorate the calendar. V Calendar also provides us with three date selection modes:

The radio
multi-select
Date range

Vue Design System

A set of UI tools

Address: vueds.com/

Making: github.com/viljamis/vu…

Making Stars: 1.7 k

This is a well-organized tool, and its name is easy to understand for any Web development team. One of the big advantages is the use of a prettier code formatter, which automatically arranges code before committing to Git.

Proppy

The combination of functional items for UI components

Website: proppyjs.com

Making: github.com/fahad19/pro…

GitHub Stars: 856

ProppyJS is a small library for assembling items, and it comes with various integration packages that give you the freedom to use its popular rendering library.

The idea is to first express the behavior of Component as props, and then use Proppy’s same API to connect it to your Component (it could be React, vue.js, or Preact).

The API also allows you to access other application-wide dependencies (such as stores using Redux) for convenience anywhere in the component tree.

Light Blue Vue Admin

Vue background display template

Address: flatlogic.com/templates/l…

Making: github.com/flatlogic/l…

GitHub Stars: 79

Example: demo.flatlogic.com/light-blue-…

Documents: demo.flatlogic.com/light-blue/…

The template was built using the Vue CLI and Bootstrap 4. As you can see from the demo, this template has a very basic set of pages: layout, maps, charts, chat interface, and so on. If we need an extended template, we can look at Light Blue Vue Full, which has over 60 components, no jquery, and two color themes.

Vue API Query

Build the request for the REST API

Making: github.com/robsontenor…

Making Stars: 1.1 k

There is nothing to say about the project. It does exactly what it says in the description line: it helps us build requests for the REST API.

Vue Grid Layout

Vue grid layout

Website: jbaysolutions. Making. IO/vue – the grid – la…

Making: github.com/jbaysolutio…

Making Stars: 3.1 k

Simple solution for all grid-related problems. It has static, resizable, and draggable widgets. Again, responses and layouts can be recovered and serialized. If you need to add another widget, you don’t have to rebuild all the grids.

Vue Content Loader

Create a placeholder to load

Website: danilowoz.com/create-vue-…

Making: github.com/egoist/vue-…

GitHub Stars: 2k

When we develop websites or apps, too much content and slow loading speed will lead to a large number of blank pages when users open the page. Vue-content-loader is just a component to solve this problem, so that a DOM template can be generated before loading content to improve user experience.

Echarts with Vue2.0

Data visualization

Website: simonzhangiter. Making. IO/DataVisuali…

Making: github.com/SimonZhangI…

Making Stars: 1.3 k

In the picture, we can see a very beautiful diagram. This project makes any data more readable, easier to understand and interpret. It allows us to easily detect trends and patterns in any data set.

Vue.js Modal

Highly customizable modal box

Website: vue-js-modal.yev.io/

Making: github.com/euvl/vue-js…

Making Stars: 2.9 k

You can view all the different types of modes on this site. There are 15 buttons, press any one button to see a modal example.

Vuesax

Framework components

Website: lusaxweb.github.io/vuesax/

Making: github.com/lusaxweb/vu…

Making Stars: 3.7 k

The project has been well received in the community. It allows us to design different styles for each component. The creators of Vuesax emphasize that every Web developer should have freedom of choice when it comes to Web design.

Vue2 Animate

Vue2.0 – Use animate. CSS to build projects and create components

Website: the-allstars.com/vue2-animat…

Making: github.com/asika32764/…

Making Stars: 1.1 k

The library is cross-browser and we can choose from 5 types of animations: Rotate, Slide, Fade, bounce and Zoom. There’s a demo on the website. The default duration of the animation is 1 second, but we can customize this parameter.

Vuetensils

Vue. Js toolset

Website: vuetensils.stegosource.com

Making: github.com/stegosource…

GitHub Stars: 111

The UI library has one standard feature, but the cool thing is that it has no extra styles. You can make the design as personal as possible, applying all your needs. Just write the style you need, add it to your project, and include as many components as you need.

The possible bugs in editing can not be known in real time. In order to solve these bugs after the event, I spent a lot of time on log debugging. By the way, I recommend a good bug monitoring tool for youFundebug.

The original:

Flatlogic.com/blog/new-an… Flatlogic.com/blog/new-an…

communication

Dry goods series of articles summarized as follows, feel good point Star, welcome to add groups to learn from each other.

Github.com/qq449245884…

Due to space constraints, today’s share only here. If you want to know more, you can scan the TWO-DIMENSIONAL code at the bottom of each article, and then follow our wechat public number to learn more information and valuable content.