Vue Js Sample Project

Posted on  by admin

JavaScript 1 0 00 Updated Dec 22, 2016. JavaScript 71500 Updated Dec 19, 2016. JavaScript 0 300 Updated Nov 25, 2016. Python 14600 Updated Nov 23, 2016.

HTML 3700 Updated Nov 13, 2016. Node Webkit + Vue example(opens new window) by @brandonjpierce.

Vue Samples(opens new window) by @superlloyd. HackerNews clone with vue.js + vue-router(opens new window) by @kazupon. Electron + Vue example(opens new window) by @bradstewart.

Single page application example (Vue + Voie)(opens new window) by Boris Okunskiy(opens new window).

Begin - Task Manager SPA written in Vue + Lumen(opens new window) by Raj Abishek(opens new window). Vue SoundCloud(opens new window) by mul14(opens new window).

Repositories

Pinned

Feature Requests (Laravel + Vue Combo)(opens new window) by haydenbbickerton(opens new window).


1. Choose Only One Project at A Time

Vue Cookbook (Vue1.0 + express)(opens new window) by @yjj5855(opens new window): A demo first screen rendering of a service.

Strong Together(opens new window) - A starter project to build single page Vue.js apps as stand-alone or for Laravel / Laravel Spark projects, based on Browserify and Semantic-ui) by WebSemantics(opens new window).

vue-shopping(opens new window) by andylei18(opens new window). Vue-cnodejs,060(opens new window) by @shinygang(opens new window).

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

vue-zhihu-daily(opens new window) by hilongjw(opens new window). VueChess(opens new window) - Multiplayer online chess game.

Ngexplorer-vuejs-client(opens new window) - Vue client for Ngexplorer. Vue 2048 (Vue + Webpack)(opens new window) by @pengfu(opens new window): Popular 2048-Game implemented using Vue,Webpack,Sass,ES6.

3. Be Curious, Find out Why the Codes Work

Tour of Heroes (Vue 2.0)(opens new window) - A Vue 2.0 port of the Angular 2.0 Tour of Heroes(opens new window) demo app.

Highlights: ES6/7, render functions, JSX, revue(opens new window) (redux bindings for Vue), vue-router, Airbnb eslint(opens new window), webpack.

4. Experiment, and Add Your Own Flavour

by @aweber1(opens new window). vue-table-pagination(opens new window) A table with pagination by echovic(opens new window).

Feathers and Vue 2.0 Blog Admin Demo(opens new window) Demo for using Feathers with Vue 2.0. It includes authentication, vue-router, vue-infinite-loading and roles by delay(opens new window).

vue-zhihudaily-2.0(opens new window) Zhihudaily demo built with Vue 2.0, vue-router & vuex, with server-side rendering.

5. Have Patience and Stay Focused

by cs1707(opens new window). vue-demo-todolist(opens new window) a simply vue2.0 demo built with Vue 2.0, vue-cli.

by fishenal(opens new window).

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

vue-AdminLte(opens new window) by liujians(opens new window). Vue(2.0) + Node.js: A blog content manage system (CMS)(opens new window) by @ycwalker.

ngexplorer-quasar(opens new window) - Implementation of Ngexplorer with quasar framework(opens new window).

1. Todo App with Composition API

zhihu-daily-vue(opens new window) a zhihu daily base on vue2.0 by moonou(opens new window).

loopback-vue(opens new window) loopback+vue+vue-resource,ionic-app,vue page分页功能,authenticate 权限控制,accesstoken机制,credentials,CI,docker qxl1231(opens new window).

vue-s3-dropzone(opens new window) A Vue.js drag-and-drop component uploads files to AWS S3 serverlessly.

easy-vue(opens new window) a easy example using the vue to implement easy web with vue 2.0, vuex 2.0, vue-router 2.0, vue-infinite-scroll 2.0, vue-progressbar 2.0 by TIGERB(opens new window).

2. Vue Todo App

Vuex Events Messaging Demo(opens new window) by Metric Loop(opens new window).

vue-memo(opens new window) a simple demo build with Vue.js(>2.x.), vue-router(>2.x.), vuex(>2.x.), [email protected](>3.x.) and Firebase(>3.6.x) by akifo(opens new window).

Resume Vue(opens new window) JSON based Resume based on Vue 2.0 by ChangJoo Park(opens new window).

App example with JWT Authentication(opens new window) developed with Phoenix Framework, Vue and Vue Router (demo(opens new window)).

3. Vue Calculator

Sample CRUD app with router in Vue 2.0(opens new window) by @shershen08(opens new window).

ASP.NET Core Vue.js server-side rendering sample(opens new window) by @mgyongyosi(opens new window).

vuefire-quickstart(opens new window) - Documented Firebase integration w/ webpack and eslint, by @sejr(opens new window).

4. Vue User Registration and Login

Real Time Social News App(opens new window) developed with Phoenix Framework, Vue, Vue Router and Vuex (demo(opens new window)).

vue-calculator(opens new window) a simply calculator built with Vue 2.0, vue-cli(webpack-simple).

Wikipedia-viewer(opens new window) A simple wikipedia-viewer page built with vue2.x ,vue-router,vue-cli(webpack-simple) and ajax(jsonp).

vue2.x-douban(opens new window) A simple of douban movie build with vue2.x,vue-router and axios(豆瓣电影).

5. Vue By Sample

by Superman(opens new window).

vue-laravel-example(opens new window) Vue - Laravel - Example is a simple example to set Vue with Laravel.

by Jiajian Chan(opens new window). vue-foundation(opens new window) A demo app integrating VueJS with Zurb Foundation(opens new window), built using the webpack vue-cli f.

aspnetcore-Vue-starter(opens new window) A VueJS 2 starter template as part of an asp.net MVC dotnetcore project.

6. Vue Hackernews

This template includes the VueJS client app and a backend API controller.

vue-reddit-app(opens new window) A Reddit SPA demo(opens new window) built with Vue 2.X , Vue Router 2 , Vuex and axios.

Using Muse-UI and vue-cli webpack template by @yujiahaol68(opens new window).

vue-music-qq(opens new window) A qq-music project is based on vue-cli.

7. Vue Stock Trader

The pages are simple and smooth.

NavigationTab with Vue-Redux and Plain VueJSX(opens new window) Navigation Tab with both plain Vue JSX and Vue + Redux Binding.

Veggie Map(opens new window) An interactive demo using Vuejs + Vue router + Leaflet and Firebase.

vuejs-d3(opens new window) examples how to use d3 for visualisations.

8. Vue Trello

vue-twitter-client(opens new window) A Twitter Client App build with Vue 2.X, Vuex, electron-vue and Electron.

Douban(opens new window) Awesome douban Example created with Vue2.x + Vuex + Vue-router + vue-resource.

by jeneser(opens new window).

Storyblok vuejs-boilerplate(opens new window) - Integrates Storyblok's Component System, allows to create editable Websites.

9. Vue Chat

Vuexpresso(opens new window) - A boilerplate using VueX, Vue-Router, Vue-Apollo, webpack, GraphQL, Apollo-client, express and mongo.

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.

10. Vue Gmail Clone

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.

11. Vue Google Keep Clone

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.

12. Vue Slack Clone

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).

13. Vue Quasar Admin

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.

14. Vue Admin Template

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.

15. Vue Netflix Clone

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).

16. Vue Reddit Clone

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.

17. Vue RealWorld Example

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.

18. Vue Online Music Player

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.

19. Vue Hackernews 2.0

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.

20. Vue Node.js Youtube Clone

Hands-On Web Development with Vue.js(opens new window) by Roman Kuba, Packt.

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.

21. Jira Clone

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.

Do you know other repos?

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.