By Nastassia Ovchinnikova

Translation: Crazy geek

Original text: flatlogic.com/blog/new-an…

Reproduced without permission

The vue.js framework was created by experienced developers, has solid community support, rich functionality, and is lightweight.

Another big advantage of vue.js is that it is easy to understand and learn. You can create any Web application with the help of the Vue framework. So I suggest you learn about Vue open source projects.

Some of these items are on this list because of their popularity in 2019. Some of these projects don’t have as many stars on GitHub, but in my opinion, they are still noteworthy.

uiGradients

A collection of gradient effects

Website: uigradients.com/

GitHub:github.com/ghosh/uiGra…

Making Stars: 4.6 k

The rich color array and great UX make this project one of my favorites. Gradients are still a growing trend in web design. You can select the desired color and view all possible gradients. The collection is huge because it was contributed by the community. You can easily select the gradient effect and copy its CSS code.

Various templates: flatlogic.com/templates

CSSFX

A collection of CSS effects

Website: cssfx.dev

Making: github.com/jolaleye/cs…

Making Stars: 5.3 k

Another easy way to add a few but important details to a Web application. This project allows you to view a preview of each CSS effect by clicking on the selected effect to see the code.

Sing App Vue dashboard

Management template

Website: flatlogic.com/templates/s…

Making: github.com/flatlogic/s…

GitHub Stars: 244

The Demo:Flatlogic.com/templates/s…

Documents:Demo.flatlogic.com/sing-app/do…

This is a free open source management template, built using the latest Vue and Bootstrap. The most common practice today is to use administrative dashboard templates instead of building everything from scratch. The main criteria I had in mind when evaluating administrative templates were: possibility of customization and completeness of documentation. Sing App Vue will provide you with reliable advice to help you quickly get started with all the necessary charts, forms, tables, maps, etc.

Vue Storefront

A PWA storefront

PWA shop

Website: www.vuestorefront.io

Making: github.com/DivanteLtd/…

Making Stars: 5.8 k

This is a PWA application that can connect to any (or almost any) backend. The main advantage of the project is the use of a headless architecture. This is a comprehensive solution that gives you a lot of possibilities (thanks to the strong support of the growing community, will improve your server-side rendering SEO results, mobile first approach and offline mode).

Faviator

A library that generates ICONS

Website: www.faviator.xyz

Demo: www.faviator.xyz/playground

Making: github.com/faviator/fa…

GitHub Stars: 94

If you need to create an icon wizard. 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 toolkit

Website: iviewui.com/

GitHub: github.com/iview/iview

Making Stars: 22.8 k

Constant updates make this set of UI components a good choice for developers of all skill levels. But you should know that it doesn’t support IE8.

To get started with iView, make sure you have a good understanding of the single-file component. The project has a friendly API and lots of documentation.

Postwoman

  • API request builder *

Website: postwoman.io/

Making: github.com/liyasthomas…

Making Stars: 10.5 k

This is an alternative to Postman. It is free, has many people working on it, and supports multiple platforms and devices. The tool is really fast and has a lot of updates. The tool’s creators claim to have more features in the near future. You can help this project by adding auto-complete, more methods, and HTTP support. Please join the community!

Vue Virtual Scroller

Quick scroll bar

Website: 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 the list. If you don’t know the size of the item, it’s best to use DynamicScroller. DynamicScrollerItem wraps everything in a DynamicScroller (to handle size changes). IdState simplifies local state management (within RecycleScroller).

Mint UI

Mobile interface elements

Website: mint-ui.github.io/#! /en

Making: github.com/ElemeFE/min…

Making Stars: 15.2 k

Build mobile applications faster using off-the-shelf CSS and JS components. With this tool, you don’t have to worry about the risk of generating large files because you can load them on demand. Animation is handled by CSS3. NPM is required to use the Mint UI. You should try to anticipate all the components your application needs and import only the necessary ones. The complete code (including CSS files) is only 30KB.

V Calendar

A dependency free plug-in for building calendars

Website: 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 you with three date selection modes:

  • Single date;
  • Multiple dates;
  • Date range selection mode.

This calendar plugin is suitable for mobile devices, has different color themes, and can be adapted to different screen sizes.

Vue design system

A set of UI tools

Website: vueds.com/

Making: github.com/viljamis/vu…

Making Stars: 1.7 k

This is a well-organized tool whose name is easy to understand for any Web development team. With the ability to export as NPM dependencies, you can customize your design in any Vue project. The biggest benefit is the ability to use Prettier code formatter, which automatically formats your code before committing it to Git.

Proppy

Libraries for creating prop

Website: proppyjs.com

Making: github.com/fahad19/pro…

GitHub Stars: 855

Prop enables us to pass data to different components. Prop cannot be changed or passed up the component tree. So Proppy helps you take various resources, combine them as prop, and pass them to any component.

Light Blue Vue Admin

Vue.js template for managing the information center

Website: flatlogic.com/templates/l…

Making: github.com/flatlogic/l…

GitHub Stars: 76

Presentation: 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, the template has a very basic set of pages: typography, maps, charts, chat, and so on. If you need to extend the template, take a look at Light Blue Vue Full with over 60 components, no jQuery, and two color themes.

Vue API Query

Build the request to the REST API

Making: github.com/robsontenor…

Making Stars: 1.1 k

There is nothing to be said for this project. It’s exactly what it says in its advertising description: a request to help you create a REST API.

Vue Grid Layout

Vue. Js grid layout

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

Making: github.com/jbaysolutio…

Making Stars: 3.1 k

A simple solution to all grid-related problems. It has static, resizable, and draggable widgets. It is responsive and can restore and serialize layouts. If you need to add another widget, you don’t have to rebuild the entire grid.

Vue Content Loader

Create a placeholder loading

Create placeholder load

Website: danilowoz.com/create-vue-…

Making: github.com/egoist/vue-…

GitHub Stars: 2k

To learn all about the project, you can start by simply using its online tools. You can enjoy a customizable content loader by setting preferred attributes such as width and height, speed, and color scheme. It can be quickly installed using YARN and pure SVG format (no JS required).

Vue2.0 chart

Data visualization

Website: simonzhangiter. Making. IO/DataVisuali…

Making: github.com/SimonZhangI…

Making Stars: 1.3 k

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

Vue.js Modal

Highly customizable Modal

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 modal Windows on the site. There are 15 buttons in total, click any one and you will see an example of a modal window.

Vuesax

Framework components

Website: lusaxweb.github.io/vuesax/

Making: github.com/lusaxweb/vu…

Making Stars: 3.7 k

The program has been very popular in the community. It allows you to design different products for each component. The creators of Vuesax emphasize that every Web developer should have freedom of choice when it comes to Web design. You first need a CDN library and link to its CSS file.

Vue2 Animate

The Animate. CSS port

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

Making: github.com/asika32764/…

Making Stars: 1.1 k

The library is cross-browser. You can choose from five animation types: rotate, slide, fade in and out, bounce, and zoom. There’s a demo on its website. The default duration of the animation is 1 second, but you can customize this parameter.

Vuetensils

Vue. Js toolset

Website: vuetensils.stegosource.com

Making: github.com/stegosource…

GitHub Stars: 111

vuetensils.stegosource.com

This is a standard interface library, but the advantage is that there are no redundant styles. You can customize your design and apply all brand requirements. Just write the style you need, add it to your project, and include as many components as you need.

Welcome to pay attention to the front public number: front pioneer, free webpack from the entry to the full series of advanced tutorials.