Vue Decorators for Vue 3 (Wrapper)

1.1.3 · abandoned · verified Sun Apr 19

`vue-decorator` (v1.1.3, last updated March 2022) aims to provide custom decorators compatible with Vue 3 by acting as a wrapper for `vue-class-component` and `vue-property-decorator`. However, the core dependencies it wraps are largely unmaintained or officially archived for Vue 3 compatibility. `vue-property-decorator` explicitly states it does not support Vue 3, and `vue-class-component` has been superseded by `vue-facing-decorator` for modern Vue 3 class component usage. Due to the unmaintained status of both `vue-decorator` itself and its underlying dependencies for Vue 3, it is not recommended for new projects. Developers should consider `vue-facing-decorator` or directly use Vue 3's Composition API, which is the idiomatic approach for current Vue development. This package has a very slow release cadence, with its last update over two years ago.

Common errors

```
Decorators are not enabled in your TypeScript configuration. Consider setting the 'experimentalDecorators' compiler option in your 'tsconfig.json'.
```
cause TypeScript compiler is not configured to process decorators.

fix Add `"experimentalDecorators": true, "emitDecoratorMetadata": true` to your `compilerOptions` in `tsconfig.json`.
```
TypeError: Cannot read properties of undefined (reading 'registerHooks')
```
cause Likely due to incompatibility between `vue-decorator`'s underlying dependencies and the Vue 3 runtime, or incorrect setup of `vue-class-component` for Vue 3.

fix Ensure `vue-class-component` is correctly installed and configured for Vue 3, or, more reliably, migrate to `vue-facing-decorator` or the Composition API.
```
Component is not a function
```
cause Incorrect import of `Component` (e.g., attempting a default import) or a problem with the module resolution.

fix Use a named import: `import { Component } from 'vue-decorator';`

Warnings

breaking The underlying libraries, `vue-class-component` and `vue-property-decorator`, which `vue-decorator` wraps, are largely unsupported or archived for Vue 3 compatibility. `vue-property-decorator` officially does not support Vue 3. Using this package may lead to runtime errors or unexpected behavior with modern Vue 3 versions and tooling.
Fix: Migrate to `vue-facing-decorator` or refactor components to use Vue 3's Composition API with `<script setup>` for better support and maintainability.
gotcha Using TypeScript decorators requires specific compiler options (`experimentalDecorators` and `emitDecoratorMetadata`) in `tsconfig.json`. Without these, TypeScript will not process the decorators correctly, leading to compilation or runtime errors.
Fix: Add `"experimentalDecorators": true, "emitDecoratorMetadata": true` to your `compilerOptions` in `tsconfig.json`.
deprecated Class-style components, while supported by community packages like `vue-facing-decorator`, are not the officially recommended approach for Vue 3. The Vue core team recommends using Single-File Components with the Composition API and `<script setup>` for new development due to better type inference, reusability, and long-term support.
Fix: Consider adopting the Composition API for new components and gradually refactoring existing class components. Tools like `vue-class-migrator` can assist in transitions.
breaking `vue-decorator` itself has not been updated since March 2022. This lack of active maintenance means it may not be compatible with newer versions of Vue 3, TypeScript, or related tooling, and it will not receive bug fixes or security patches.
Fix: It is strongly recommended to use actively maintained alternatives like `vue-facing-decorator`.

Install

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

Imports

Component
wrong:
```
import Component from 'vue-decorator';
```
correct:
```
import { Component } from 'vue-decorator';
```
Used to register a class as a Vue component. This is a named export.
Prop
wrong:
```
import { Prop } from 'vue-property-decorator';
```
correct:
```
import { Prop } from 'vue-decorator';
```
To define a prop on a component. `vue-decorator` re-exports this from `vue-property-decorator`.
Watch
```
import { Watch } from 'vue-decorator';
```
Decorator to reactively watch a property for changes.
Emit
```
import { Emit } from 'vue-decorator';
```
Decorator to simplify emitting custom events from a component.

Quickstart

Demonstrates a basic Vue 3 class component using `@Component`, `@Prop`, `@Watch`, and `@Emit` decorators.

import { Component, Prop, Watch, Emit } from 'vue-decorator';
import { Vue } from 'vue-class-component'; // Vue 3 compatibility requires Vue from vue-class-component

@Component({
  template: `
    <div>
      <p>Hello, {{ userName }}!</p>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
      <input type="text" :value="message" @input="updateMessage(($event.target as HTMLInputElement).value)" />
      <p>Message: {{ message }}</p>
    </div>
  `
})
export default class MyComponent extends Vue {
  @Prop({ default: 'Guest' })
  readonly userName!: string;

  count: number = 0;
  message: string = 'Initial message';

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

  @Emit('message-updated')
  updateMessage(value: string) {
    this.message = value;
    return value;
  }

  increment() {
    this.count++;
  }

  mounted() {
    console.log('Component mounted with user:', this.userName);
  }
}

view raw JSON →