{"id":19921850,"url":"https://github.com/dhershman1/vue-debounce","last_synced_at":"2025-04-06T21:12:15.483Z","repository":{"id":32786812,"uuid":"139152793","full_name":"dhershman1/vue-debounce","owner":"dhershman1","description":"A simple to use directive for debounce solutions","archived":false,"fork":false,"pushed_at":"2024-10-03T12:55:48.000Z","size":1004,"stargazers_count":174,"open_issues_count":5,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T20:07:40.644Z","etag":null,"topics":["debounce","debounce-solutions","inputs","vue","vue-debounce","vue3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dhershman1.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-29T13:28:11.000Z","updated_at":"2025-02-26T13:07:49.000Z","dependencies_parsed_at":"2023-12-03T23:19:51.011Z","dependency_job_id":"49b7feca-905a-414b-9cb4-269d835691d4","html_url":"https://github.com/dhershman1/vue-debounce","commit_stats":{"total_commits":147,"total_committers":8,"mean_commits":18.375,"dds":0.435374149659864,"last_synced_commit":"5fb4bd4e9fc13845fefb3e584a131f468406a871"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhershman1%2Fvue-debounce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhershman1%2Fvue-debounce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhershman1%2Fvue-debounce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dhershman1%2Fvue-debounce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dhershman1","download_url":"https://codeload.github.com/dhershman1/vue-debounce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247550681,"owners_count":20956987,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["debounce","debounce-solutions","inputs","vue","vue-debounce","vue3"],"created_at":"2024-11-12T22:08:36.921Z","updated_at":"2025-04-06T21:12:15.456Z","avatar_url":"https://github.com/dhershman1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-debounce\n\n[![npm](https://img.shields.io/npm/v/vue-debounce.svg?style=flat-square)](https://www.npmjs.com/package/vue-debounce)\n[![Downloads](https://img.shields.io/npm/dm/vue-debounce.svg?style=flat-square)](https://www.npmjs.com/package/vue-debounce)\n\nA simple to use directive for debounce solutions\n\nIt attaches itself to an event for actions\n\n[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)\n\n## Important\n\nAs of now [vue2-debounce](https://github.com/dhershman1/vue2-debounce) is published on npm, if you are using vue2 I highly recommend migrating to this package as this one is going to start focusing on vue3 from v5 onward. Consider vue2 support deprecated for this module.\n\n## Content\n\n- [Features](#features)\n- [Installation](#installation)\n- [Modifiers](#modifiers)\n- [Options](#options)\n- [Option Defaults](#option-defaults)\n- [CDN Support](#cdn-support)\n- [Setup](#setup)\n- [Use Just Debounce](#using-just-debounce)\n- [Usage](#usage)\n- [Modifier Usage](#modifier-usage)\n- [Overwriting Events](#overwriting-events)\n- [Typescript Support](#typescript-support)\n- [Caveats](#caveats)\n\n## Features\n\n- Dynamic debouncing for input based requests\n- Easy to use, just place it into your vue instance and attach it to your inputs/components\n- Self regulating no need to worry about it, set it and forget it\n- Multiple time formats supported (miliseconds and seconds)\n- Enter key support to automatically fire the desired function when the user hits the enter key in the desired input (Can also be disabled)\n- Supports the ability to have multiple event listeners, and specify events at the element level\n\n## Installation\n```\nnpm i vue-debounce\n```\n\n## Modifiers\n\n- `lock` : Used to lock the debounce and prevent the enter key from triggering the function when pressed\n  - Example: `v-debounce:400ms.lock=\"cb\"`\n- `unlock` : Used to unlock the enter key on a debounced input, useful if you want to use the `lock` option and only want a few debounced inputs unlocked\n- `fireonempty` : Use to signify that when that specific input is emptied, you want the function to fire right away\n- `cancelonempty` : Use this to specify that when the input is emptied you **DO NOT** want your debounced function to trigger at all\n- `trim` : `Boolean` - Tells debounce to trim out white space using the `String.prototype.trim()` function\n\n## Options\n\n- `lock` : `Boolean` - This works the same way as the modifier does, however using the option will lock _ALL_ of the debounced inputs within that vue instance, where as using the modifer only locks the one it's attached to\n- `listenTo` : `String|Array` - Allows you to set a custom event attached to an element like `input` for example\n  - This is given to the `addEventListener` method attached to the element\n- `defaultTime` : `String` - Set the default timer for debounce directives that you don't give a time to\n- `fireOnEmpty` : `Boolean` - Tells debounce that if the input is empty, then fire the function immediately\n- `trim` : `Boolean` - Tells debounce to trim out white space using the `String.prototype.trim()` function\n\n## Option Defaults\n\n```js\n{\n  lock: false,\n  listenTo: 'keyup',\n  defaultTime: '300ms',\n  fireOnEmpty: false,\n  trim: false\n}\n```\n\n## CDN Support\n\nYou can use vue debounce via CDN like so: (It is recommended that you don't use `@latest` however)\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-debounce@latest/dist/vue-debounce.min.js\"\u003e\n\u003cscript\u003e\n  vueDebounce.vueDebounce({ lock: true })\n\u003c/script\u003e\n```\n\n## Setup\n\nWith vue3 we simply need to import the new directive function `vueDebounce` this function takes in an object of options (found above)\n\nUsing `vue-debounce` Globally:\n```js\nimport vueDebounce from 'vue-debounce'\nimport { createApp } from 'vue';\nimport App from './App.vue';\n\nconst app = createApp(App)\napp\n  .directive('debounce', vueDebounce({ lock: true }))\n  .mount('#app');\n```\n\nUsing the setup API at the component level:\n```vue\n\u003cscript setup\u003e\nimport vueDebounce from 'vue-debounce'\n\nconst vDebounce = vueDebounce({ lock: true })\n\u003c/script\u003e\n```\n\nUsing `vue-debounce` at a component level using the option API:\n```js\nimport vueDebounce from 'vue-debounce'\n\nexport default {\n  directives: {\n    debounce: vueDebounce({ lock: true })\n  }\n}\n```\n\n## Using Just Debounce\n\nWith Vue-debounce you're also able to just use the debouncing function.\n\nSimply require the debounce file.\n\n```js\nimport { debounce } from 'vue-debounce'\n```\n\nThe `debounce` function returns a function back which in turn is debounced, so you can set them up ahead of time:\n\n```js\nconst dFn = debounce(val =\u003e console.log('normal format', val), '400ms')\n\ndFn(10) // =\u003e 'normal format' 10\n// Or\ndebounce(val =\u003e console.log('just a number!'), 400)(10) // =\u003e 'just a number!' 10\n```\n\n\n## Usage\n\nThen attach a time:format to the directive, and set the value to the function you want to call and attach it to your input element\n\nExample:\n\n```vue\n\u003cinput v-debounce:300ms=\"myFunc\" type=\"text\" /\u003e\n```\n\nIf no wait timer is passed in, then the directive will default to whatever you set `defaultTime` to, **OR** `300ms` if that isn't set.\n\nYou can pass the time in multiple formats:\n\n```vue\n\u003c!-- If no time format is attached ms is used --\u003e\n\u003cinput v-debounce:300=\"myFunc\" type=\"text\" /\u003e\n\n\u003c!-- Seconds format is supported --\u003e\n\u003cinput v-debounce:1s=\"myFunc\" type=\"text\" /\u003e\n```\n\nThe value of the input is passed along to your function as the first parameter, and the 2nd parameter is the event object itself.\n\n## Modifier Usage\n\nUsing modifiers works just like normal Vue directives. You can chain them to the timeout value and each other. Some examples include:\n\n\u003e **IMPORTANT NOTE**: Modifiers WILL overwrite options you have set, for example if you set the `fireOnEmpty` option set to true and then tag a input with the `cancelonempty` modifier then the debounced function will cancel when **THAT** input is empty instead of fire.\n\n```vue\n\u003c!-- Using Modifiers locking the input so the enter key isn't registered --\u003e\n\u003cinput v-debounce:1s.lock=\"myFunc\" type=\"text\" /\u003e\n\n\u003c!-- Using Modifiers unlocking the input so the enter key is registered --\u003e\n\u003c!-- If you've set lock to true as an option when adding this module --\u003e\n\u003cinput v-debounce:1s.unlock=\"myFunc\" type=\"text\" /\u003e\n\n\u003c!-- Using the fireonempty modifier triggers your debounced function when this specific input field is empty --\u003e\n\u003cinput v-debounce:1s.fireonempty=\"myFunc\" type=\"text\" /\u003e\n\n\u003c!-- Using the cancelonempty modifier tells debounce to cancel function execution when the field is empty --\u003e\n\u003cinput v-debounce:1s.cancelonempty=\"myFunc\" type=\"text\" /\u003e\n```\n\n## Overwriting Events\n\nAs of Version 1.2.0 you can assign specific event listeners to specific inputs. Doing so overwrites **ANY** of the listed events set with `listenTo`\n\nExample:\n```vue\n// This can accept an array or a single string when using the bind `:` syntax\n\u003cinput v-debounce:1s=\"myFunc\" :debounce-events=\"['click', 'keydown']\"\u003e\n\u003cinput v-debounce:1s=\"myFunc\" :debounce-events=\"'click'\"\u003e\n\n// You can also just use it as an attribute, though if passing multiple events binding it is preferred\n\u003cinput v-debounce:1s=\"myfunc\" debounce-events=\"click\"\u003e\n```\n\nA full example:\n\n```vue\n\u003ctemplate\u003e\n  \u003cinput v-debounce:400ms=\"myFn\" type=\"text\" /\u003e\n  \u003cinput v-debounce:400ms=\"myFn\" debounce-events=\"click\" type=\"text\" /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  methods: {\n    myFn(val, e) {\n      console.log(val) // =\u003e The value of the input\n      console.log(e) // =\u003e The event object\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## Typescript Support\nWhile this project is not written in typescript, we do define types in the `types` directory. Unfortunately the way Vue is currently typed\nthe only type support you will get is when you `Vue.use(vueDebounce)`.\n\ni.e.\n\n```typescript\nimport Vue from 'vue'\nimport vueDebounce, { PluginConfig, debounce } from 'vue-debounce'\n\ndebounce(() =\u003e console.log('just a number!'), 400)\ndebounce(() =\u003e console.log('normal format'), '400ms')\n\nVue.use\u003cPluginConfig\u003e(vueDebounce, { lock: true, defaultTime: '400ms', listenTo: 'keyup' })\n```\n\nHopefully in the future Vue will allow directives to type the modifiers and values that are accepted.\n\n## Caveats\n\nIf a library you are using such as `Vueftify` is already using a specified event, it will block vue debounce from being able to listen to that event.\n\nAs of `v3.1.0` I have significantly improved compatability with these kinds of libraries, however this problem still remains.\n\nFor example, Vuetify makes pretty heavy use of the `onblur` event for a lot of it's styles/animatons, so I'd recommend telling vue-debounce to listen for `focusout` instead, if you want debounce to trigger on a blur like event.\n\nI will keep doing research into a better way to solve this little issue, but for now the improved compatability should help a lot!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhershman1%2Fvue-debounce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhershman1%2Fvue-debounce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhershman1%2Fvue-debounce/lists"}