VueTyped - VueRouter Example #1

<!DOCTYPE html>
<html>

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

<body>
  <h2>VueTyped - VueRouter Example #1</h2>
  <div id="app">
    <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>
  </div>
</body>

</html>

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

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

Vue.use(VueRouter)

@Component({ template: '<div>foo</div>'  }) 
class Foo {
  
}

@Component({ template: '<div>bar</div>'  }) 
class Bar {
  
}

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

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

new Vue({
  router
}).$mount('#app')