21 Vue.js Example Projects to Learn From (Open-source, Beginner to Intermediate Level)
Tags: vue, javascript, opensource, webdev
Published: 2021-03-09 13:31:20

This post was originally published at <a href="https://www.devaradise.com/vue-example-projects">https://www.devaradise.com/vue-example-projects</a>

<!-- wp:paragraph -->
<p><a href="https://vuejs.org/" target="_blank" rel="noreferrer noopener">Vue.js</a> is one of the most popular javascript frameworks along with <a href="https://www.devaradise.com/category/react-tutorials">React.js</a> and Angular. It designed to be incrementally adoptable and focused on the view layer only.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It has very well documentation and video courses by <a href="https://www.vuemastery.com/" target="_blank" rel="noreferrer noopener nofollow">Vuemastery</a> and <a href="https://vueschool.io/" target="_blank" rel="noreferrer noopener">Vueschool</a> to help you learn the fundamental of Vue.js.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Taking a look at the example projects will also encourage you to practice what you have learned from the tutorial.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Related Posts</h4>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><a href="https://www.devaradise.com/react-example-projects">21 React Example Projects (Open-source, Beginner-Intermediate Level)</a></li><li><a href="https://www.devaradise.com/flutter-example-apps">21 Flutter Example Apps (Opensource, Beginner-Intermediate Level)</a></li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>How To Learn Vue.js Example Projects / Case Studies?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before you choose an example project, Here are some tips when learn from example projects.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>1. Choose Only One Project at A Time</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>With so many open-source projects available on Github, we often feel overwhelmed with them. That’s okay.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But, when you really want to learn from those projects, never do that by learning them at once.&nbsp;<a href="https://brainfodder.org/multi-tasking-doesnt-work/" target="_blank" rel="noreferrer noopener nofollow">Human brains aren’t designed to multi-task</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>2. Replicates, But Don’t Copy-Paste the Codes</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>With an example project, you might think that you will learn it only by reading the codes. No, you don’t.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>3. Be Curious, Find out Why the Codes Work</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the rewriting process, you will find some codes that aren’t familiar with you.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When this happened, be curious to find why those codes work. Because it will likely to increase your knowledge.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>4. Experiment, and Add Your Own Flavour</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With enough modification, you can make it as your portfolio, of course by mentioning the example project you use.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>5. Have Patience and Stay Focused</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Last but not least, have patience while you learn. Don’t rush, and stay focused. It will takes time, but it worth it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Good luck!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What are the Vue.js Example Projects to Learn From?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now, you can choose one of the following projects to learn. I sort them from the easiest to moderate level.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Remember, only pick one project to learn at a time!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>1. Todo App with Composition API</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2898,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-todo-app-composition-api.jpg" alt="vue todo app composition API" class="wp-image-2898"/></figure>
<!-- /wp:image -->

{% github BurakGur/vue3-composition-api-todo-app no-readme %}

<!-- wp:heading {"level":3} -->
<h3>2. Vue Todo App</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2897,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-todo-app.jpg" alt="Vue todo app" class="wp-image-2897"/></figure>
<!-- /wp:image -->

{% github drehimself/todo-vue no-readme %}

<!-- wp:heading {"level":3} -->
<h3>3. Vue Calculator</h3>
<!-- /wp:heading -->

{% github codyseibert/vue-calculator no-readme %}

<!-- wp:heading {"level":3} -->
<h3>4. Vue User Registration and Login</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2900,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-vuex-registration-login.jpg" alt="Vue vuex registration login" class="wp-image-2900"/></figure>
<!-- /wp:image -->

{% github cornflourblue/vue-vuex-registration-login-example no-readme %}

<!-- wp:heading {"level":3} -->
<h3>5. Vue By Sample</h3>
<!-- /wp:heading -->

{% github Lemoncode/vuejs-by-sample no-readme %}

<!-- wp:heading {"level":3} -->
<h3>6. Vue Hackernews</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2908,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-hackernews-clone-1024x512.jpg" alt="Vue Hackernews clone" class="wp-image-2908"/></figure>
<!-- /wp:image -->

{% github vuejs/vue-hackernews no-readme %}

<!-- wp:heading {"level":3} -->
<h3>7. Vue Stock Trader</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2896,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-stock-trader-1024x493.jpg" alt="Vue stock trader" class="wp-image-2896"/></figure>
<!-- /wp:image -->

{% github sarneeh/vuejs-example-stock-trader no-readme %}

<!-- wp:heading {"level":3} -->
<h3>8. Vue Trello</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2899,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-trello-clone-1024x488.jpg" alt="Vue trello clone" class="wp-image-2899"/></figure>
<!-- /wp:image -->

{% github zackthoutt/vue-trello no-readme %}

<!-- wp:heading {"level":3} -->
<h3>9. Vue Chat</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2905,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-chat.jpg" alt="Vue chat" class="wp-image-2905"/></figure>
<!-- /wp:image -->

{% github Coffcer/vue-chat no-readme %}

<!-- wp:heading {"level":3} -->
<h3>10. Vue Gmail Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2906,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-gmail-clone-1024x450.jpg" alt="Vue Gmail Clone" class="wp-image-2906"/></figure>
<!-- /wp:image -->

{% github josuemartinezz/gmail-clone no-readme %}

<!-- wp:heading {"level":3} -->
<h3>11. Vue Google Keep Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2907,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-google-keep.jpg" alt="Vue Google Keep Clone" class="wp-image-2907"/></figure>
<!-- /wp:image -->

{% github Swimburger/gkeep-vueifire no-readme %}

<!-- wp:heading {"level":3} -->
<h3>12. Vue Slack Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2895,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-slack-clone.jpg" alt="Vue slack clone" class="wp-image-2895"/></figure>
<!-- /wp:image -->

{% github ittus/vuejs-slack-clone-realtime no-readme %}

<!-- wp:heading {"level":3} -->
<h3>13. Vue Quasar Admin</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2893,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-quasar-admin-1024x493.jpg" alt="Vue quasar admin" class="wp-image-2893"/></figure>
<!-- /wp:image -->

{% github odranoelBR/vue-quasar-admin-example no-readme %}

<!-- wp:heading {"level":3} -->
<h3>14. Vue Admin Template</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2904,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-admin-template-1024x493.jpg" alt="Vue admin template" class="wp-image-2904"/></figure>
<!-- /wp:image -->

{% github fatihunlu/vue-admin-template no-readme %}

<!-- wp:heading {"level":3} -->
<h3>15. Vue Netflix Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2892,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-netflix-clone.png" alt="Vue netflix clone" class="wp-image-2892"/></figure>
<!-- /wp:image -->

{% github ricardovasconcelos/Vueflix no-readme %}

<!-- wp:heading {"level":3} -->
<h3>16. Vue Reddit Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2903,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/Vue-Reddit-Clone-1024x471.jpg" alt="Vue Reddit Clone" class="wp-image-2903"/></figure>
<!-- /wp:image -->

{% github Lanseuo/revue no-readme %}

<!-- wp:heading {"level":3} -->
<h3>17. Vue RealWorld Example</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2894,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-realwordl-example-1024x512.jpg" alt="Vue realworld example" class="wp-image-2894"/></figure>
<!-- /wp:image -->

{% github gothinkster/vue-realworld-example-app no-readme %}

<!-- wp:heading {"level":3} -->
<h3>18. Vue Online Music Player</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2891,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-mmplayer-online-music-player-1024x471.jpg" alt="Vue music player" class="wp-image-2891"/></figure>
<!-- /wp:image -->

{% github maomao1996/Vue-mmPlayer no-readme %}

<!-- wp:heading {"level":3} -->
<h3>19. Vue Hackernews 2.0</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2902,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/hackernews-2.jpg" alt="Vue Hackernews 2" class="wp-image-2902"/></figure>
<!-- /wp:image -->

{% github vuejs/vue-hackernews-2.0 no-readme %}

<!-- wp:heading {"level":3} -->
<h3>20. Vue Node.js Youtube Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2901,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-youtube-clone-1024x512.jpg" alt="Vue youtube clone" class="wp-image-2901"/></figure>
<!-- /wp:image -->

{% github techreagan/vue-nodejs-youtube-clone no-readme %}

<!-- wp:heading {"level":3} -->
<h3>21. Jira Clone</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":2890,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.devaradise.com/wp-content/uploads/2021/03/vue-jira-clone-1024x493.jpg" alt="Vue jira clone" class="wp-image-2890"/></figure>
<!-- /wp:image -->

{% github Datlyfe/jira_clone no-readme %}

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">~~</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Do you know other repos?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you know other Github repositories that worth mentioning here, don’t hesitate to share them in the comment section.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The repository should be:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>A Vue example project</li><li>Has a demo page, or at least some screenshot</li><li>Work with no significant console error</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Thank you.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Happy coding!</p>
<!-- /wp:paragraph -->