VueTyped

VueTyped contains sets of ECMAScript / Typescript decorators that helps you write Vue component easily.

What is this for?

Normaly you wrote Vue application like this:

new Vue({
  template: 
  `<div>
    <input type="text" v-model="message">
    <button v-on:click="clear">Clear</button>
    <div>{{status}}</div>
  </div>`,
  data: function() {
    return {
      message: 'Hello!'
    }
  },
  computed: {
    status: function() {
      return this.message.length < 15 ? 'Too short... type some more...' : 'Alright, stop typing now..'
    }
  },
  methods: {
    clear: function() {
      this.message = ''
    }
  }
}).$mount('#app')

See live demo here

It could be mess if you bring the code above in Typescript world. The usage of keyword this could lead unexpected error. VueTyped makes you possible to write Vue with Typescript or ES6 with no hassle. VueTyped insipired by vue-class-component.

With VueTyped you'll write code above in Typescript like this:

import * as Vue from 'vue'
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 extends Vue {
  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')

See live demo here

Installation

NPM

$ npm install vue-typed

Bower

$ bower install vue-typed

CLI

If you are start with a new project, then it's good to use vue-typed-boilerplate to scaffold your new project. This boilerplate setup typescript project using webpack as the module bundler.

$ npm install -g vue-cli
$ vue init vue-typed/vue-typed-boilerplate my-project
$ cd my-project
$ npm install
$ npm start

Compatibility

Vue 2.0 or above

For older Vue supports please refer to VueTyped 2.0.1.

Typescript 2.2.2 or above

License

MIT