{"id":1703,"date":"2019-11-29T17:30:41","date_gmt":"2019-11-29T14:30:41","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=1703"},"modified":"2024-02-23T18:17:27","modified_gmt":"2024-02-23T15:17:27","slug":"new-and-noteworthy-vue-js-open-source-projects-part-2","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/new-and-noteworthy-vue-js-open-source-projects-part-2\/","title":{"rendered":"New and Noteworthy Vue.js Open Source Projects. Part 2"},"content":{"rendered":"

This is the second part of our opinionated list of Vue.js<\/a> open-source projects. Here<\/a> you can read the first part of the article. We tried to include not only countless UI toolkits but also some outstanding projects that help you to work with animation, composing props, build requests for API and many more.<\/p>

Please note that stars on GitHub are not the only criteria for evaluating projects. We also try to keep diversity in our reviews. It is more important to know there are projects that have a certain functionality. It is your choice witch option suits you best.<\/p>

Vue Design System<\/h2>

A set of UI tools<\/em><\/p>

Website: <\/strong>https:\/\/vueds.com\/<\/a>
GitHub: <\/strong>https:\/\/github.com\/viljamis\/vue-design-system<\/a>
GitHub Stars:<\/strong> 1.7k<\/p>

\"\"
Image source: https:\/\/vueds.com\/example\/#\/Elements\/Button<\/em><\/figcaption><\/figure>

This is well-organized tools with easily understandable naming for any team of web developers. You can your customized design in any of your Vue projects due to the opportunity to export as an NPM dependency. A big plus is the use of Prettier code formatter that automatically arranges your code before you commit to Git. <\/p>

Proppy<\/h2>

Library for composing props <\/em><\/p>

Website: <\/strong>https:\/\/proppyjs.com<\/a>
GitHub: <\/strong>https:\/\/github.com\/fahad19\/proppy<\/a>
GitHub Stars:<\/strong> 855<\/p>

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

If you are not completely sure what props are I will remind you. Props allow us to pass data to different components. Props cannot be changed or passed up the component tree. So Proppy helps you to take various sources, then compose as props, and then pass it to any component. \"Professional <\/a><\/p>

Light Blue Vue Admin<\/h2>

Vue.js template for admin dashboard<\/a><\/em><\/p>

Website: <\/strong>https:\/\/flatlogic.com\/templates\/light-blue-vue-lite<\/a>
GitHub: <\/strong>https:\/\/github.com\/flatlogic\/light-blue-vue-admin<\/a>
GitHub Stars:<\/strong> 76<\/p>

\"\"
Image source: https:\/\/flatlogic.com\/templates\/light-blue-vue-lite\/demo<\/em><\/figcaption><\/figure>


Documentation<\/a><\/p>

The template was built with Vue CLI and Bootstrap 4. As you can see from the demo this template has a pretty basic set of pages: typography, maps, charts, chat, etc. If you need an extended template you can check out a big brother Light Blue Vue Full<\/a> that has over 60 components, jQuery-free and has two color themes.<\/p>

Vue API Query<\/h2>

Build requests for REST API<\/em><\/p>

GitHub: <\/strong>https:\/\/github.com\/robsontenorio\/vue-api-query<\/a>
GitHub Stars:<\/strong> 1.1k<\/p>

\"\"
Image source: https:\/\/github.com\/robsontenorio\/vue-api-query<\/em><\/figcaption><\/figure>

There isn’t much to say about this project. It does exactly what is written in the description line: it helps you to build requests for REST API.<\/p>

Vue Grid Layout<\/h2>

Grid layout for Vue.js<\/em><\/p>

Website: <\/strong>https:\/\/jbaysolutions.github.io\/vue-grid-layout\/examples\/01-basic.html<\/a>
GitHub: <\/strong>https:\/\/github.com\/jbaysolutions\/vue-grid-layout<\/a>
GitHub Stars:<\/strong> 3.1k<\/p>

\"\"
Image source: https:\/\/jbaysolutions.github.io\/vue-grid-layout\/examples\/01-basic.html<\/em><\/figcaption><\/figure>

A simple solution to all grid-related problems. It has static, resizable and draggable widgets. It is responsive and layout can be restored and serialized. If you need to add one more widget, you don’t have to rebuild all the grid all over again.<\/p>

Vue Content Loader<\/h2>

Create a placeholder loading<\/em><\/p>

Website: <\/strong>http:\/\/danilowoz.com\/create-vue-content-loader<\/a>
GitHub: <\/strong>https:\/\/github.com\/egoist\/vue-content-loader<\/a>
GitHub Stars:<\/strong> 2k<\/p>

\"\"
Image source: http:\/\/danilowoz.com\/create-vue-content-loader\/<\/em><\/figcaption><\/figure>

To understand everything about this project you can simply play with the online tool<\/a>. Just set preferable properties such as width and height, speed and color scheme and enjoy customizable content loader. Quick install with the help of yarn and pure SVG format (no JS needed).<\/p>

Echarts with Vue2.0<\/h2>

Data visualization<\/em><\/p>

Website:<\/strong> https:\/\/simonzhangiter.github.io\/DataVisualization\/#\/dashboard<\/a>
GitHub: <\/strong>https:\/\/github.com\/SimonZhangITer\/DataVisualization<\/a>
GitHub Stars:<\/strong> 1.3k<\/p>

\"\"
Image source: https:\/\/simonzhangiter.github.io\/DataVisualization\/#\/dashboard<\/em><\/figcaption><\/figure>

In the picture, you can see absolutely beautiful charts and graphs. This project makes any data much more readable, easier for us to understand and interpret. It allows us to easily detect trends and patterns in any dataset.<\/p>

Vue.js Modal<\/h2>

Highly customizable modal<\/em><\/p>

Website: <\/strong>http:\/\/vue-js-modal.yev.io\/<\/a>
GitHub: <\/strong>https:\/\/github.com\/euvl\/vue-js-modal<\/a>
GitHub Stars:<\/strong> 2.9k<\/p>

\"\"
Image source: http:\/\/vue-js-modal.yev.io<\/em><\/figcaption><\/figure>

You can see all the different kinds of modals on the website<\/a>. There are 15 buttons, push any of them and you will see an example of a modal. I wasn’t able to close the modal so I just refreshed the page to see another one. But maybe it just me;)<\/p>

Vue Material Template<\/strong><\/h2>

Free Vuetify Admin Dashboard Template<\/em><\/p>

Website:<\/strong>https:\/\/flatlogic.com\/templates\/vue-material-template<\/a>
GitHub:<\/strong> https:\/\/github.com\/flatlogic\/material-vue
GitHub stars:<\/strong> 6<\/p>

\"\"
Image source: https:\/\/flatlogic.github.io\/material-vue\/#\/dashboard<\/em><\/figcaption><\/figure>

Demo<\/a>
Documentation<\/a><\/p>

If you are already familiar with admin dashboard templates<\/a>, you know that they perform a good foundation for web apps. This sample is made with Vuetify and Material Design. If you plan to develop an IoT dashboard, or SAAS system, or something similar, Vue Material Template<\/a> is exactly what you need. It’s made functional<\/em> including many pages and components, bright <\/em>and beautiful<\/em> taking into account the colors, shades, and not overwhelming<\/em> at the same time. This admin dashboard template<\/a> has also a full version with an extended number of features.<\/p>

Vuesax<\/h2>

Framework Components <\/em><\/p>

Website: <\/strong>https:\/\/lusaxweb.github.io\/vuesax\/<\/a>
GitHub: <\/strong>https:\/\/github.com\/lusaxweb\/vuesax<\/a>
GitHub Stars:<\/strong> 3.7k<\/p>

\"\"
Image source: https:\/\/lusaxweb.github.io\/vuesax\/<\/em><\/figcaption><\/figure>

This project is really popular in the community. It allows you to have a different design for each component. Vuesax creators highlight that every web developer should have freedom of choice when it comes to web design<\/a>. It is hard to disagree with that. To get started you need to have a cdn library and link to the css file.<\/p>

Vue2 Animate<\/h2>

Port for Animate.css<\/em><\/p>

Website: <\/strong>https:\/\/the-allstars.com\/vue2-animate\/<\/a>
GitHub:<\/strong> https:\/\/github.com\/asika32764\/vue2-animate<\/a>
GitHub Stars:<\/strong> 1.1k<\/p>

\"\"
Image source: https:\/\/the-allstars.com\/vue2-animate\/<\/em><\/figcaption><\/figure>

This library is a cross-browser. You can choose from 5 types of animation: rotate, slide, fade, bounce and zoom. On the website<\/a>, there is a demo. The default duration of the animation is 1 second but you can customize this parameter. <\/p>

Vuetensils<\/h2>

A toolset for Vue.js<\/em><\/p>

Website: <\/strong>https:\/\/vuetensils.stegosource.com<\/a>
GitHub:<\/strong> https:\/\/github.com\/stegosource\/vuetensils<\/a>
GitHub Stars:<\/strong> 111<\/p>

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

This UI library has a standard functionality, but the cool thing about it is that it doesn’t have extra styles. You can make the design as customized as it can be, apply all the branding requirements. Just write the styles you need, add it to the project and include as many components as you need. So no oversized bundles.<\/p>

You might also like these articles:<\/h3>