or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

base-components.mdcomponent-properties.mddependency-injection.mdindex.mdlifecycle-events.md
tile.json

tessl/npm-vue-property-decorator

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vue-property-decorator@9.1.x

To install, run

npx @tessl/cli install tessl/npm-vue-property-decorator@9.1.0

index.mddocs/

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;