Vue Property Decorator

Common errors

• TypeError: Cannot read properties of undefined (reading 'prototype')

  cause This often occurs due to a mismatch in `vue-class-component` versions, an incorrect import of `@Component`, or decorators not being properly enabled.
  fix Verify that `vue-class-component` is compatible with your `vue-property-decorator` version (e.g., `vue-class-component@^7.0.0` for `vue-property-decorator@8.x.x+`). Ensure `import Component from 'vue-class-component'` is used correctly and that TypeScript decorators are enabled in `tsconfig.json`.

• Error: Decorators are not enabled.

  cause Your TypeScript configuration is missing the required flags to enable decorator syntax.
  fix Add or update your `tsconfig.json` under `compilerOptions` with: `"experimentalDecorators": true, "emitDecoratorMetadata": true`.

• Cannot find module 'vue-property-decorator' or its corresponding type declarations.

  cause The package is either not installed, or your import path is incorrect, or TypeScript cannot resolve its types.
  fix Run `npm install vue-property-decorator vue-class-component vue` or `yarn add vue-property-decorator vue-class-component vue` to ensure all peer dependencies are installed, and check your import statements for typos.

Warnings

• breaking Major version 8.0.0 introduced a breaking change requiring `vue-class-component` version 7.x.x. Upgrading `vue-property-decorator` to v8+ without simultaneously upgrading `vue-class-component` will lead to runtime errors.
  Fix: Ensure `vue-class-component@^7.0.0` is installed alongside `vue-property-decorator@8.x.x` or newer versions.
• gotcha `vue-property-decorator` is designed exclusively for Vue 2 applications. It is not compatible with Vue 3's Composition API, `script setup`, or its updated reactivity system.
  Fix: For Vue 3, consider using the Composition API directly, or explore alternative libraries specifically built for Vue 3 if a class-based component structure is essential.
• gotcha TypeScript decorators, which `vue-property-decorator` relies on, require specific compiler options (`experimentalDecorators` and `emitDecoratorMetadata`) to be enabled in your `tsconfig.json`.
  Fix: Add or ensure `"experimentalDecorators": true` and `"emitDecoratorMetadata": true` are set under `compilerOptions` in your `tsconfig.json`.
• deprecated Vue 2, the core framework that `vue-property-decorator` targets, reached End of Life (EOL) on December 31, 2023. While `vue-property-decorator` itself is actively maintained, the underlying Vue 2 platform is no longer receiving official support or updates from the Vue team.
  Fix: For new projects or ongoing long-term maintenance, plan migration to Vue 3 to ensure security, access to modern features, and continued official support.

Install

• npm install vue-property-decorator npm
• yarn add vue-property-decorator yarn
• pnpm add vue-property-decorator pnpm

Imports

• Component
  wrong:

  import { Component } from 'vue-class-component'

  correct:

  import Component from 'vue-class-component'

  @Component is a default export from 'vue-class-component', which is a peer dependency of vue-property-decorator. It's essential for declaring class-based components.
• Prop
  wrong:

  import Prop from 'vue-property-decorator'

  correct:

  import { Prop } from 'vue-property-decorator'

  Named export for defining component props with type checking and options.
• Emit
  wrong:

  const { Emit } = require('vue-property-decorator')

  correct:

  import { Emit } from 'vue-property-decorator'

  Use the @Emit decorator on methods to declare custom events that the component can emit.
• Watch

  import { Watch } from 'vue-property-decorator'

  Named export for reacting to changes in data properties, similar to the `watch` option in Vue.
• Vue
  wrong:

  import { Vue } from 'vue'

  correct:

  import Vue from 'vue'

  The base Vue constructor is a default export from the 'vue' package.
• Inject, Provide

  import { Inject, Provide } from 'vue-property-decorator'

  Named exports for dependency injection features (provider/consumer pattern).

Quickstart

This Vue Single File Component (SFC) demonstrates basic usage of `@Component`, `@Prop`, `@Emit`, and `@Watch` decorators to create an interactive button with typed properties and event handling.

<!-- MyButton.vue -->
<template>
  <button :disabled="disabled" @click="onClick">
    {{ formattedLabel }} ({{ internalClickCount }})
  </button>
</template>

<script lang="ts">
import { Component, Prop, Emit, Watch, Vue } from 'vue-property-decorator';

@Component
export default class MyButton extends Vue {
  @Prop({ type: String, default: 'Click Me' })
  readonly label!: string;

  @Prop({ type: Boolean, default: false })
  readonly disabled!: boolean;

  private internalClickCount: number = 0;

  get formattedLabel(): string {
    return this.label.toUpperCase();
  }

  @Emit('button-clicked')
  onClick(event: MouseEvent): number {
    this.internalClickCount++;
    console.log(`Button clicked! New count: ${this.internalClickCount}`);
    return this.internalClickCount;
  }

  @Watch('internalClickCount')
  onInternalClickCountChange(newValue: number, oldValue: number) {
    console.log(`Click count changed from ${oldValue} to ${newValue}`);
  }

  mounted() {
    console.log('MyButton mounted!');
  }
}
</script>

<style scoped>
button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>