Vue Sample

Posted on  by admin

How To Learn Vue.js Example Projects / Case Studies?

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.

Web development, programming languages, Software testing & others

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.


vuejs-example-stock-trader (this link opens in a new window) by sarneeh (this link opens in a new window).

main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Add from './components/Add.vue';
Vue.use(VueRouter);
const routes = [
{
name: 'Weseley',
path: '/add',
component: Add
}
];
const router = new VueRouter({ mode: 'history', routes: routes });
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router
}).$mount('#app')

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









vue.js Axios Demo




chat example by vue.js + vuex + webpack.

7. Vue Stock Trader

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. Todo App with Composition API

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






The Content Text app



Vue Content







App.vue
const vm = new Vue({
el: '#app',
data: {
results: [
{theme: "Hello World", abstr: "Norway is a Scandivian country"},
{theme: "Welcome Page", abstr: "Norway is a Scandivian country"},
{theme: "Home Page", abstr: "Norway is a Scandivian country"},
{theme: "End", abstr: "Norway is a Scandivian country"}
]}
});



{{ result.theme }}


{{ result.abstr }}.




Example of quasar admin.

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.prototype.$http = axios
app = new Vue({
el: '#app',
components: { App },
template: ''
})

53 Watchers 478 Stars 168 Forks .

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

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

12. Vue Slack Clone

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