Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Debounce
✓ import { Debounce } from 'vue-debounce-decorator'
✗ const Debounce = require('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
✓ class MyComponent extends Vue {
@Debounce(300)
myMethod() { /* ... */ }
}
✗ const myMethod = @Debounce(300) () => { /* ... */ };
The decorator must be applied to a class method within a Vue Class Component, not to a standalone function or arrow function.
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>
);
}
}
Debug
Known issues
breakingThis 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.fixFor 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.
affects: >=1.0.0 (in context of Vue 3)
gotchaUsing 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.fixEnsure `tsconfig.json` includes: `"compilerOptions": { "experimentalDecorators": true, "emitDecoratorMetadata": true }` or configure Babel with `@babel/plugin-proposal-decorators` and `@babel/plugin-proposal-class-properties`. affects: >=1.0.0
gotchaThe `@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`.fixFor 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.
affects: >=1.0.0
Errors
Common errors & fixes
Error: Decorators are not enabled. You must enable the 'experimentalDecorators' compiler option in your 'tsconfig.json' file.
TypeScript compiler option `experimentalDecorators` is not set to `true`.
fixAdd 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.
The `vue-class-component` package is not installed or incorrectly configured, which is a peer dependency.
fixInstall `vue-class-component`: `npm install vue-class-component` or `yarn add vue-class-component`.
TypeError: Cannot read properties of undefined (reading 'message')
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.
fixEnsure 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)`).
Audit
Dependencies
vue-class-componentrequiredThis decorator is specifically built to enhance methods in Vue Class Components.