0
# Vue Property Decorator
1

2
Vue Property Decorator is a collection of TypeScript decorators that enhance Vue.js class-based components with property binding, state management, and lifecycle capabilities. Built as an extension to vue-class-component, it enables developers to write Vue components using modern decorator syntax while maintaining full compatibility with Vue 2.x ecosystem.
3

4
## Package Information
5

6
- **Package Name**: vue-property-decorator
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install vue-property-decorator`
10
- **Peer Dependencies**: `vue`, `vue-class-component`
11

12
## Core Imports
13

14
```typescript
15
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
16
```
17

18
For automatic type inference with decorators, import reflect-metadata first:
19

20
```typescript
21
import "reflect-metadata";
22
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
23
```
24

25
For CommonJS:
26

27
```javascript
28
const { Component, Vue, Prop, Watch, Emit } = require("vue-property-decorator");
29
```
30

31
## Basic Usage
32

33
```typescript
34
import { Vue, Component, Prop, Watch, Emit } from "vue-property-decorator";
35

36
@Component
37
export default class MyComponent extends Vue {
38
  @Prop({ default: "Hello" })
39
  message!: string;
40

41
  @Prop({ type: Number, required: true })
42
  count!: number;
43

44
  localData = 0;
45

46
  @Watch("count")
47
  onCountChanged(newVal: number, oldVal: number) {
48
    console.log(`count changed from ${oldVal} to ${newVal}`);
49
  }
50

51
  @Emit()
52
  increment() {
53
    this.localData++;
54
    return this.localData;
55
  }
56

57
  @Emit("custom-event")
58
  handleCustomEvent() {
59
    return { data: this.localData };
60
  }
61
}
62
```
63

64
For automatic type inference without explicit type declarations, enable `emitDecoratorMetadata` in TypeScript config and import reflect-metadata:
65

66
```typescript
67
import "reflect-metadata";
68
import { Vue, Component, Prop } from "vue-property-decorator";
69

70
@Component
71
export default class AutoTypedComponent extends Vue {
72
  // Type is automatically inferred from TypeScript
73
  @Prop()
74
  age!: number;
75
  
76
  @Prop()
77
  name!: string;
78
}
79
```
80

81
## Architecture
82

83
Vue Property Decorator is built around several key components:
84

85
- **Base Exports**: Re-exports Vue, Component decorator, and Mixins from vue-class-component
86
- **Property Decorators**: Handle component props, model binding, and template references
87
- **Dependency Injection**: Provide/Inject decorators for parent-child communication
88
- **Lifecycle Decorators**: Watch decorator for reactive data observation
89
- **Event Decorators**: Emit decorator for event emission patterns
90
- **Metadata Integration**: Uses reflect-metadata for automatic TypeScript type inference
91

92
## Capabilities
93

94
### Component Properties
95

96
Property-related decorators for component props, model binding, and template references.
97

98
```typescript { .api }
99
function Prop(options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;
100
function PropSync(propName: string, options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;
101
function Model(event?: string, options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;
102
function ModelSync(propName: string, event?: string, options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;
103
function VModel(options: PropOptions = {}): PropertyDecorator;
104
function Ref(refKey?: string): PropertyDecorator;
105
```
106

107
[Component Properties](./component-properties.md)
108

109
### Dependency Injection
110

111
Provide and Inject decorators for parent-child component communication and dependency injection patterns.
112

113
```typescript { .api }
114
function Provide(key?: string | symbol): PropertyDecorator;
115
function ProvideReactive(key?: string | symbol): PropertyDecorator;
116
function Inject(options?: InjectOptions | InjectKey): PropertyDecorator;
117
function InjectReactive(options?: InjectOptions | InjectKey): PropertyDecorator;
118
```
119

120
[Dependency Injection](./dependency-injection.md)
121

122
### Lifecycle and Events
123

124
Decorators for handling component lifecycle events and custom event emission.
125

126
```typescript { .api }
127
function Watch(path: string, options: WatchOptions = {}): MethodDecorator;
128
function Emit(event?: string): MethodDecorator;
129
```
130

131
[Lifecycle and Events](./lifecycle-events.md)
132

133
### Base Components
134

135
Re-exported components and utilities from vue-class-component and Vue core.
136

137
```typescript { .api }
138
const Component: ComponentDecorator;
139
const Vue: VueConstructor;
140
function Mixins(...mixins: VueClass<Vue>[]): VueClass<Vue>;
141
```
142

143
[Base Components](./base-components.md)
144

145
## Types
146

147
```typescript { .api }
148
interface PropOptions {
149
  type?: PropType<any> | true;
150
  required?: boolean;
151
  default?: any;
152
  validator?(value: any): boolean;
153
}
154

155
interface WatchOptions {
156
  deep?: boolean;
157
  immediate?: boolean;
158
}
159

160
interface InjectOptions {
161
  from?: InjectKey;
162
  default?: any;
163
}
164

165
type InjectKey = string | symbol;
166
type Constructor = new (...args: any[]) => any;
167
type PropertyDecorator = (target: any, propertyKey: string | symbol) => void;
168
type MethodDecorator = (target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) => void;
169
type ComponentDecorator = <V extends VueClass<Vue>>(target: V) => V;
170
```