Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vue-typed/vue-typed
Sets of ECMAScript / Typescript decorators that helps you write Vue component easily.
https://github.com/vue-typed/vue-typed
typescript vue
Last synced: 4 months ago
JSON representation
Sets of ECMAScript / Typescript decorators that helps you write Vue component easily.
- Host: GitHub
- URL: https://github.com/vue-typed/vue-typed
- Owner: vue-typed
- License: mit
- Created: 2016-05-29T02:27:11.000Z (over 8 years ago)
- Default Branch: dev
- Last Pushed: 2018-06-26T01:57:43.000Z (over 6 years ago)
- Last Synced: 2024-04-12T09:34:55.613Z (10 months ago)
- Topics: typescript, vue
- Language: TypeScript
- Homepage: http://vue-typed.github.io/vue-typed
- Size: 1.07 MB
- Stars: 103
- Watchers: 8
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - Vue-Typed - class-component in typescript favor by @budiadiono (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
README
# VueTyped
[](http://vue-typed.github.io/vue-typed/)
> **VueTyped** contains sets of [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) / [Typescript](typescriptlang.org) [decorators](https://github.com/wycats/javascript-decorators/blob/master/README.md) that helps you write **[Vue](vuejs.org)** component easily.
[](https://badge.fury.io/js/vue-typed)
[](https://ci.appveyor.com/project/vue-typed/vue-typed/branch/master)
[](https://travis-ci.org/vue-typed/vue-typed)
[](https://github.com/vue-typed/vue-typed/issues)
[](https://raw.githubusercontent.com/vue-typed/vue-typed/master/LICENSE)
## What is this for?
Normaly you wrote **[Vue](vuejs.org)** application like this:
```javascript
new Vue({
template:
`
Clear
{{status}}
`,
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](https://jsfiddle.net/budiadiono/57vdh9vf/)
It could be mess if you bring the code above in **[Typescript](typescriptlang.org)** 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](https://github.com/vuejs/vue-class-component)**.
With **VueTyped** you'll write code above in **Typescript** like this:
```typescript
import * as Vue from 'vue'
import { Component } from 'vue-typed'
@Component({
template: `
Clear
{{status}}
`,
})
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](https://plnkr.co/edit/Ld0Rpu)
## Installation
## NPM
```bash
$ npm install vue-typed
```
## Bower
```bash
$ bower install vue-typed
```
## CLI
If you are start with a new project, then it's good to use [vue-typed-boilerplate](https://github.com/budiadiono/vue-typed-boilerplate) to scaffold your new project.
This boilerplate setup [typescript](typescriptlang.org) project using [webpack](http://webpack.github.io/) as the module bundler.
```bash
$ 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](https://github.com/vue-typed/vue-typed/tree/v2.0.1).
**Typescript 2.2.2** or above
## License
[MIT](https://github.com/vue-typed/vue-typed/blob/master/LICENSE)