Project started Jan 4, 2019 and completed on Jan 4, 2019. Approximately 6 hours worked independently.
- Preplanning - Component Tree - Schema
- Main Challenges - 1. Learning Vue - 2. Learning Vuetify - 3. Learning Vuex - 4. Learning Vue-Router
- Technology - Vue - Vuetify - Vuex - Vue-Router - Express - Massive - Axios
Below is the initial component tree created during pre-planning
Coming from a React background, Vue was fairly straightforward to learn. Many ideas are parallel and of those that are not, they are fairly intuitive.
The organization of files in Vue is better suited to the way I personally work best in programming.
Design libraries are incredibly useful to create a consistent standard to adhere to in your projects. That is why I decided to simultaneously learn Vuetify during my first attempt to implement the Vue framework.
Vuetify elements utilized
<v-app style="{}">
<v-content />
<v-container />
<v-layout />
<v-flex />
<v-grid />
<v-toolbar />
<v-toolbar-title />
<v-toolbar-side-icon />
<v-card />
<v-card-title />
<v-card-text />
<v-card-actions />
<v-form />
<v-text-field />
<v-tooltip />
<v-tabs />
<v-tab />
<v-tab-item />
<v-spacer />
<v-btn />
<v-img
/></v-app>
the setup for the Vuex store and action creators
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
houses: []
},
mutations: {
SET_HOUSES(state, houses) {
state.houses = houses;
},
ADD_HOUSE(state, houses) {
state.houses = houses;
},
DELETE_HOUSE(state, houses) {
state.houses = houses;
}
},
actions: {
setHouses() {
axios.get('/api/houses').then((res) => {
this.commit('SET_HOUSES', res.data);
});
},
deleteHouse(context, id) {
axios.delete(`/api/houses/${id}`).then((res) => {
this.commit('DELETE_HOUSE', res.data);
});
},
addHouse(context, house) {
axios.post('/api/houses', house).then((res) => {
this.commit('ADD_HOUSE', res.data);
});
}
}
});
integrating the store into the project
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#app');
implementing the store
//values
computed: {
houseList() {
return this.$store.state.houses;
}},
//actions
mounted() {
this.$store.dispatch("setHouses");
}
The set up for the router file
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
mode: 'history',
base: __dirname,
routes: [
{
path: '/wizard',
name: 'wizard',
component: () => import('./components/Wizard.vue')
},
{
path: '/house/:id',
name: 'house',
component: () => import('./components/House.vue')
},
{
path: '/',
name: 'dashboard',
component: () => import('./components/Dashboard.vue')
}
]
});
integrating the routing into the project
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#app');
implementing routing
<template>
<v-app style="background: #afd4c0">
<header></header>
<v-content align-center>
<router-view :key="$route.fullPath"></router-view>
</v-content>
</v-app>
</template>