You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components and it integrates well with TypeScript.
89
+
90
+
To have consistent support for decorators in your Vue components, it's also recomended to install [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator).
91
+
92
+
93
+
To get started with both libraries, in your existing Vue project, run:
94
+
```
95
+
npm install --save vue-class-component
96
+
npm install --save vue-property-decorator
97
+
```
98
+
99
+
You only need to import `vue-property-decorator` into your `.vue` file as it extends off `vue-class-component`.
100
+
101
+
You can now write components like this:
102
+
103
+
```vue
104
+
<template>
105
+
<div>
106
+
{{ count }}
107
+
<button v-on:click="increment">+</button>
108
+
<button v-on:click="decrement">-</button>
109
+
{{ computedValue }}
110
+
</div>
111
+
</template>
112
+
113
+
<script>
114
+
import { Vue, Component } from "vue-property-decorator";
115
+
116
+
117
+
@Component
118
+
export default class Hello extends Vue {
119
+
120
+
count: number = 0
121
+
vue: string = "vue"
122
+
ts: string = "ts"
123
+
124
+
// Lifecycle methods can be accessed like this
125
+
mounted() {
126
+
console.log('component mounted')
127
+
}
128
+
129
+
// Method are component methods
130
+
increment(): void {
131
+
this.count++
132
+
}
133
+
134
+
decrement(): void {
135
+
this.count--
136
+
}
137
+
138
+
// Computed values are getters
139
+
get computedValue(): string {
140
+
return `${vue} and ${ts} rocks!`
141
+
}
142
+
}
143
+
</script>
144
+
```
145
+
See the [full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data).
146
+
147
+
148
+
87
149
# Other Vue + TypeScript resources
88
150
- Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
151
+
- Focuses quite a lot on class components and third party libs like vue-property-decorator https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/
0 commit comments