Vue Project Demo

Posted on  by admin
  • 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. Before you choose an example project, Here are some tips when learn from example projects.
  • With so many open-source projects available on Github, we often feel overwhelmed with them. 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.
  • With an example project, you might think that you will learn it only by reading the codes.
  • 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.
  • 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.
  • 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. Last but not least, have patience while you learn.
  • Don’t rush, and stay focused. It will takes time, but it worth it. 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! 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 . 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 .
  • vue-calculator (this link opens in a new window) by codyseibert (this link opens in a new window).
  • 4 Watchers 44 Stars 49 Forks . 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 . 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 . 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 . 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 . 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 .
  • 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 .
  • 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 . 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 .
  • 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 . 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 . 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 .
  • 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 . 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 . 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 . 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 . 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 . 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 .
  • 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 .
  • 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.
  • Vue.js with Sails.js example project(opens new window) - This project is for those who are new to single-page applications and want to learn through a real example.
  • Vue.js & Pyramid web framework app(opens new window) - A boilerplate using Pylons Pyramid webframework backend Vuejs webpack2, vue-router, yarn(packet manager)
  • vue-feathers-chat(opens new window) A sample realtime chat made with Vue in frontend and Feathers in backend, but using just Socket.IO-Client for the communication
  • vue-xplan(opens new window) A rotating earth demo page created with Vue and three.js
  • vueSocketChatRoom(opens new window) A socket chat room using vue2.x,vuex2.x,vue-router2.x,vux2.x,socket.io
  • vue-tetris (Use Vue, Vuex, Immutable to code Tetris)(opens new window) by @Binaryify(opens new window): Use Vue, Vuex, Immutable to code Tetris.
  • route-planner-vue(opens new window) by @Kasheftin(opens new window): The tool for planning routes with multiple sortable layers, draggable directions, markers and shapes on google map.
  • MyDiary-Vue(opens new window) A diary application build with Vue 2.X which is also have contact and todolist function
  • VueJS Example Projects(opens new window) on Github
  • todo-mvc-webpack(opens new window) by voluntapear(opens new window) TodoMVC implementation on Vue 2 using the webpack-basic template with examples showing vuex, vue-router, central event bus and VueFire.
  • Chess Storybook Example(opens new window) with Vue 2.0
  • Vue Weather Notifier(opens new window) A small sample animation app with SVG and Vuex
  • VueBlog(opens new window) A blog system supporting service side rendering by wmui(opens new window)
  • Cinemateka(opens new window) - An example of SPA made with Vue v1 & Laravel 5. Film & events schedule. Russian comments.
  • vue-2.x-boilerplate(opens new window) - A simple and small starter kit for a Vue project Vuex + vue-router
  • vue-minesweeper(opens new window) - A deadly simple minesweeper game with vuejs by rhapsodyn(opens new window)
  • X-Flowchart-Vue(opens new window) - A flowchart editor with SVG and Vue
  • koa-vue-notes-web(opens new window) - A fleshed-out SPA using Koa 2.3 on the backend and Vue 2.4 on the frontend. Includes fully featured user-authentication components, CRUD actions for the user's notes, and Vuex store modules.
  • Vuejs Shopping Cart(opens new window) - Shopping cart example using Vuejs and Firebase
  • PokedexVueJs(opens new window) by @rchung95
  • vuefire-auth(opens new window) A Vuefire Vue2-Auth-Email Verification with Firebase
  • vuefire-realtimedatabase(opens new window) A Vuefire Vue2-RealtimeDatabaseCRUD with Firebase
  • vuefire-storage(opens new window) A Vuefire Vue2-Storage with Firebase
  • Vue2-PWA-Blog(opens new window) by @deepak-singh
  • vue-firebase-auth-vuex(opens new window) A Vue2 Firebase Authentication with Vuex and support Progressive Web Apps
  • vue-chart-stater-kit(opens new window) Quick starter using Vue Router, Vue Chart, Element-UI
  • vue2.0-demos(opens new window) using mint-ui, Element-UI,And have Some demos(select city and so on)
  • conway(opens new window) Conway's Game of Life in Vue.
  • vuex-feature-scoped-structure(opens new window) An example application of the feature scoped vuex application structure
  • vuex-examples(opens new window) - Simple Examples on using Vuex to build Real World Apps
  • vue-vuex-todomvc(opens new window) - Example TodoMVC Vue.js app with Vuex store and server backend via REST and full set of E2E tests using Cypress.io(opens new window) test runner.
  • vuejs-sqljs-boilerplate(opens new window) - This is a boilerplate to use both Vue.js and sql.js together
  • X-WebDesktop-Vue(opens new window) - The WebDesktop system based on Vue
  • vuejs-music-player(opens new window) - A Vue.js lite music player
  • Vue.js Best Practices Example Project(opens new window) - A best practices example project using Vue.js + Vue Router + Vuex + Vuelidate
  • Vue.js [ONE] client(opens new window) - [ONE] client written with Vue2.5
  • Vue.js 2.5 with vue-cli v3 including authentication with auth0(opens new window) by Dominik Angerer, Storyblok
  • Skeleton Vue+TypeScript(opens new window) - TypeScript, VueJS, ElementUI, Vue Router, Vuex, Material Icons, BrowserSync, Dockerfile
  • PENV Starter(opens new window) - A basic example of how to use VueJS, Express and PostgreSQL in conjunction
  • vue-relay-examples(opens new window) - A collection of example applications using vue-relay.
  • laravel-vue-boilerplate(opens new window) - A Laravel 5.5 SPA boilerplate with a users CRUD using Vue.js 2.5, Bootstrap 4, TypeScript, Sass, Pug and Jest.
  • Vue Design System(opens new window) - An open source boilerplate for building UI Design Systems with Vue.js.
  • Vue Bulma Demo(opens new window) - A simple demo website to check out Bulma / Vue JS & express in conjunction.
  • vue.js与laravel结合的前后端分离开发模板(opens new window)- A template website to laravel passport / Vue.JS & Element UI.
  • Hands-On Web Development with Vue.js(opens new window) by Roman Kuba, Packt. (May 2018)
  • Vue Online Shopping Mall(opens new window) - A online shopping mall SPA demo, 基于VUE开发的前后端分离电子商城前端项目
  • FUE(opens new window) - Admin SPA client and server-side boilerplate with Vue.js + Vue Router + Vuex + Vuetify + FeathersJS
  • Vue + TypeScript Cookbook(opens new window) - A small cookbook covering some less-than-obvious solutions for people getting started with Vue + TypeScript
  • ASP.NET Core Vue Starter CLI 3.0(opens new window) A Vue starter template using Vue CLI 3.0 with custom configuration (default TypeScript, Vue, Router, Vuex, Vuetify) integrated with ASP.​NET Core by @SoftwareAteliers(opens new window) (September 2018)
  • vue-soundcloud(opens new window) A Soundcloud client built with Vue.js 2, by Soroush Chehresa(opens new window)
  • vue-cart(opens new window) - A simple shop cart made with vue, vuex and vue router. by crisgon(opens new window)
  • Nuxt + Apollo + Element(opens new window) A Vue.js SSR boilerplate with Nuxt, Element (custom theme) and Vue Apollo.
  • vue-daily-zhihu(opens new window) a simple demo build with Vue 2.0 & vue-router & vuex by walleeeee(opens new window)
  • Multi-page ASP.NET Core Vue with TypeScript(opens new window) - Multi-page ASP.NET Core Vue, Typescript, Vuex, Vue router, Bulma, Sass and Jest application. Template/starting point on how to use Vue.js as a multi page(multiple mini spa's) application in .NET Core MVC.
  • CION - Design system boilerplate for Vue.js(opens new window) - A design system build primarily for Vue.js applications. It utilizes design tokens, a living styleguide with integrated code playgrounds and reusable components for common UI tasks.
  • Vue websockets example(opens new window) - A basic example of Websockets usage with Vue.js 2 + Node project for full working example.
  • Vue(2.0) + Node.js: A blog(opens new window) by @FatDong1
  • vue-todo-list(opens new window) ToDo List sample app based on Vue + Vuex + Vuetify + Vee-Validate
  • Vue.js and Ionic v4 examples(opens new window) - A set of examples of how to use Ionic v4 with Vue.js
  • Personal Website that use Vue, Vuex and Vue-Router(opens new window) - A simple website example that made with vue, vuex and vue-router by Muratcan Şentürk(opens new window)
  • Client-Side Vue.js(opens new window) - Demo(opens new window) - Vue.js client-side for tiny, quick-loading, Node.js-less Single Page Apps by Justin Wash(opens new window)
  • Large scale Vue.js application boilerplate + Vuex(opens new window) - A boilerplate for starting large scale, flexible Vue.js application with using Vuex as state management - by Arun Redhu(opens new window)
  • Vue webpack typescript(opens new window) - Boilerplate with sass/ts/sfc linters. Full typesafety including vuex and nice looking vue component with vuex-module-decorators, vue-property-decorator
  • Laravel + Nuxt.js boilerplate(opens new window) - by @acidjazz(opens new window)
  • TO(opens new window) - A social media app that allows you post just texts
  • All-About-Me(opens new window) - A Social Media Web App built with Vue, Firebase (Firestore/Auth/Storage), Element-UI, Disqus, Vuex, Vue-Router, and Sass. Supports image uploading, profile editing, add/remove friends, and comments.
  • Vue Voyagers Space Travel(opens new window) - A Vue.js Gamified example SPA that consumes a REST API. It presents infographics via D3.js, animation, and web audio
  • TodoMVC Vue 3 Composition API(opens new window) - A complete TodoMVC implementation in Vue 3 Composition API with components, store, unit e2e tests and linting
  • TodoMVC Vue(opens new window) - A complete TodoMVC implementation in Vue 2 with components, store, unit e2e tests and linting
  • Movie search app with Composition API(opens new window) - A movie search app implemented in Vue 2 with the Composition API plugin
  • Nuxt with JWT authentication via OTP(opens new window) - A Nuxt.js boilerplate with basic register and OTP-enabled login functions
  • vuetify-i18n-boilerplate(opens new window) - Demo(opens new window) - A boilerplate to quickly start a Vue project using Vuetify, Vue-i18n, Vuex and Vue-router
  • Google Keep Clone with Vue + Firestore(opens new window) - Google Keep clone with Vue and Firestore written in TypeScript
  • Go-echo-vuejs-boilerplate(opens new window) - Boilerplate that uses go with echo framework as a backend and vuejs that serve the web traffic
  • Vue-Next-TicTacToe(opens new window) - Simple Tic Tac Toe Game made with Vue Next
  • Vue 3 example without Webpack(opens new window) - An example of how to build a Vue app with Vue-Router without the need for Webpack or any other build tool. Includes the ability to prerender components and pages with Vue Server Renderer
  • COVID19 Live Data Component(opens new window) - Simple component that shows live COVID-19 data across the world
  • vue-stack-cesium(opens new window) - A minimal sample configuration project with CesiumJS(opens new window) and all the awesome Vue features. The project contains many examples how to combine and use certain packages to get started
  • Shopify Theme Lab(opens new window) - Shopify theme development starter using Vue, Vuex and Tailwind CSS
  • Peer to Peer game of telephone(opens new window) - A party game for 4 to 8 players (ideally!) where you mutate a phrase through drawings and captions, to make up funny scenarios with your friends. The project is an example of how to build a peer-to-peer game with Vue
  • vue3-webpack(opens new window) - Vue 3 + Webpack 4 starter
  • laravel-vue-3-starter(opens new window) - A pre-configured project using Laravel 8 and Vue 3
  • Vuetify Swipeout(opens new window) - A swipe out example built with Vue 2 + Vuetify + Swiper
  • Vuetify Todo PWA(opens new window) - A simple Todo PWA built with Vue 2 + Vuex + Vuetify
  • Vue Todo PWA(opens new window) - A simple Todo PWA built with Vue 3 + Vuex + Bootstrap 5
  • Vue simulating(opens new window) - A website simulating Linux system's GUI, using theme of Deepin distro. Using Vue + Tailwind CSS + Animate.css
  • Vue Word Game(opens new window) - A simple Hangman-like word guessing game, built with Vue 2
  • Coinchartsvue(opens new window) - Coinchartsvue is a cryptocurrency price chart based off Coinbase's original price chart
  • Vue 3 Shopping Cart(opens new window) - A Shopping cart example using Vue 3, Vite, daisyUI(opens new window) and Pinia(opens new window)
  • Lipku(opens new window) - Vue.js charts and other libraries
  • vuemoji-picker(opens new window) - Vue 2 and 3 lightweight emoji picker
  • Maxim Web Chat(opens new window) - A chat demo using MaximTop(opens new window)'s IM SDK (floo), 使用美信拓扑 IM SDK 实现的聊天App 示例
  • vue-cli-3-tailwind-axios-starter(opens new window) - A boilerplate using Tailwind, Axios-ready, Vuex and Router
  • vue-cli-3-wave-ui-starter(opens new window) - A boilerplate using Wave UI + Vuex and Router
  • CVue-Awesome(opens new window) - Auto resume builder by Emre Coşkunçay(opens new window)
  • Vue 3 TypeScript Library Template(opens new window) - A simple but complete library template for Vue 3, supports generating .vue.d.ts
  • Customizable Vue video chat app(opens new window) - A Vue video call demo app featuring local device controls and screen sharing
  • Vue3-Starter(opens new window) - A boilerplate with an opinion on how to structure your files/folders with a few examples such as Vue Router navigation guards, theming with Tailwind CSS, form validation w/ Vuelidate, localization with Fluent, etc.