{"id":1653,"date":"2019-11-28T16:27:04","date_gmt":"2019-11-28T13:27:04","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=1653"},"modified":"2022-01-25T16:45:31","modified_gmt":"2022-01-25T13:45:31","slug":"new-and-noteworthy-vue-js-open-source-projects-part-1","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/new-and-noteworthy-vue-js-open-source-projects-part-1\/","title":{"rendered":"New and Noteworthy Vue.js Open Source Projects. Part 1"},"content":{"rendered":"

Your goal as a developer is to create a web solution as fast as possible. It is difficult to keep high-quality standards. That is why it is important to make the right of JS frameworks and libraries. React<\/a> and Vue are the frameworks that demonstrated significant growth in 2018-2019. These tools have more in common than differences. Vue.js framework was created by experienced developers, has solid community support, rich functionality and is probably the most lightweight. <\/p>

Another big advantage of Vue.js is that it is easier to understand and learn. Any web application can be created with the help of the Vue framework. So I suggest you freshen up your knowledge of some selected Vue open-source projects<\/a>.<\/p>

Some of these projects are on this list because of its popularity in 2019. And some of these projects don’t have as many stars on GitHub, but in my opinion, these projects are nevertheless noteworthy. <\/p>

uiGradients<\/strong><\/h2>

A collection of gradients<\/em><\/p>

Website<\/strong>: http:\/\/uigradients.com\/<\/a>
GitHub<\/strong>:https:\/\/github.com\/ghosh\/uiGradients<\/a>
GitHub Stars<\/strong>: 4.6k<\/p>

\"Vue.js
Image source: http:\/\/uigradients.com\/<\/em><\/figcaption><\/figure>

Let’s start this list with a project that you would definitely want to play. Wide color array and nice UX make this project one of my favorites. A gradient is still an increasing trend in web design. You have the opportunity to choose the color you need and see all possible gradients with it. This collection is so huge because it is community contributed. You can easily choose the preferred gradient and copy CSS code.<\/p>

CSSFX<\/strong><\/h2>

A collection of CSS effects<\/em><\/p>

Website<\/strong>: https:\/\/cssfx.dev<\/a>
GitHub<\/strong>: https:\/\/github.com\/jolaleye\/cssfx<\/a>
GitHub Stars<\/strong>: 5.3k \"Professional <\/a><\/p>

\"Vue.js
Image source: https:\/\/cssfx.dev<\/em><\/figcaption><\/figure>

Another example of how you can easily add a small but nevertheless significant detail to your web application. This project gives you the possibility to see previews of every CSS effect and that just click on the preferred one to see the code. <\/p>

Sing App Vue Dashboard<\/strong><\/h2>

An admin template<\/a><\/em><\/p>

Website<\/strong>: https:\/\/flatlogic.com\/templates\/sing-app-vue-dashboard<\/a>
GitHub<\/strong>: https:\/\/github.com\/flatlogic\/sing-app-vue-dashboard<\/a>
GitHub Stars<\/strong>: 244<\/p>

\"Vue.js<\/figure>

Demo<\/a><\/strong><\/p>

Documentation<\/a><\/strong><\/p>

This is free and open-source admin template built with latest Vue<\/a> and Bootstrap. It is common practice nowadays to use an admin dashboard template<\/a> instead of building everything from scratch. When it comes to evaluating an admin template there is to main criteria on my mind: the possibilities of customization and the integrity of documentation. Sing App Vue will provide you with a solid recommendations for a quick start and all all necessary charts, forms, grids, maps, etc.<\/p>

Vue Storefront<\/h2>

A PWA storefront<\/em><\/p>

Website<\/strong>: https:\/\/www.vuestorefront.io<\/a>
GitHub<\/strong>: https:\/\/github.com\/DivanteLtd\/vue-storefront<\/a>
GitHub Stars<\/strong>: 5.8k<\/p>

\"\"
Image source: https:\/\/www.vuestorefront.io<\/em><\/figcaption><\/figure>

This is a PWA can be connected with any backend (or almost any). The key advantage of this project is the use of headless architecture. This is a comprehensive solution that gives you lots of possibilities (huge support of the steadily growing community, server-side rendering that will improve your SEO, mobile-first approach and offline mode.<\/p>

Faviator<\/strong><\/h2>

A library for favicon generation<\/em><\/p>

Website<\/strong>: https:\/\/www.faviator.xyz<\/a>
Demo<\/strong>: https:\/\/www.faviator.xyz\/playground<\/a>
GitHub<\/strong>: https:\/\/github.com\/faviator\/faviator<\/a>
GitHub Stars<\/strong>: 94<\/p>

\"\"
Image source: https:\/\/www.faviator.xyz<\/em><\/figcaption><\/figure>

If you need to create an icon that is your magic wand. Any Google font is available, as well as any color. Just pass a preferable configuration and choose PNG, SVG or JPG format.<\/p>

iView<\/strong><\/h2>

Vue UI component toolkit<\/em><\/p>

Website<\/strong>: https:\/\/iviewui.com\/<\/a>
GitHub<\/strong>: https:\/\/github.com\/iview\/iview<\/a>
GitHub Stars<\/strong>: 22.8k<\/p>

\"\"
Image source: https:\/\/iviewui.com\/<\/em><\/figcaption><\/figure>

Constant updates are making this set of UI components a good choice for a developers with any skill levels. But you should know that it doesn’t support IE8. <\/p>

To start with iView make sure you have a good knowledge of Single File Components. This project has a friendly API and extensive documentation.<\/p>

Postwoman<\/h2>

API request builder<\/em><\/p>

Website<\/strong>: https:\/\/postwoman.io\/<\/a>
GitHub<\/strong>:  https:\/\/github.com\/liyasthomas\/postwoman<\/a>
GitHub Stars<\/strong>: 10.5k<\/p>

\"\"
Image source: https:\/\/github.com\/liyasthomas\/postwoman<\/em><\/figcaption><\/figure>

This is an alternative to a Postman. It is free, have many contributors and has multi-platform and multi device support. This tool is really fast and has tons of updates. The creator of this tool claims more features in the near future. You can help this project by adding autocomplete, more methods and HTTP support. Join the community!<\/p>

Vue Virtual Scroller<\/h2>

Fast scrolling <\/em><\/p>

Website<\/strong>: https:\/\/akryum.github.io\/vue-virtual-scroller\/#\/<\/a>
GitHub<\/strong>: https:\/\/github.com\/Akryum\/vue-virtual-scroller<\/a> 
GitHub Stars<\/strong>: 3.4k<\/p>

\"\"
Image source: https:\/\/akryum.github.io\/vue-virtual-scroller\/#\/horizontal<\/em><\/figcaption><\/figure>

Vue Virtual Scroller has four main components. RecycleScroller can render visible items of your list. DynamicScroller is better to use in case you don’t know the size of the future items. DynamicScrollerItem wraps everything in a DynamicScroller (to handle size changes). IdState ease local state management (inside RecycleScroller).<\/p>

Mint UI<\/h2>

Mobile UI elements<\/em><\/p>

Website<\/strong>: http:\/\/mint-ui.github.io\/#!\/en<\/a>
GitHub<\/strong>: https:\/\/github.com\/ElemeFE\/mint-ui<\/a>
GitHub Stars<\/strong>: 15.2k<\/p>

\"\"
Image source: http:\/\/mint-ui.github.io\/#!\/en<\/em><\/figcaption><\/figure>

Build mobile apps faster using ready-to-use CSS and JS components. Using this tool you don’t risk to have large file sizes because you have the opportunity to load on demand. The animation is handled with CSS3. To start working with Mint UI you need npm. You should try to predict all components needed in your app and import only necessary components. A full code (including CSS files) is only 30kb.<\/p>

V Calendar<\/h2>

Dependency-free plugin for building calendars<\/em><\/p>

Website<\/strong>: https:\/\/vcalendar.io<\/a>
GitHub<\/strong>: https:\/\/github.com\/nathanreyes\/v-calendar<\/a>
GitHub Stars<\/strong>: 1.6k<\/p>

\"\"
Image source: https:\/\/vcalendar.io<\/em><\/figcaption><\/figure>

You can choose different visual indicators to decorate your calendar. V Calendar also provides you with three date selection modes:<\/p>