CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue-property-decorator

TypeScript decorators for Vue.js class-based components with property binding, state management, and lifecycle capabilities

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

Vue Property Decorator

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.

Package Information

  • Package Name: vue-property-decorator
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vue-property-decorator
  • Peer Dependencies: vue, vue-class-component

Core Imports

import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";

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

import "reflect-metadata";
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";

For CommonJS:

const { Component, Vue, Prop, Watch, Emit } = require("vue-property-decorator");

Basic Usage

import { Vue, Component, Prop, Watch, Emit } from "vue-property-decorator";

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

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

  localData = 0;

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

  @Emit()
  increment() {
    this.localData++;
    return this.localData;
  }

  @Emit("custom-event")
  handleCustomEvent() {
    return { data: this.localData };
  }
}

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

import "reflect-metadata";
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class AutoTypedComponent extends Vue {
  // Type is automatically inferred from TypeScript
  @Prop()
  age!: number;
  
  @Prop()
  name!: string;
}

Architecture

Vue Property Decorator is built around several key components:

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

Capabilities

Component Properties

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

function Prop(options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;
function PropSync(propName: string, options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;
function Model(event?: string, options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;
function ModelSync(propName: string, event?: string, options: PropOptions | Constructor[] | Constructor = {}): PropertyDecorator;
function VModel(options: PropOptions = {}): PropertyDecorator;
function Ref(refKey?: string): PropertyDecorator;

Component Properties

Dependency Injection

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

function Provide(key?: string | symbol): PropertyDecorator;
function ProvideReactive(key?: string | symbol): PropertyDecorator;
function Inject(options?: InjectOptions | InjectKey): PropertyDecorator;
function InjectReactive(options?: InjectOptions | InjectKey): PropertyDecorator;

Dependency Injection

Lifecycle and Events

Decorators for handling component lifecycle events and custom event emission.

function Watch(path: string, options: WatchOptions = {}): MethodDecorator;
function Emit(event?: string): MethodDecorator;

Lifecycle and Events

Base Components

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

const Component: ComponentDecorator;
const Vue: VueConstructor;
function Mixins(...mixins: VueClass<Vue>[]): VueClass<Vue>;

Base Components

Types

interface PropOptions {
  type?: PropType<any> | true;
  required?: boolean;
  default?: any;
  validator?(value: any): boolean;
}

interface WatchOptions {
  deep?: boolean;
  immediate?: boolean;
}

interface InjectOptions {
  from?: InjectKey;
  default?: any;
}

type InjectKey = string | symbol;
type Constructor = new (...args: any[]) => any;
type PropertyDecorator = (target: any, propertyKey: string | symbol) => void;
type MethodDecorator = (target: any, propertyKey: string | symbol, descriptor: PropertyDescriptor) => void;
type ComponentDecorator = <V extends VueClass<Vue>>(target: V) => V;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vue-property-decorator@9.1.x
Publish Source
CLI
Badge
tessl/npm-vue-property-decorator badge