Modified banner from static image to carousel, added default router exeptionHandler.

Author: anotherKyleFrom1994

src/App.vue

@@ -16,12 +16,10 @@
 
 <script lang="ts">
   import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
-  // import NavBar from '@/pages/generic/nav_bar/NavBar.vue';
   import CoreCta from '@/pages/generic/cta/Cta.vue';
   import CoreDrawer from '@/pages/generic/drawer/Drawer.vue';
   import CoreFooter from '@/pages/generic/footer/Footer.vue';
   import CoreToolbar from '@/pages/generic/toolbar/Toolbar.vue';
-  // import CoreView from '@/pages/generic/nav_bar/NavBar.vue';
 
   @Component({ components: { CoreCta, CoreDrawer, CoreFooter, CoreToolbar } })
   export default class App extends Vue {}

src/components/base/carousel/Carousel.ts

@@ -0,0 +1,34 @@
+import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
+
+export interface Item {
+  src: string;
+  title ? : string;
+  displayWording ? : string;
+  button ? : button;
+}
+
+export interface button {
+  displayWording: string;
+  color: 'primary' | 'secondary';
+}
+
+@Component({ inheritAttrs: false })
+export default class BaseCarousel extends Vue {
+  @Prop({ required: true }) items!: Item[];
+
+  private createDisplayImage(item: Item): NodeRequire | string | undefined {
+    if (item === null || item === undefined) return;
+
+    switch (item.src.charAt(0)) {
+      case '@': {
+        return require('@/' + item.src.substr(2, item.src.length));
+      }
+      case '.': {
+        return require('./' + item.src.substr(2, item.src.length));
+      }
+      default: {
+        return item.src;
+      }
+    };
+  }
+};

src/components/base/carousel/Carousel.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-carousel cycle
+              hide-delimiter-background>
+    <v-carousel-item v-for="(item,i) in items"
+                     :key="i"
+                     height="400"
+                     width="100%"
+                     :src="createDisplayImage(item)"
+                     reverse-transition="fade-transition"
+                     transition="fade-transition">
+      <v-row align="center"
+             class="pa-3 fill-height">
+        <v-col cols="4"
+               sm="12"
+               md="7"
+               offset-md="5">
+          <h1 v-if="item.title"
+              class="display-3 font-weight-light">
+            {{ item.title }}
+          </h1>
+          <div v-if="item.displayWording"
+               class="subheading text-uppercase pl-2 mb-4">
+            {{ item.displayWording }}
+          </div>
+          <v-btn v-if="item.button"
+                 :color="item.button.color"
+                 depressed
+                 rounded>
+            {{ item.button.displayWording }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-carousel-item>
+  </v-carousel>
+</template>
+<script lang="ts"
+        src="./Carousel.ts" />

src/pages/PageNotFound.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>404 Page</div>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component({
+    components: {}
+  })
+  export default class extends Vue {};
+</script>

src/pages/home/banner/Banner.ts

@@ -1,4 +1,25 @@
 import { Component, Vue } from 'vue-property-decorator';
+import { Item } from '@/components/base/carousel/Carousel';
 
 @Component
-export default class Banner extends Vue {};
+export default class Banner extends Vue {
+  private items: Item[] = [{
+      title: 'The Art Of Travel',
+      displayWording: 'Finding Beauty, One flight at a time',
+      src: '@/assets/articles/blurcamera.jpg',
+      button: {
+        displayWording: 'Subscribe',
+        color: 'primary'
+      }
+    },
+    {
+      src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
+    },
+    {
+      src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
+    },
+    {
+      src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
+    }
+  ]
+};

src/pages/home/banner/Banner.vue

@@ -1,29 +1,8 @@
+import Carousel from '@/components/base/carousel/Carousel.vue';
 <template>
   <base-card dark>
-    <v-img class="grey lighten-2"
-           height="400"
-           width="100%"
-           :src="require('@/assets/articles/blurcamera.jpg')">
-      <v-row align="center"
-             class="pa-3 fill-height">
-        <v-col cols="4"
-               sm="12"
-               md="7"
-               offset-md="5">
-          <h1 class="display-3 font-weight-light">
-            The Art Of Travel
-          </h1>
-          <div class="subheading text-uppercase pl-2 mb-4">
-            Finding Beauty, One flight at a time
-          </div>
-          <v-btn color="primary"
-                 depressed
-                 rounded>
-            Subscribe
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-img>
+    <base-carousel :items="items">
+    </base-carousel>
   </base-card>
 </template>
 

src/plugins/base_components/baseComponents.ts

@@ -3,8 +3,10 @@ import LargeBtn from '@/components/base/button/LargeBtn.vue';
 import SmallBtn from '@/components/base/button/SmallBtn.vue';
 import BaseCard from '@/components/base/card/Card.vue';
 import BaseSubheading from '@/components/base/subheading/Subheading.vue';
+import BaseCarousel from '@/components/base/carousel/Carousel.vue';
 
 Vue.component(LargeBtn.name, LargeBtn);
 Vue.component(SmallBtn.name, SmallBtn);
 Vue.component(BaseCard.name, BaseCard);
 Vue.component(BaseSubheading.name, BaseSubheading);
+Vue.component(BaseCarousel.name, BaseCarousel);

src/plugins/router/index.ts

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import VueRouter, { RouteConfig } from 'vue-router';
 import { IRouterCustOpt, routerOptions } from './routerrc';
 import Home from '@/pages/Home.vue';
-
+import PageNotFound from '@/pages/PageNotFound.vue';
 Vue.use(VueRouter);
 
 const routes: RouteConfig[] = [{
@@ -20,7 +20,13 @@ for (let index in routeConfs) {
   if (routeConfs[index] !== null) {
     routes.push(routeConfs[index]);
   }
+
 }
+routes.push({
+  path: '*',
+  name: 'pageNotFound',
+  component: PageNotFound
+});
 
 // Getting all configurations from 'router.json'.
 function createRouteConfigs (routerrcs: IRouterCustOpt[]): RouteConfig[] {

src/plugins/router/routerrc.ts

@@ -4,7 +4,7 @@ export interface IRouterCustOpt {
   name: string;
   webpackChunkName: string;
   sourcePath: string;
-  children?: IRouterCustOpt;
+  children ? : IRouterCustOpt;
 }
 
 export const routerOptions: IRouterCustOpt[] = [{
@@ -18,11 +18,5 @@ export const routerOptions: IRouterCustOpt[] = [{
     'name': 'login',
     'webpackChunkName': 'generic',
     'sourcePath': 'pages/login/Login.vue'
-  },
-  {
-    'path': '*',
-    'name': 'exceptionCather',
-    'webpackChunkName': 'exception',
-    'sourcePath': 'pages/Home.vue'
   }
 ];