VueTyped - Vue 2.0 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.log.bind(console));
    </script>
  </head>

  <body>
    <h2>VueTyped - Vue 2.0 Example #1</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.min.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 { Component } from 'vue-typed'

@Component({ 
	template: `
  <div>
  	<input type="text" v-model="message">
    <button v-on:click="clear">Clear</button>
    <div>{{status}}</div>
  </div>`, 
})
class App {
	
	message:string = 'Hello!'

	get status() {
		return this.message.length < 15 ? 'Too short... type some more...' : 'Alright, stop typing now..'
	}

	clear() {
		this.message = ''
	}
}

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