Vue Class Decorator

Common errors

• TypeError: Class extends value undefined is not a constructor or null

  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.
  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.

• Support for the experimental syntax 'decorators' isn't currently enabled

  cause Your TypeScript or Babel configuration does not have support for ECMAScript decorators enabled.
  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.

• Property 'myMethod' does not exist on type 'Vue'

  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`.
  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()`).

Warnings

• breaking 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`.
  Fix: For Vue 3, migrate to the Composition API or explore `vue-facing-decorator` or `@haixing_hu/vue3-class-component` as alternatives.
• gotcha 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.
  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.
• gotcha 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.
  Fix: Add or ensure the following compiler options in your `tsconfig.json`: `"experimentalDecorators": true, "emitDecoratorMetadata": true`.
• deprecated 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.
  Fix: For new projects or major refactoring, consider adopting the Vue 3 Composition API (`<script setup>`) to align with modern Vue development practices.

Install

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

Imports

• Component
  wrong:

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

  correct:

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

  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.
• FunctionalVue
  wrong:

  const { FunctionalVue } = require('vue-class-decorator')

  correct:

  import { FunctionalVue } from 'vue-class-decorator'

  This library is primarily designed for TypeScript and ESM environments. CommonJS `require` is generally not recommended.
• Filter
  wrong:

  import Filter from 'vue-class-decorator'

  correct:

  import { Filter } from 'vue-class-decorator'

  All decorators and helper functions are named exports; there is no default export.
• On

  import { On } from 'vue-class-decorator'

  Used for declarative event handling within the component instance.

Quickstart

Demonstrates the use of `@FunctionalVue`, `@Filter`, `@On`, and `@Mounted` decorators in a Vue 2 class-based component setup.

import Vue from 'vue';
import { Component, FunctionalVue, Filter, On, Mounted } from 'vue-class-decorator';

@Component
export class DateComponent extends Vue {
  @Filter('formatDate')
  private formatDate(value: string): string {
    if (!value) return '';
    const date = new Date(value);
    return date.toLocaleDateString();
  }
}

@Component
export default class MyFunctionalComponent extends FunctionalVue {
  message: string = 'Hello from functional!';
}

@Component({
  components: {
    DateComponent
  }
})
export class EventHandlerComponent extends Vue {
  count: number = 0;

  @On('increment')
  handleIncrement(): void {
    this.count++;
    console.log('Incremented:', this.count);
  }

  @Mounted()
  onMounted(): void {
    console.log('EventHandlerComponent mounted!');
    // Simulate emitting an event after 1 second
    setTimeout(() => {
      this.$emit('increment');
    }, 1000);
  }
}

new Vue({
  el: '#app',
  template: `
    <div>
      <date-component :value="new Date().toISOString()"></date-component>
      <p>{{ '2023-10-26T10:00:00Z' | formatDate }}</p>
      <event-handler-component></event-handler-component>
      <p>Count in parent: {{ $children[2]?.count }}</p>
    </div>
  `
});