VueTyped contains sets of ECMAScript / Typescript decorators that helps you write Vue component easily.
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
$ npm install vue-typed$ bower install vue-typedIf 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 startVue 2.0 or above
For older Vue supports please refer to VueTyped 2.0.1.
Typescript 2.2.2 or above
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent