VueTyped - Inheritance - Example #2

<!DOCTYPE html>
<html>

  <head>
    <script>
      console.clear();
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.40/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('app').catch(console.log.bind(console));
  </script>
  </head>

  <body>
    <h2>VueTyped - Inheritance - Example #2</h2>
    <div id="app"></div>
  </body>

</html>

System.config({
  defaultJSExtensions: true,
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    'vue': 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js',
    'vue-router': 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.1/vue-router.js',
    'vue-typed': 'https://cdn.rawgit.com/vue-typed/vue-typed/dev/index.js',
    'typescript': 'https://raw.githubusercontent.com/Microsoft/TypeScript/master/lib/typescript.js',
  },
  packages: {
    app: {
      main: 'index.ts',
      defaultExtension: 'ts',
    }
  }
});

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Component, Prop } from 'vue-typed'

Vue.use(VueRouter);

@Component()
class Parent extends Vue {
  title = ''
  
  beforeCreate() {
    this.$options.template = '<div><h4>{{title}}</h4>' +  this.$options.template + '</div>'
  }
}

@Component({ template: '<div>This is foo!</div>'  }) 
class Foo extends Parent {
  mounted(){
    this.title = 'Foo'
  }
}

@Component({ template: '<div>This is bar!</div>'  }) 
class Bar extends Parent {
  mounted(){
    this.title = 'Bar'
  }
}

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes // short for routes: routes
})

@Component({
  template: `<div>
    <h1>Hello App!</h1>
    <p>
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <router-view></router-view>
  </div>`,
  router  // short for route: route
})
class App { }

new App().$mount('#app')