Name router views

src/App.vue

@@ -5,8 +5,8 @@
       <b-navbar-brand href="#">Sample App</b-navbar-brand>
       <b-collapse is-nav id="nav_collapse">
         <b-navbar-nav>
-          <b-nav-item href="/sample-component">First Module</b-nav-item>
-          <b-nav-item href="/user-login">Second Module</b-nav-item>
+          <b-nav-item href="/sample-component">Sample Component</b-nav-item>
+          <b-nav-item href="/user-login">Login Component</b-nav-item>
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>

src/app/baluster/api.ts

@@ -0,0 +1,7 @@
+import { HTTP, CLIENT } from '../../http';
+
+export const api = {
+  fetchPickets(params: any) {
+    return HTTP.get('https://api.adviceslip.com/advice', {responseType: 'json'});
+  },
+};

src/app/baluster/components/BalusterMasterCard.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <router-view></router-view>
+    <router-view name="paramount"></router-view>
+    <router-view name="pronouncement"></router-view>
+  </div>
+</template>
+
+<script lang="ts">
+  import Component from 'vue-class-component';
+  import Vue from 'vue';
+
+  @Component
+  export default class BalusterMasterCard extends Vue {
+    public created() {
+      console.log('creating....');
+    }
+  }
+</script>

src/app/baluster/components/DefaultCard.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h4> <b>Default:</b> Default Card</h4>
+  </div>
+</template>
+
+<script lang="ts">
+  import Component from 'vue-class-component';
+  import Vue from 'vue';
+
+  @Component
+  export default class DefaultCard extends Vue {
+    public created() {
+      console.log('default created.');
+    }
+  }
+</script>

src/app/baluster/components/ParamountCard.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h4> <b>Paramount: </b> a long, sturdy piece of timber or metal set upright in the ground and used as a support or marker.</h4>
+  </div>
+</template>
+
+<script lang="ts">
+  import Component from 'vue-class-component';
+  import Vue from 'vue';
+
+  @Component
+  export default class ParamountCard extends Vue {
+    public created() {
+      console.log('paramount created.');
+    }
+  }
+</script>

src/app/baluster/components/PronouncementCard.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h3><b>Pronouncement: </b> formal or authoritative announcement or declaration.</h3>
+  </div>
+</template>
+
+<script lang="ts">
+  import Component from 'vue-class-component';
+  import Vue from 'vue';
+
+  @Component
+  export default class PronouncementCard extends Vue {
+    public created() {
+      console.log('pronounced created.');
+    }
+  }
+</script>

src/app/baluster/components/index.ts

@@ -0,0 +1,4 @@
+export { default as BalusterMasterCard } from './BalusterMasterCard.vue';
+export { default as ParamountCard } from './ParamountCard.vue';
+export { default as PronouncementCard } from './PronouncementCard.vue';
+export { default as DefaultCard } from './DefaultCard.vue';

src/app/baluster/index.ts

@@ -0,0 +1,2 @@
+export { default as routes } from './routes';
+export { jamb as vuex } from './vuex';

src/app/baluster/routes.ts

@@ -0,0 +1,19 @@
+import { DefaultCard, BalusterMasterCard, ParamountCard, PronouncementCard } from './components';
+
+export default [
+  {
+    path: '/baluster',
+    component: BalusterMasterCard,
+    children: [
+      {
+        path: '/',
+        components: {
+          default: DefaultCard,
+          paramount: ParamountCard,
+          pronouncement: PronouncementCard,
+        },
+        name: 'baluster',
+      },
+    ],
+  },
+];

src/app/baluster/vuex/actions.ts

@@ -0,0 +1,11 @@
+import { ActionTree } from 'vuex';
+import { JambState } from './types';
+import { RootState } from '@/app/types';
+import { api } from '../api';
+export const actions: ActionTree<JambState, RootState> = {
+  pickets({commit}): any {
+    api.fetchPickets({}).then((response: any) => {
+      console.log(response);
+    });
+  },
+};

src/app/baluster/vuex/getters.ts

@@ -0,0 +1,10 @@
+import { GetterTree } from 'vuex';
+import { JambState } from './types';
+import { RootState } from '../../types';
+
+export const getters: GetterTree<JambState, RootState> = {
+  columns(state): string {
+    const {message} = state;
+    return message;
+  },
+};

src/app/baluster/vuex/index.ts

@@ -0,0 +1,22 @@
+import { Module } from 'vuex';
+import { getters } from './getters';
+import { actions } from './actions';
+import { mutations  } from './mutations';
+
+import { RootState } from '../../types';
+import { JambState } from './types';
+
+export const state: JambState = {
+  message: '',
+  error: false,
+};
+
+const namespaced: boolean = true;
+
+export const jamb: Module<JambState, RootState> = {
+  namespaced,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/app/baluster/vuex/mutations.ts

@@ -0,0 +1,14 @@
+import { MutationTree } from 'vuex';
+import { JambState } from './types';
+
+export const mutations: MutationTree<JambState> = {
+  sampleDataLoaded(state, payload: string) {
+    state.message = payload;
+    state.error = false;
+  },
+
+  sampleError(state) {
+    state.error = true;
+    state.message = '';
+  },
+};

src/app/baluster/vuex/types.ts

@@ -0,0 +1,4 @@
+export interface JambState {
+  message: string;
+  error: boolean;
+}

src/app/mixins/vuex/mutations.ts

@@ -3,7 +3,6 @@ import { MixinState, QuoteState, FeedState, CountryState } from './types';
 
 export const mutations: MutationTree<MixinState> = {
   sampleLocationLoaded(state, payload: any) {
-    console.log(payload);
     for (const c of payload) {
       const country: CountryState = {
         name: c.name,

src/app/routes.ts

@@ -1,7 +1,9 @@
 import { routes as login } from './login';
 import { routes as sample } from './sample';
+import { routes as jamb } from './baluster';
 
 export default [
   ...login,
   ...sample,
+  ...jamb,
 ];

src/app/sample/components/SampleComponent.vue

@@ -6,7 +6,7 @@
       <p class="card-text">
         {{message}}
       </p>
-      <b-button href="/user-login" variant="primary">Second Module</b-button>
+      <b-button href="/user-login" variant="primary">Login Component</b-button>
     </b-card>
     <b-card tag="article" style="max-width: 100%" class="mb-2">
       <b-carousel id="carousel1"
@@ -47,7 +47,15 @@
   import { Mixins } from 'vue-mixin-decorator';
   const namespace: string = 'sample';
 
-  @Component
+  /**
+   * router callback wont be called if you define them inside component class.
+   * You need to register them before component resolve.
+   */
+  @Component({
+    beforeRouteEnter: (to, from , next) => {
+      next();
+    },
+  })
   export default class SampleComponent extends Mixins<LocationMixin>(LocationMixin) {
     @Action('sampleData', {namespace}) private sampleData: any;
     @State('sample') private sample!: SampleState;

src/app/sample/routes.ts

@@ -1,9 +1,14 @@
 import { SampleComponent } from './components';
+import { Route } from 'vue-router';
 
 export default [
   {
     path: '/sample-component',
     component: SampleComponent,
+    name: 'sample.component',
+    beforeEnter: (to: Route, from: Route, next: any) => {
+      next();
+    },
   },
   {
     path: '',

src/app/vuex.ts

@@ -1,8 +1,11 @@
 import { vuex as login } from './login';
 import { vuex as sample } from './sample';
 import { vuex as mixins } from './mixins';
+import { vuex as jamb } from './baluster';
+
 export default {
   login,
   sample,
   mixins,
+  jamb,
 };

src/router.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import Router from 'vue-router';
+import Router, { Route } from 'vue-router';
 import { routes } from './app';
 
 Vue.use(Router);
@@ -14,8 +14,16 @@ const router = new Router({
  * Configure pre request checks and router validations.
  * Access control.
  */
-router.beforeEach((to, from, next) => {
+router.beforeEach((to: Route, from: Route, next: any) => {
   next();
 });
 
+router.beforeResolve((to: Route, from: Route, next: any) => {
+  next();
+});
+
+router.afterEach((to: Route, from: Route) => {
+  // Here do something after everything is ready.
+});
+
 export default router;