Debounce Decorator for Vue Class Components

1.0.1 · maintenance · verified Tue Apr 21

Vue Debounce Decorator provides an `@Debounce()` decorator to easily apply debouncing to methods within Vue Class Components, enabling rate-limiting of function calls. As of its current stable version 1.0.1, it is designed for use with Vue 2 and the `vue-class-component` library. While effective for its intended environment, this package is tied to a development pattern (Vue Class Components) that has been largely superseded by the Composition API and `<script setup>` in Vue 3. It does not have a rapid release cadence, reflecting the maintenance status of its underlying technologies. Key differentiators include its decorator-based syntax for `vue-class-component` methods, offering a clean, declarative way to add debouncing without manual `setTimeout` management. Alternatives for Vue 3 typically involve using `lodash.debounce` directly within the Composition API or dedicated debounce directives for input elements.

Common errors

```
Error: Decorators are not enabled. You must enable the 'experimentalDecorators' compiler option in your 'tsconfig.json' file.
```
cause TypeScript compiler option `experimentalDecorators` is not set to `true`.

fix Add or update `"experimentalDecorators": true, "emitDecoratorMetadata": true` in the `compilerOptions` section of your `tsconfig.json`.
```
Cannot find module 'vue-class-component' or its corresponding type declarations.
```
cause The `vue-class-component` package is not installed or incorrectly configured, which is a peer dependency.

fix Install `vue-class-component`: `npm install vue-class-component` or `yarn add vue-class-component`.
```
TypeError: Cannot read properties of undefined (reading 'message')
```
cause Context (`this`) issues when the debounced method is called in a way that loses its `this` binding, especially in older JavaScript environments or incorrect usage.

fix Ensure the component method is properly bound to the instance, which `@Component` and decorators typically handle. If passing the method as a callback to an external event listener not managed by Vue, ensure it's explicitly bound (e.g., `this.myMethod.bind(this)`).

Warnings

breaking This package relies on `vue-class-component`, which is no longer actively maintained and not recommended for new Vue 3 projects. Vue 3 officially deprecates the class component API in favor of the Composition API or Options API.
Fix: For Vue 3, migrate to the Composition API and use `lodash.debounce` directly, or explore `vue-facing-decorator` if class components are essential for migration and apply debounce manually or with a compatible decorator.
gotcha Using decorators requires proper TypeScript configuration (`experimentalDecorators` and `emitDecoratorMetadata` enabled) or a Babel setup that supports legacy decorators. Without this, compilation errors or runtime failures will occur.
Fix: Ensure `tsconfig.json` includes: `"compilerOptions": { "experimentalDecorators": true, "emitDecoratorMetadata": true }` or configure Babel with `@babel/plugin-proposal-decorators` and `@babel/plugin-proposal-class-properties`.
gotcha The `@Debounce` decorator only applies to class methods. It cannot be used directly with functions defined via the Options API or the Composition API in Vue 3. Its scope is strictly limited to methods within classes extending `Vue`.
Fix: For Options API, manually wrap methods with a debounce utility (e.g., from Lodash). For Composition API, import and use `debounce` directly within your `setup()` function or define a custom composable.

Install

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

Imports

Debounce
wrong:
```
const Debounce = require('vue-debounce-decorator')
```
correct:
```
import { Debounce } from 'vue-debounce-decorator'
```
This package is written in TypeScript and primarily designed for ES module environments with decorator support. CommonJS require() will not work as expected for decorators.
@Debounce
wrong:
```
const myMethod = @Debounce(300) () => { /* ... */ };
```
correct:
```
class MyComponent extends Vue {
  @Debounce(300)
  myMethod() { /* ... */ }
}
```
The decorator must be applied to a class method within a Vue Class Component, not to a standalone function or arrow function.

Quickstart

Demonstrates applying the `@Debounce` decorator to a Vue class component method to rate-limit input handling.

import Vue from 'vue';
import Component from 'vue-class-component';
import { Debounce } from 'vue-debounce-decorator';

@Component
export default class App extends Vue {
  message: string = '';

  @Debounce(500)
  handleInput(event: Event) {
    const target = event.target as HTMLInputElement;
    this.message = target.value;
    console.log(`Debounced input: ${this.message}`);
  }

  mounted() {
    // Simulate user typing after 100ms, then 200ms, then 600ms
    setTimeout(() => { this.handleInput({ target: { value: 'H' } } as unknown as Event); }, 100);
    setTimeout(() => { this.handleInput({ target: { value: 'He' } } as unknown as Event); }, 200);
    setTimeout(() => { this.handleInput({ target: { value: 'Hello' } } as unknown as Event); }, 600);
  }

  render() {
    return (
      <div>
        <h1>Vue Debounce Decorator Example</h1>
        <input type="text" onInput={this.handleInput} placeholder="Type something..." />
        <p>Current (debounced) message: {this.message}</p>
      </div>
    );
  }
}

view raw JSON →