{"id":15906,"library":"vue-debounce-decorator","title":"Debounce Decorator for Vue Class Components","description":"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.","status":"maintenance","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/trepz/vue-debounce-decorator","tags":["javascript","vue","typescript","decorator","debounce"],"install":[{"cmd":"npm install vue-debounce-decorator","lang":"bash","label":"npm"},{"cmd":"yarn add vue-debounce-decorator","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-debounce-decorator","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This decorator is specifically built to enhance methods in Vue Class Components.","package":"vue-class-component","optional":false}],"imports":[{"note":"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.","wrong":"const Debounce = require('vue-debounce-decorator')","symbol":"Debounce","correct":"import { Debounce } from 'vue-debounce-decorator'"},{"note":"The decorator must be applied to a class method within a Vue Class Component, not to a standalone function or arrow function.","wrong":"const myMethod = @Debounce(300) () => { /* ... */ };","symbol":"@Debounce","correct":"class MyComponent extends Vue {\n  @Debounce(300)\n  myMethod() { /* ... */ }\n}"}],"quickstart":{"code":"import Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { Debounce } from 'vue-debounce-decorator';\n\n@Component\nexport default class App extends Vue {\n  message: string = '';\n\n  @Debounce(500)\n  handleInput(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.message = target.value;\n    console.log(`Debounced input: ${this.message}`);\n  }\n\n  mounted() {\n    // Simulate user typing after 100ms, then 200ms, then 600ms\n    setTimeout(() => { this.handleInput({ target: { value: 'H' } } as unknown as Event); }, 100);\n    setTimeout(() => { this.handleInput({ target: { value: 'He' } } as unknown as Event); }, 200);\n    setTimeout(() => { this.handleInput({ target: { value: 'Hello' } } as unknown as Event); }, 600);\n  }\n\n  render() {\n    return (\n      <div>\n        <h1>Vue Debounce Decorator Example</h1>\n        <input type=\"text\" onInput={this.handleInput} placeholder=\"Type something...\" />\n        <p>Current (debounced) message: {this.message}</p>\n      </div>\n    );\n  }\n}","lang":"typescript","description":"Demonstrates applying the `@Debounce` decorator to a Vue class component method to rate-limit input handling."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.0.0 (in context of Vue 3)"},{"fix":"Ensure `tsconfig.json` includes: `\"compilerOptions\": { \"experimentalDecorators\": true, \"emitDecoratorMetadata\": true }` or configure Babel with `@babel/plugin-proposal-decorators` and `@babel/plugin-proposal-class-properties`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add or update `\"experimentalDecorators\": true, \"emitDecoratorMetadata\": true` in the `compilerOptions` section of your `tsconfig.json`.","cause":"TypeScript compiler option `experimentalDecorators` is not set to `true`.","error":"Error: Decorators are not enabled. You must enable the 'experimentalDecorators' compiler option in your 'tsconfig.json' file."},{"fix":"Install `vue-class-component`: `npm install vue-class-component` or `yarn add vue-class-component`.","cause":"The `vue-class-component` package is not installed or incorrectly configured, which is a peer dependency.","error":"Cannot find module 'vue-class-component' or its corresponding type declarations."},{"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)`).","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.","error":"TypeError: Cannot read properties of undefined (reading 'message')"}],"ecosystem":"npm"}