Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
vue-property-decorator
Advanced tools
The vue-property-decorator package provides TypeScript decorators for Vue components, making it easier to write Vue components with TypeScript. It simplifies the syntax and enhances code readability by allowing the use of decorators for properties, methods, and lifecycle hooks.
Component Decorator
The @Component decorator is used to define a Vue component. It allows you to use class-style syntax to define your component, making the code more organized and readable.
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
// Component logic here
}
Prop Decorator
The @Prop decorator is used to define props in a Vue component. It simplifies the syntax for declaring props and their types, making the code more concise.
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
@Prop(String) readonly myProp!: string;
}
Watch Decorator
The @Watch decorator is used to watch for changes in a component's data properties. It simplifies the syntax for setting up watchers, making the code more readable.
import { Vue, Component, Watch } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
myData = '';
@Watch('myData')
onMyDataChanged(newVal: string, oldVal: string) {
console.log(`myData changed from ${oldVal} to ${newVal}`);
}
}
Emit Decorator
The @Emit decorator is used to emit custom events from a component. It simplifies the syntax for emitting events, making the code more concise and readable.
import { Vue, Component, Emit } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
@Emit('myEvent')
myMethod() {
return 'data';
}
}
Model Decorator
The @Model decorator is used to create a two-way binding for a prop. It simplifies the syntax for defining v-model bindings, making the code more concise.
import { Vue, Component, Model } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
@Model('change', { type: String }) readonly value!: string;
}
The vue-class-component package allows you to define Vue components using class-style syntax in TypeScript. It provides a base class for Vue components and supports decorators for properties and methods. Compared to vue-property-decorator, it is more lightweight but requires additional packages for full decorator support.
The vuex-class package provides TypeScript decorators and helpers for Vuex. It allows you to use class-style syntax to define Vuex modules, actions, getters, and mutations. While it focuses on Vuex integration, it complements vue-property-decorator by providing similar decorator-based syntax for Vuex.
This library fully depends on vue-class-component.
MIT License
npm i -S vue-property-decorator
'use strict';
import { Component, prop, watch } from 'vue-property-decorator';
@Component({})
export class Component {
@prop(Number)
propA: number;
@prop({
type: String,
default: 'default value'
})
propB: string;
@watch('child')
onChildChanged(val: string, oldVal: string) {}
}
becomes
'use strict'
export const Component = Vue.extend({
props: {
propA: Number,
propB: {
type: String,
required: true,
default: ''
}
},
methods: {
onChildChanged(val, oldVal) {}
},
watch: {
'child': 'onChildChanged'
}
})
FAQs
property decorators for Vue Component
The npm package vue-property-decorator receives a total of 301,980 weekly downloads. As such, vue-property-decorator popularity was classified as popular.
We found that vue-property-decorator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.