Vue components using typescript 2.0 with compatibility layer between version 1 and 2 of vue and vue-router
Live Examples (found in docs/vue1 and docs/vue2)
Unlike other integrations, this does not rely on annotations/decorators (runtime introspection overhead) but instead encourages keeping it simple and light like writing components in es6/es2015 (WYSIWYG).
For simple components, one can simply take advantage of this typescript 2.0 feature where you can specify the type of this for functions.
interface MyModel {
msg: string
}
export default {
name: 'Foo', // specify the component name
data(): MyModel {
return {
msg: 'hello'
}
},
// we get all the type-safety of using a class with this paradigm
methods: {
append(this: MyModel, suffix: string) {
this.msg += suffix
}
},
template: `<div @click="append('!')">{{ msg }}</div>`
}Here's a sample component with inheritance (live demo):
import { component } from 'vuets'
abstract class HasMsg {
msg: string = 'Hello, world!'
append(suffix: string) {
this.msg += suffix
}
}
export class Hello extends HasMsg {
activate = 0
deactivate = 0
constructor() {
super()
}
static activate(self: Hello) {
self.activate++
}
static deactivate(self: Hello): boolean {
self.deactivate++
return true
}
append(suffix: string) {
super.append('?' + suffix)
}
}
export default component({
template: `
<div>
<h3 @click="append('!')">{{ msg }}</h3>
<div>
activate count: {{ activate }}
</div>
<div>
deactivate count: {{ deactivate }}
</div>
</div>
`
}, Hello, Hello.activate, Hello.deactivate) // v1/v2 router hooks compatibility modedeclare function require(path: string): any;
import * as Vue from 'vue'
import * as Router from 'vue-router'
import Home from './home/'
import Hello from './Hello'
Vue.use(Router)
var router = new Router({ linkActiveClass: 'active' })
router.map({
'/home': { component: Home },
'/hello': { component: Hello }
})
router.redirect({
'*': '/home'
})
router.beforeEach(function () {
window.scrollTo(0, 0)
})
router.start(require('./App.vue'), '#app')declare function require(path: string): any;
import * as Vue from 'vue'
import * as Router from 'vue-router'
import Home from './home/'
import Hello from './Hello'
Vue.use(Router)
const config = {
linkActiveClass: 'active',
scrollBehavior: () => ({ x: 0, y: 0 }),
routes: [
{ path: '/home', component: Home },
{ path: '/hello', component: Hello },
{ path: '*', redirect: '/home' }
]
}
let app = require('./App.vue')
app.router = new Router(config)
new Vue(app).$mount('#app')