20 Vue Example Projects to Learn From (Open-source, Beginner-Advanced Level)

A CURATED list of Vue example projects that can be filtered and sorted by github stars, tags, difficulty level, and other features to help you find the best projects to learn from.

Latest updated on



20 results

How To Learn Vue With Example Projects?

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 advanced level.

Related Resources

Just because you clone an example project from Github, you won't really learn much from it.

Before you choose an example project, Here are some tips when learning from it.

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!

Vue Hackernews 2.0

1. Vue Hackernews 2.0

Github stars11.0k stars
HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering
You will also learn Vuex, Vue SSR in this project.
Project clone
Visit repository
Vue Realworld Example

2. Vue Realworld Example

Github stars4.1k stars
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.
You will also learn Vuex in this project.
Social Media
Visit repository
Vue MM Player

3. Vue MM Player

Github stars2.5k stars
🎵 基于 Vue 的在线音乐播放器 Online music player
You will also learn Vuex in this project.
Vue Chat

4. Vue Chat

Github stars1.8k stars
chat example by vue.js + vuex + webpack
You will also learn Vuex in this project.
Jira Clone

5. Jira Clone

Github stars920 stars
A Jira clone built with Vuejs & Nodejs/Graphql
You will also learn Tailwindcss, Graphql, Monorepo, Express in this project.
Project clone
Visit repository
Vue Quasar Admin

6. Vue Quasar Admin

Github stars562 stars
Example of quasar admin
You will also learn Vuex, Firebase, Quasar in this project.
VueTube Youtube Clone

7. VueTube Youtube Clone

Github stars482 stars
This is the frontend (VueJS) of the Youtube clone called VueTube.
You will also learn Vuex, Vuetify in this project.
Project clone
Visit repository
No Image

8. Vue Vuex Registration/Login

Github stars391 stars
Vue + Vuex - User Registration and Login Tutorial & Example
You will also learn Vuex in this project.
Vue Admin Template

9. Vue Admin Template

Github stars293 stars
Sample Admin Template based on Vuejs & Vuetify.
You will also learn Vuetify in this project.
Vue Todo App

10. Vue Todo App

Github stars231 stars
Code for YouTube series on building a Todo App in Vue.js
Vue Trello

11. Vue Trello

Github stars180 stars
A Trello clone built with VueJS
Project clone
Visit repository
Google Keep Clone

12. Google Keep Clone

Github stars151 stars
Google Keep clone with Vue and Firebase
You will also learn Firebase in this project.
Project clone
Visit repository
Vueflix

13. Vueflix

Github stars94 stars
A simple Netflix clone built with Vuejs
You will also learn Vuex in this project.
Project clone
Visit repository
No Image

14. Vue By Sample

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

15. Vue Calculator

Github stars55 stars
Vue Slack Clone

16. Vue Slack Clone

Github stars51 stars
Slack clone using VueJS and firebase
You will also learn Vuex, Firebase in this project.
Project clone
Visit repository
Vue todo app composition API

17. Vue todo app composition API

Github stars50 stars
Basic ToDo App with Vue 3 Composition API
Vue Stock Trader

18. Vue Stock Trader

Github stars44 stars
Vue.js + Vue Router + Vuex in a simple Stock Trading game
You will also learn Vuex, Vuelidate in this project.
Vue Gmail Clone

19. Vue Gmail Clone

Github stars40 stars
Beautiful gmail redesign created with vite/vue and tailwindcss 🎈
You will also learn Tailwindcss in this project.
Project clone
Visit repository
Vue Reddit Clone

20. Vue Reddit Clone

Github stars32 stars
A reddit clone built with Vue.js and Flask
You will also learn Flask, MongoEngine in this project.
Project clone
Visit repository