21 Vue.js Example Projects to Learn From (Open-source, Beginner to Intermediate Level)

Vue.js is one of the most popular javascript frameworks along with React.js and Angular. It designed to be incrementally adoptable and focused on the view layer only.

It has very well documentation and video courses by Vuemastery and Vueschool to help you learn the fundamental of Vue.js.

However, learning from documentation and tutorial is not enough. You should also learn from Vue.js example projects to know how people use it and best practices for some cases.

Taking a look at the example projects will also encourage you to practice what you have learned from the tutorial.

In this post, I will share the list of Vue.js example projects that I compiled from Github. I sorted them from beginner to intermediate level.

Related Posts

• 21 React Example Projects (Open-source, Beginner-Intermediate Level)
• 21 Flutter Example Apps (Opensource, Beginner-Intermediate Level)

How To Learn Vue.js Example Projects / Case Studies?

Before you choose an example project, Here are some tips when learn from example projects.

1. Choose Only One Project at A Time

With so many open-source projects available on Github, we often feel overwhelmed with them. That’s okay.

But, when you really want to learn from those projects, never do that by learning them at once. Human brains aren’t designed to multi-task.

You should filter them, and choose only one project that you really want to learn. After you finished it, then you can choose the next project.

2. Replicates, But Don’t Copy-Paste the Codes

With an example project, you might think that you will learn it only by reading the codes. No, you don’t.

You should rewrite it on your own, and don’t just copy-pasting it. It may sound trivial, but trust me you will find out more as you rewrite the codes.

3. Be Curious, Find out Why the Codes Work

In the rewriting process, you will find some codes that aren’t familiar with you.

When this happened, be curious to find why those codes work. Because it will likely to increase your knowledge.

4. Experiment, and Add Your Own Flavour

After you find some unfamiliar codes, do some experiment with them. Modify them, see if it still works or not, and again, find out why.

You should also add your own codes as you learn more. Combine it with the base codes. It can be styling or adding more features.

With enough modification, you can make it as your portfolio, of course by mentioning the example project you use.

5. Have Patience and Stay Focused

Last but not least, have patience while you learn. Don’t rush, and stay focused. It will takes time, but it worth it.

Good luck!

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

Now, you can choose one of the following projects to learn. I sort them from the easiest to moderate level.

Remember, only pick one project to learn at a time!

1. Todo App with Composition API

Dark Mode

vue3-composition-api-todo-app (this link opens in a new window) by BurakGur (this link opens in a new window)

Basic ToDo App with Vue 3 Composition API

1 Watcher    6 Stars    4 Forks

2. Vue Todo App

Dark Mode

todo-vue (this link opens in a new window) by drehimself (this link opens in a new window)

Code for YouTube series on building a Todo App in Vue.js

14 Watchers    198 Stars    119 Forks

3. Vue Calculator

Dark Mode

vue-calculator (this link opens in a new window) by codyseibert (this link opens in a new window)

4 Watchers    44 Stars    49 Forks

4. Vue User Registration and Login

Dark Mode

vue-vuex-registration-login-example (this link opens in a new window) by cornflourblue (this link opens in a new window)

Vue + Vuex – User Registration and Login Tutorial & Example

11 Watchers    301 Stars    185 Forks

5. Vue By Sample

Dark Mode

vuejs-by-sample (this link opens in a new window) by Lemoncode (this link opens in a new window)

The goal of this project is to provide a set of step by step samples, covering core concepts of Vue.js

8 Watchers    60 Stars    33 Forks

6. Vue Hackernews

Dark Mode

vue-hackernews (this link opens in a new window) by vuejs (this link opens in a new window)

HackerNews clone with Vue.js

103 Watchers    2502 Stars    540 Forks

7. Vue Stock Trader

Dark Mode

vuejs-example-stock-trader (this link opens in a new window) by sarneeh (this link opens in a new window)

Vue.js + Vue Router + Vuex in a simple Stock Trading game

3 Watchers    35 Stars    14 Forks

8. Vue Trello

Dark Mode

vue-trello (this link opens in a new window) by zackthoutt (this link opens in a new window)

A Trello clone built with VueJS

10 Watchers    156 Stars    43 Forks

9. Vue Chat

Dark Mode

vue-chat (this link opens in a new window) by Coffcer (this link opens in a new window)

chat example by vue.js + vuex + webpack

78 Watchers    1583 Stars    486 Forks

10. Vue Gmail Clone

Dark Mode

gmail-clone (this link opens in a new window) by josuemartinezz (this link opens in a new window)

Beautiful gmail redesign created with vue and tailwindcss 🎈

2 Watchers    21 Stars    5 Forks

11. Vue Google Keep Clone

Dark Mode

gkeep-vueifire (this link opens in a new window) by Swimburger (this link opens in a new window)

Google Keep clone with Vue and Firebase

8 Watchers    153 Stars    52 Forks

12. Vue Slack Clone

Dark Mode

vuejs-slack-clone-realtime (this link opens in a new window) by ittus (this link opens in a new window)

Slack clone using VueJS and firebase

1 Watcher    34 Stars    12 Forks

13. Vue Quasar Admin

Dark Mode

vue-quasar-admin-example (this link opens in a new window) by odranoelBR (this link opens in a new window)

Example of quasar admin

53 Watchers    478 Stars    168 Forks

14. Vue Admin Template

Dark Mode

vue-admin-template (this link opens in a new window) by fatihunlu (this link opens in a new window)

Sample Admin Template based on Vuejs & Vuetify.

9 Watchers    173 Stars    63 Forks

15. Vue Netflix Clone

Dark Mode

Vueflix (this link opens in a new window) by ricardovasconcelos (this link opens in a new window)

A simple Netflix clone built with Vuejs

6 Watchers    57 Stars    9 Forks

16. Vue Reddit Clone

Dark Mode

revue (this link opens in a new window) by Lanseuo (this link opens in a new window)

A reddit clone built with Vue.js and Flask

3 Watchers    24 Stars    5 Forks

17. Vue RealWorld Example

Dark Mode

vue-realworld-example-app (this link opens in a new window) by gothinkster (this link opens in a new window)

An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.

77 Watchers    3482 Stars    1049 Forks

18. Vue Online Music Player

Dark Mode

Vue-mmPlayer (this link opens in a new window) by maomao1996 (this link opens in a new window)

🎵 基于 Vue 的在线音乐播放器（PC） Online music player

43 Watchers    1398 Stars    420 Forks

19. Vue Hackernews 2.0

Dark Mode

vue-hackernews-2.0 (this link opens in a new window) by vuejs (this link opens in a new window)

HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering

329 Watchers    10703 Stars    2198 Forks

20. Vue Node.js Youtube Clone

Dark Mode

vue-nodejs-youtube-clone (this link opens in a new window) by techreagan (this link opens in a new window)

This is the frontend (VueJS) of the Youtube clone called VueTube.

14 Watchers    311 Stars    89 Forks

21. Jira Clone

Dark Mode

jira_clone (this link opens in a new window) by Datlyfe (this link opens in a new window)

A Jira clone built with Vuejs & Nodejs/Graphql

27 Watchers    653 Stars    101 Forks

~~

Do you know other repos?

If you know other Github repositories that worth mentioning here, don’t hesitate to share them in the comment section.

The repository should be:

• A Vue example project
• Has a demo page, or at least some screenshot
• Work with no significant console error

Thank you.

Happy coding!