{"id":12420,"library":"vue-class-decorator","title":"Vue Class Decorator","description":"Vue Class Decorator (current version 7.6.3) is a library that provides additional decorators for defining Vue 2 components using a class-based, TypeScript-first syntax. It extends the capabilities of `vue-class-component` and `vue-property-decorator` by introducing decorators for functional components (`@FunctionalVue`), filters (`@Filter`), event handling (`@On`, `@Once`), and lifecycle hooks (`@Mounted`). This approach allows developers to define components, methods, and lifecycle hooks as class properties and methods, leveraging TypeScript's strong typing. The library is specifically tailored for Vue 2 projects and does not support Vue 3, where the Composition API is the recommended approach for component definition. Its release cadence has slowed considerably, with no recent updates for Vue 3 compatibility, positioning it primarily for legacy Vue 2 maintenance.","status":"maintenance","version":"7.6.3","language":"javascript","source_language":"en","source_url":"https://github.com/ztytotoro/vue-class-decorator","tags":["javascript","vue","typescript","decorator"],"install":[{"cmd":"npm install vue-class-decorator","lang":"bash","label":"npm"},{"cmd":"yarn add vue-class-decorator","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-class-decorator","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 2 applications.","package":"vue","optional":false},{"reason":"Fully depends on this library for class-style component base functionality.","package":"vue-class-component","optional":false},{"reason":"Many decorators are derived from or re-exported by this library, providing core decorator functionality.","package":"vue-property-decorator","optional":false}],"imports":[{"note":"While `@Component` originates from `vue-class-component`, it's often re-exported or used alongside other decorators from `vue-class-decorator` for convenience. Prefer importing from `vue-class-decorator` when using its other decorators.","wrong":"import { Component } from 'vue-class-component'","symbol":"Component","correct":"import { Component } from 'vue-class-decorator'"},{"note":"This library is primarily designed for TypeScript and ESM environments. CommonJS `require` is generally not recommended.","wrong":"const { FunctionalVue } = require('vue-class-decorator')","symbol":"FunctionalVue","correct":"import { FunctionalVue } from 'vue-class-decorator'"},{"note":"All decorators and helper functions are named exports; there is no default export.","wrong":"import Filter from 'vue-class-decorator'","symbol":"Filter","correct":"import { Filter } from 'vue-class-decorator'"},{"note":"Used for declarative event handling within the component instance.","symbol":"On","correct":"import { On } from 'vue-class-decorator'"}],"quickstart":{"code":"import Vue from 'vue';\nimport { Component, FunctionalVue, Filter, On, Mounted } from 'vue-class-decorator';\n\n@Component\nexport class DateComponent extends Vue {\n  @Filter('formatDate')\n  private formatDate(value: string): string {\n    if (!value) return '';\n    const date = new Date(value);\n    return date.toLocaleDateString();\n  }\n}\n\n@Component\nexport default class MyFunctionalComponent extends FunctionalVue {\n  message: string = 'Hello from functional!';\n}\n\n@Component({\n  components: {\n    DateComponent\n  }\n})\nexport class EventHandlerComponent extends Vue {\n  count: number = 0;\n\n  @On('increment')\n  handleIncrement(): void {\n    this.count++;\n    console.log('Incremented:', this.count);\n  }\n\n  @Mounted()\n  onMounted(): void {\n    console.log('EventHandlerComponent mounted!');\n    // Simulate emitting an event after 1 second\n    setTimeout(() => {\n      this.$emit('increment');\n    }, 1000);\n  }\n}\n\nnew Vue({\n  el: '#app',\n  template: `\n    <div>\n      <date-component :value=\"new Date().toISOString()\"></date-component>\n      <p>{{ '2023-10-26T10:00:00Z' | formatDate }}</p>\n      <event-handler-component></event-handler-component>\n      <p>Count in parent: {{ $children[2]?.count }}</p>\n    </div>\n  `\n});","lang":"typescript","description":"Demonstrates the use of `@FunctionalVue`, `@Filter`, `@On`, and `@Mounted` decorators in a Vue 2 class-based component setup."},"warnings":[{"fix":"For Vue 3, migrate to the Composition API or explore `vue-facing-decorator` or `@haixing_hu/vue3-class-component` as alternatives.","message":"This library is fundamentally designed for Vue 2 and is not compatible with Vue 3. Migrating to Vue 3 requires refactoring components to use the Composition API or an alternative community-maintained class component solution like `vue-facing-decorator`.","severity":"breaking","affected_versions":">=7.x"},{"fix":"If the method needs to be directly callable or accessible via `this.methodName`, ensure `reserve` is `true` (which is the default) or omit it. Only set `reserve: false` if the method is exclusively for internal event binding and should not be part of the public `methods` API.","message":"Using `@On` or `@Once` decorators with `reserve: false` will delete the decorated method from the component's `methods` object. This can lead to unexpected behavior if you later try to call the method directly (e.g., `this.myMethod()`) or through direct `$emit` listeners expecting it to exist.","severity":"gotcha","affected_versions":">=7.x"},{"fix":"Add or ensure the following compiler options in your `tsconfig.json`: `\"experimentalDecorators\": true, \"emitDecoratorMetadata\": true`.","message":"For TypeScript projects, the `tsconfig.json` must explicitly enable experimental decorators and emit decorator metadata. Without these settings, TypeScript will not correctly process the decorators, leading to compilation errors or runtime failures.","severity":"gotcha","affected_versions":">=7.x"},{"fix":"For new projects or major refactoring, consider adopting the Vue 3 Composition API (`<script setup>`) to align with modern Vue development practices.","message":"The class component style of Vue development, while supported by this library for Vue 2, is largely superseded by the Composition API in Vue 3. New Vue projects or migrations should prioritize the Composition API for better long-term maintainability and official support.","severity":"deprecated","affected_versions":">=7.x"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `vue-class-component` is installed (`npm install vue-class-component`) and correctly imported. Also, verify that `Vue` is imported from `vue-class-component` when defining your base class, or that `vue-class-decorator`'s re-exports are correctly handled.","cause":"This error typically occurs when `vue-class-component` is not properly installed, configured, or its imports are incorrect. `vue-class-decorator` depends on `vue-class-component` for the base `Vue` class extension.","error":"TypeError: Class extends value undefined is not a constructor or null"},{"fix":"In `tsconfig.json`, ensure `\"experimentalDecorators\": true` and `\"emitDecoratorMetadata\": true` are set under `compilerOptions`. If using Babel, ensure `@babel/plugin-proposal-decorators` and `@babel/plugin-proposal-class-properties` are configured.","cause":"Your TypeScript or Babel configuration does not have support for ECMAScript decorators enabled.","error":"Support for the experimental syntax 'decorators' isn't currently enabled"},{"fix":"Check the decorator settings, especially `reserve` for `@On`/`@Once`. Ensure all necessary types are correctly inferred. If it's a lifecycle hook, make sure it's decorated correctly (e.g., `@Mounted()`).","cause":"This can happen if a decorated method's type inference is lost, or if you're trying to access a method that was removed by `@On`/`@Once` with `reserve: false`.","error":"Property 'myMethod' does not exist on type 'Vue'"}],"ecosystem":"npm"}