Vue Example Project

Posted on  by admin

In this short intro, I won’t go back to the history of the Vue.js or some statistics on the use of this framework. Now it is a matter of fact that Vue is gaining popularity and projects listed below are the best evidence of its prevalence.

There are more than 20 Vue.js open-source projects in this article. The goal was to make this list as varied as possible.

Opinionated code formatter. Website: https://prettier.io. Demo: https://prettier.io/playground/. GitHub: https://github.com/prettier/prettier.

GitHub Stars: 32 343. Prettier reprints your code in a consistent style with several rules.

Using a code formatter you don’t have to do it manually and argue about what is the right coding style anymore. This code formatter Integrates with most editors (Atom, Emacs, Visual Studio, Web Storm, etc.

Related Posts

vue create #

and works with all your favorite tools such as JavaScript, CSS, HTML, GraphQL, etc.


Using the GUI #

And last year Prettier started to run in the browser and support .vue files. Material Component Framework.

Website: https://vuetifyjs.com/en/. GitHub: https://github.com/vuetifyjs/vuetify. GitHub Stars: 20 614. This framework allows you to customize visual components.

It complies with Google Material Design guidelines. Vuetify combines all the advantages of Vue.js and Material. That is more Vuetify is constantly evolving because it has been improved by both communities on GitHub.

Pulling 2.x Templates (Legacy) #

This framework is compatible with RTL and Vue CLI-3. You can build an interactive and attractive frontend using Vuetify.

If you want quickly dive deep into this framework there are plenty of video tutorials on You Tube, you can start with this one.

3. Be Curious, Find out Why the Codes Work

A set of UI components. Website: https://iviewui.com/. GitHub: https://github.com/iview/iview.

GitHub Stars: 21 643. Developers of all skill levels can use iView but you have to be familiar with a Single File Components (https://vuejs.org/v2/guide/single-file-components.html).

4. Experiment, and Add Your Own Flavour

A friendly API and constant fixes and upgrades make it easy to use. You can use separate components (navigation, charts, etc.) or you can use a Starter Kit.

Solid documentation of the iView is a big plus and of course, it is compatible with the latest Vue.js.

Please note that it doesn’t support IE8. GitHub: https://github.com/Alexays/Epiboard. GitHub Stars: 124.

5. Have Patience and Stay Focused

A tab page gives easy access to RSS feeds, weather, downloads, etc. Epiboard focuses on customizability to provide a user with a personalized experience.

You can synchronize your settings across your devices, change the feel and look and add your favorite bookmarks.

What are the Vue.js Example Projects to Learn From?

This project follows the guidelines of the material design. The full list of the current cards you can find on the GitHub page.

Vue JS Admin Dashboard Template. Website: https://flatlogic.com/admin-dashboards/light-blue-vue-lite.

1. Todo App with Composition API

Demo: https://flatlogic.com/admin-dashboards/light-blue-vue-lite/demo.

GitHub: https://github.com/flatlogic/light-blue-vue-admin. GitHub Stars: 28. Light Blue is built with latest Vue.js and Bootstrap has detailed documentation and transparent and modern design.

This template is easy to navigate, has user-friendly functions and a variety of UI elements.

All the components of this template fit together impeccably and provide great user experience.

2. Vue Todo App

Easy customization is another big plus, cuts dramatically development time.

Account Security Scanner. Website: https://beep.modus.app. GitHub: https://github.com/ModusCreateOrg/beep.

GitHub Stars: 110. This security scanner was built with Vue.js and Ionic.

It runs security checks and keeps passwords safe.

3. Vue Calculator

So how this check is working?

Beep simply compare your data with all the information in the leaked credentials databases.

Your passwords are safe with Beep thanks to the use of the SHA-1 algorithm.

4. Vue User Registration and Login

Plus this app never stores your login and password as it is.

Vue.JS admin dashboard template. Website: https://flatlogic.com/admin-dashboards/sing-app-vue-dashboard.

Demo: https://flatlogic.com/admin-dashboards/sing-app-vue-dashboard/demo.

GitHub: https://github.com/flatlogic/sing-app-vue-dashboard.

5. Vue By Sample

GitHub Stars: 176.

What do you need from an admin template? You definitely need classic look, awesome typography and the usual set of components.

Sing App fits all these criteria plus it has a very soft color scheme. A free version of this template has all the necessary features to start your project with minimal work.

This is an elegantly designed dashboard can be useful more the most of web apps like CMS, CRM or simple website admin panel.

6. Vue Hackernews

PWA for the eCommerce.

Website: https://www.vuestorefront.io. GitHub: https://github.com/DivanteLtd/vue-storefront.

GitHub Stars: 5 198. This PWA storefront can connect almost with any backend for the eCommerce because it uses headless architecture.

This includes popular BigCommerce platform, Magento, Shopware, etc.

7. Vue Stock Trader

Vue Storefront isn’t easy to learn at once because it is a complex solution.

But it gives you lots of possibilities and it always improving thanks to growing community of professionals.

Some of the advantages of Vue Storefront include mobile-first approach, Server-Side Rendering (good for SEO) and offline mode.

GitHub: https://github.com/Arattian/DynamoDb-GUI-Client.

8. Vue Trello

GitHub Stars: 178.

DynamoDB is a NoSQL database applicable in cases where you have to deal with large amounts of data or serverless apps with AWS Lambda.

This GUI client gives remote access plus supports several databases at the same time.

Interactive organization chart.

9. Vue Chat

Demo: https://hoogkamer.github.io/vue-org-chart/#/.

GitHub: https://github.com/Hoogkamer/vue-org-chart. GitHub Stars: 44. With this solution, no webserver, install or database needed.

This simple chart can be edited in excel or webpage.

You can easily search for a particular manager or department.

10. Vue Gmail Clone

Also, there are two options for usage.

First as a static website. This option is suitable for you if you want to use vueOrgChart without modification.

If you are planning to build your own chart on top of this project you will have to study the section “Build Setup”.

Favicon generator. Website: https://www.faviator.xyz.

11. Vue Google Keep Clone

Demo: https://www.faviator.xyz/playground.

GitHub: https://github.com/faviator/faviator. GitHub Stars: 63. This library helps you to create a simple icon.

The first step is to pass in a configuration, and second, choose the format of your icon.

You can choose JPG, PNG or SVG format.

12. Vue Slack Clone

As you can see in the screenshot you can choose any font from the Google Fonts.

Web app for PC or Tablet. Demo: https://vladocar.github.io/Minimal-Notes/. GitHub: https://github.com/vladocar/Minimal-Notes.

GitHub Stars: 48. There is not much to say about this app.

It is minimalistic, works on a browser locally, stored in localStorage and the file is only 4Kb.

13. Vue Quasar Admin

It is also available for Mac OS but the file form 4KB becomes 0.45 Bb.

But it is still very lightweight. CMS built with Vue.js. Website: https://directus.io.

Demo: https://directus.app/?ref=madewithvuejs.com#/login.

GitHub: https://github.com/directus/directus.

14. Vue Admin Template

GitHub Stars: 4 607.

Directus is a very lightweight and simple CMS. It has been modularized to give the developers the opportunity to customize it in every aspect.

The main peculiarity of this CMS is that it stores your data in SQL databases so it can stay synchronized with every change you made and be easily customized.

It also supports multilingual content.

15. Vue Netflix Clone

Static Site Generator.

Website: https://vuepress.vuejs.org. GitHub: https://github.com/vuejs/vuepress.

GitHub Stars: 12 964. The creator of Vue.js, Evan You, created this simple site generator.

Minimalistic and SEO friendly it has multi-language support and easy Google Analytics integration.

16. Vue Reddit Clone

A VuePress site is using VueRouter, Vue, and webpack.

If you worked with the Nuxt or Gatsby you will notice some familiarities.

The only difference is that Nuxt was created to develop applications and VuePress is for building static websites.

Documentation site generator.

17. Vue RealWorld Example

Website: https://docsify.js.org/#/.

GitHub: https://github.com/docsifyjs/docsify. GitHub Stars: 10 105. This project has an impressive showcase list.

The main peculiarity of this generator lies in the way pages are generated. It simply grabs you Markdown file and displays it as a page of your site.

Another big plus of this project is a full-text search and API plugins.

18. Vue Online Music Player

It supports multiple themes and really lightweight.

Standard Tooling for Vue.js Development. Website: https://cli.vuejs.org. GitHub: https://github.com/vuejs/vue-cli.

GitHub Stars: 21 263. This well-known tooling was released by the Vue team.

Please note that before starting to use it you should install the latest version of Vue.js, Node.js, NPM, and a code editor.

19. Vue Hackernews 2.0

Vue CLI has a GUI tool and instant prototyping.

Instant prototyping is a relatively new feature. It allows you to create a separate component.

And this component will have all “vue powers” as full Vue.js project.

Spreadsheet Parser and Writer. Website: https://sheetjs.com/.

20. Vue Node.js Youtube Clone

Demo: https://sheetjs.com/demos.

GitHub: https://github.com/SheetJS/js-xlsx. GitHub Stars: 16 264. SheetJS is a JS library that helps you to operate data stored in excel file.

For example, you can export a workbook on browser-side or convert any HTML table.

In other words, SheetJS doesn’t involve a server-side script, or for example AJAX.

21. Jira Clone

This the best solution for front-end operation of two-dimensional tables.

It can export and parse data and run in node terminal or browser side. Browser devtools extension.

GitHub: https://github.com/vuejs/vue-devtools.

GitHub Stars: 13 954. Almost any framework provides developers with a suitable devtool.

This is literally an additional panel in the browser which very differs from the standard one.

Do you know other repos?

You don’t have to install it as a browser extension. There is an option to install it as a standalone application.

You can activate it by right-click the element and choose “Inspect Vue component” and navigate the tree of components.

  • The left menu of this tool will show you the data and the props of the component.
  • Data Grid Component. Website: https://handsontable.com.
  • GitHub: https://github.com/handsontable/handsontable.

GitHub Stars: 12 049.

This component has a spreadsheet look, can be easily modified with a plugin and binds to almost any data source.