DEV Community

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

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

syakirurahman profile image Syakir Rahman Originally published at devaradise.com ・8 min read

This post was originally published at https://www.devaradise.com/vue-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 intermediate level.

Related Posts

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

vue todo app composition API

GitHub logo BurakGur / vue3-composition-api-todo-app

Basic ToDo App with Vue 3 Composition API

2. Vue Todo App

Vue todo app

GitHub logo drehimself / todo-vue

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

3. Vue Calculator

4. Vue User Registration and Login

Vue vuex registration login

GitHub logo cornflourblue / vue-vuex-registration-login-example

Vue + Vuex - User Registration and Login Tutorial & Example

5. Vue By Sample

GitHub logo Lemoncode / vuejs-by-sample

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

6. Vue Hackernews

Vue Hackernews clone

GitHub logo vuejs / vue-hackernews

HackerNews clone with Vue.js

7. Vue Stock Trader

Vue stock trader

GitHub logo sarneeh / vuejs-example-stock-trader

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

8. Vue Trello

Vue trello clone

GitHub logo zackthoutt / vue-trello

A Trello clone built with VueJS

9. Vue Chat

Vue chat

GitHub logo Coffcer / vue-chat

chat example by vue.js + vuex + webpack

10. Vue Gmail Clone

Vue Gmail Clone

GitHub logo josuemartinezz / gmail-clone

Beautiful gmail redesign created with vue and tailwindcss 🎈

11. Vue Google Keep Clone

Vue Google Keep Clone

GitHub logo Swimburger / gkeep-vueifire

Google Keep clone with Vue and Firebase

12. Vue Slack Clone

Vue slack clone

GitHub logo ittus / vuejs-slack-clone-realtime

Slack clone using VueJS and firebase

13. Vue Quasar Admin

Vue quasar admin

14. Vue Admin Template

Vue admin template

GitHub logo fatihunlu / vue-admin-template

Sample Admin Template based on Vuejs & Vuetify.

15. Vue Netflix Clone

Vue netflix clone

GitHub logo ricardovasconcelos / Vueflix

A simple Netflix clone built with Vuejs

16. Vue Reddit Clone

Vue Reddit Clone

GitHub logo Lanseuo / revue

A reddit clone built with Vue.js and Flask

17. Vue RealWorld Example

Vue realworld example

GitHub logo gothinkster / vue-realworld-example-app

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.

18. Vue Online Music Player

Vue music player

GitHub logo maomao1996 / Vue-mmPlayer

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

19. Vue Hackernews 2.0

Vue Hackernews 2

GitHub logo vuejs / vue-hackernews-2.0

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

20. Vue Node.js Youtube Clone

Vue youtube clone

GitHub logo techreagan / vue-nodejs-youtube-clone

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

21. Jira Clone

Vue jira clone

GitHub logo Datlyfe / jira_clone

A Jira clone built with Vuejs & Nodejs/Graphql

~~

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!

Discussion (6)

pic
Editor guide
Collapse
nowocodes profile image
Favour

Thanks for sharing

Collapse
syakirurahman profile image
Syakir Rahman Author

Glad to help

Collapse
jsbroks profile image
Justin Brooks

Thought I would drop a link to Coding With Justin github.com/codingwithjustin.
I have a lot of Vue 3 project examples, as well as tutorials to go along with them.

Collapse
syakirurahman profile image
Syakir Rahman Author

Just drop your vue examples here, so people can see them bro 😁

Collapse
fininhors profile image
Francisco Junior

Excellent, thanks for share.

Collapse
syakirurahman profile image
Syakir Rahman Author

You're welcome bro