{"id":12454,"library":"vue-decorator","title":"Vue Decorators for Vue 3 (Wrapper)","description":"`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.","status":"abandoned","version":"1.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/calebeaires/vue-decorator","tags":["javascript","vue","vue3","typescript","decorator"],"install":[{"cmd":"npm install vue-decorator","lang":"bash","label":"npm"},{"cmd":"yarn add vue-decorator","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-decorator","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core decorator logic for class-style components (wrapped by vue-decorator). Note: This package itself is largely unmaintained for Vue 3 and superseded by `vue-facing-decorator`.","package":"vue-class-component","optional":false},{"reason":"Provides additional decorators like @Prop, @Watch, @Emit (wrapped by vue-decorator). Note: This package explicitly states it does not support Vue 3 and is archived.","package":"vue-property-decorator","optional":false},{"reason":"Peer dependency for Vue 3 applications.","package":"vue","optional":false}],"imports":[{"note":"Used to register a class as a Vue component. This is a named export.","wrong":"import Component from 'vue-decorator';","symbol":"Component","correct":"import { Component } from 'vue-decorator';"},{"note":"To define a prop on a component. `vue-decorator` re-exports this from `vue-property-decorator`.","wrong":"import { Prop } from 'vue-property-decorator';","symbol":"Prop","correct":"import { Prop } from 'vue-decorator';"},{"note":"Decorator to reactively watch a property for changes.","symbol":"Watch","correct":"import { Watch } from 'vue-decorator';"},{"note":"Decorator to simplify emitting custom events from a component.","symbol":"Emit","correct":"import { Emit } from 'vue-decorator';"}],"quickstart":{"code":"import { Component, Prop, Watch, Emit } from 'vue-decorator';\nimport { Vue } from 'vue-class-component'; // Vue 3 compatibility requires Vue from vue-class-component\n\n@Component({\n  template: `\n    <div>\n      <p>Hello, {{ userName }}!</p>\n      <p>Count: {{ count }}</p>\n      <button @click=\"increment\">Increment</button>\n      <input type=\"text\" :value=\"message\" @input=\"updateMessage(($event.target as HTMLInputElement).value)\" />\n      <p>Message: {{ message }}</p>\n    </div>\n  `\n})\nexport default class MyComponent extends Vue {\n  @Prop({ default: 'Guest' })\n  readonly userName!: string;\n\n  count: number = 0;\n  message: string = 'Initial message';\n\n  @Watch('count')\n  onCountChanged(newValue: number, oldValue: number) {\n    console.log(`Count changed from ${oldValue} to ${newValue}`);\n  }\n\n  @Emit('message-updated')\n  updateMessage(value: string) {\n    this.message = value;\n    return value;\n  }\n\n  increment() {\n    this.count++;\n  }\n\n  mounted() {\n    console.log('Component mounted with user:', this.userName);\n  }\n}","lang":"typescript","description":"Demonstrates a basic Vue 3 class component using `@Component`, `@Prop`, `@Watch`, and `@Emit` decorators."},"warnings":[{"fix":"Migrate to `vue-facing-decorator` or refactor components to use Vue 3's Composition API with `<script setup>` for better support and maintainability.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Add `\"experimentalDecorators\": true, \"emitDecoratorMetadata\": true` to your `compilerOptions` in `tsconfig.json`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider adopting the Composition API for new components and gradually refactoring existing class components. Tools like `vue-class-migrator` can assist in transitions.","message":"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.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"It is strongly recommended to use actively maintained alternatives like `vue-facing-decorator`.","message":"`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.","severity":"breaking","affected_versions":">=1.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `\"experimentalDecorators\": true, \"emitDecoratorMetadata\": true` to your `compilerOptions` in `tsconfig.json`.","cause":"TypeScript compiler is not configured to process decorators.","error":"Decorators are not enabled in your TypeScript configuration. Consider setting the 'experimentalDecorators' compiler option in your 'tsconfig.json'."},{"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.","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.","error":"TypeError: Cannot read properties of undefined (reading 'registerHooks')"},{"fix":"Use a named import: `import { Component } from 'vue-decorator';`","cause":"Incorrect import of `Component` (e.g., attempting a default import) or a problem with the module resolution.","error":"Component is not a function"}],"ecosystem":"npm"}