{"id":22489325,"url":"https://github.com/nerdoza/vue-click","last_synced_at":"2025-08-02T21:32:36.505Z","repository":{"id":39219319,"uuid":"241746700","full_name":"nerdoza/vue-click","owner":"nerdoza","description":"Vue plugin for advanced click directive","archived":false,"fork":false,"pushed_at":"2024-10-12T02:06:27.000Z","size":1268,"stargazers_count":34,"open_issues_count":4,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-06T17:22:26.521Z","etag":null,"topics":["click","debounce","doubleclick","throttle","vue","vue-plugin","vue3","vue3-typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/nerdoza.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-02-19T23:09:42.000Z","updated_at":"2024-09-27T19:54:46.000Z","dependencies_parsed_at":"2023-02-10T11:45:49.457Z","dependency_job_id":"171ef70e-b4ae-4062-854c-2844ce8e9a94","html_url":"https://github.com/nerdoza/vue-click","commit_stats":{"total_commits":91,"total_committers":3,"mean_commits":"30.333333333333332","dds":0.1428571428571429,"last_synced_commit":"91e35579efb1e2831854e82984a86a5b96458670"},"previous_names":["nerdoza/vue-click","bayssmekanique/vue-click"],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/nerdoza/vue-click","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdoza%2Fvue-click","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdoza%2Fvue-click/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdoza%2Fvue-click/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdoza%2Fvue-click/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nerdoza","download_url":"https://codeload.github.com/nerdoza/vue-click/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdoza%2Fvue-click/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268456820,"owners_count":24253293,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["click","debounce","doubleclick","throttle","vue","vue-plugin","vue3","vue3-typescript"],"created_at":"2024-12-06T17:19:39.590Z","updated_at":"2025-08-02T21:32:36.482Z","avatar_url":"https://github.com/nerdoza.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Vue Click\n![Publish](https://github.com/nerdoza/vue-click/workflows/Publish/badge.svg)\n\nVue 3 plugin for advanced click directive.\n\n### [🖱️ Demo Page](https://nerdoza.github.io/vue-click/)\n\n# Installation\n\n## Npm\n\n```bash\nnpm install --save vue-click\n```\n\nInstall the plugin into Vue:\n\n```javascript\nimport { createApp } from 'vue'\nimport VueClick from 'vue-click'\n\nconst app = createApp({/* App Config */})\napp.use(VueClick)\napp.mount('#app')\n```\n\n## CDN\n\nThis package is available from the [**JSDELIVR**](https://www.jsdelivr.com/) and [**UNPKG**](https://unpkg.com/) content delivery networks (CDNs) and utilizes the [**UMD**](https://github.com/umdjs/umd#readme) module system so it's ready to use directly in the browser without a build step.\n\n```html\n\u003cscript src=\"https://unpkg.com/vue@next\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vue-click@latest\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const app = Vue.createApp({/* App Config */})\n  app.use(VueClick.default)\n  app.mount('#app')\n\u003c/script\u003e\n  \n```\n\n# Usage\n\n## Directive\n\nUse the `v-click` directive very similarly to how you would use `v-on:click`:\n\n```html\n\u003cbutton v-click=\"openModal\"\u003e\n```\n\nFurther modify the behavior of the button by adding modifiers:\n\n```html\n\u003cbutton v-click.double.once=\"removeAd\"\u003e\n\u003cbutton v-click.throttle.400s=\"openModal\"\u003e\n```\n\nOnly one behavior and one modifier can be used in a single directive declaration, but multiple directives can be placed on the same element.\n\n## Behaviors\n\nOne behavior may be used in a declaration and defines the trigger for the event.\n\n### Single Click Behavior _(Default)_\n\nThe `v-click` event will be fired immediately on a click event similar to `v-on:click`.\n\n```html\n\u003cbutton v-click=\"openModal\"\u003e\n```\n\n### Double Click Behavior\n\nThe `v-click` event can be bound to fire only on a double click. The event is fired only after 2 clicks within a time period.\n\n```html\n\u003cbutton v-click.double=\"openModal\"\u003e\n```\n\nThe default time period is `300ms`, but this can be modify by append the preferred time to the `double` modifier.\n\n```html\n\u003cbutton v-click.double.1s=\"openModal\"\u003e\n```\n\n### Hold Behavior\n\nThe `v-click` event can be bound to fire after a specified amount of time that the button is held down.\n\n```html\n\u003cbutton v-click.hold=\"openModal\"\u003e\n```\n\nThe default time period is `300ms`, but this can be modify by append the preferred time to the `hold` modifier.\n\n```html\n\u003cbutton v-click.hold.1s=\"openModal\"\u003e\n```\n\n### Press Behavior\n\nThe `v-click` event will be fired immediately on the `down` event, regardless of if the `up` event has occurred. This binding can be combined with the `release` behavior for advanced bindings or for scenarios where event latency is very important.\n\n```html\n\u003cbutton v-click.press=\"openModal\"\u003e\n```\n\n### Release Behavior\n\nThe `v-click` event will be fired immediately on the `up` event, which will always be preceded by a `down` event. This binding can be combined with the `press` behavior for advanced bindings or for scenarios where event latency is very important.\n\n```html\n\u003cbutton v-click.release=\"openModal\"\u003e\n```\n\n## Modifiers\n\nOne modifier may be used in a declaration and changes the behavior of the event trigger to reduce unintended event firing.\n\n### Once Modifiers\n\nThe `once` modifier causes the click listener to only issue a call once and then the binding is disposed.\n\n```html\n\u003cbutton v-click.double.once=\"openModal\"\u003e\n```\n\n### Throttle Modifier\n\nThe `v-click` can be throttled to prevent accidentally issuing multiple click events. The event is fired immediately upon the first click, but subsequent clicks are ignored until the desired time interval has passed. Each click resets the time interval.\n\n```html\n\u003cbutton v-click.throttle=\"openModal\"\u003e\n```\n\nThe default time interval is `300ms`, but this can be modify by append the preferred time to the `throttle` modifier.\n\n```html\n\u003cbutton v-click.throttle.500ms=\"openModal\"\u003e\n```\n\n### Debounce Modifier\n\nThe `v-click` can be debounced to prevent the premature issuance of click events. The event is fired only after a time period of inactivity. Each click resets the time period.\n\n```html\n\u003cbutton v-click.debounce=\"openModal\"\u003e\n```\n\nThe default time period is `300ms`, but this can be modify by append the preferred time to the `debounce` modifier.\n\n```html\n\u003cbutton v-click.debounce.20ms=\"openModal\"\u003e\n```\n\n## Time\n\nThe time attribute allows overriding of default times by appending the time period to the end of the behavior or modifier (ie: `double`, `throttle`, `debounce`).\n\nTime modifiers automatically use milliseconds as the default unit of measure, but additional units are supported by appending the unit abbreviation to the value.\n\n**Time Units:**\n\n- `ms` - Milliseconds\n- `s` - Seconds\n- `m` - Minutes\n\n```html\n\u003cbutton v-click.throttle.1s=\"openModal\"\u003e\n```\n\n**Note:** When applied to a declaration with two time sensitive interactions (ex: `double.throttle`) the same time is applied to both attributes.\n\n## Function Call Arguments\n\nWhen it is necessary to pass an argument to the function triggered on the click event, add the argument to the end of the directive as an argument.\n\n```html\n\u003cbutton v-click.throttle:open=\"buttonPress\"\u003e\n```\n\n```javascript\nbuttonPress (arg) {\n  if (arg === 'open') {\n    openModal()\n  }\n}\n```\n\nFor the above example, the `buttonPress` function will be called with the string `open` passed in as the argument. There is only support for a single argument and it will always be passed in as a string.\n\n## Styling\n\nThe addition of `TouchEvent` support has resulted in the breaking of normal event propagation which means pseudo selectors like `:active` and `:focus` will no longer active on events. Instead, the `data-vc-state-active` data attribute will be applied during the target elements active state. This works better across both mobile and desktop environments than the `:active` state as it's cleared when the user's finger is removed (where `:active` persists until focus is changed). There is also a `data-vc-state-deactivate` data attribute which is applied when the binding is removed from an element (ex: `once` modifier).\n\nThis plugin also provides data attributes for the behavior to allow advanced styling based on the desired user experience.\n\n```css\nbutton {\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  touch-action: none;\n}\n\nbutton:focus {\n  outline: none;\n}\n\nbutton:active,\nbutton[data-vc-state-active] {\n  outline: none;\n  box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.4);\n}\n\nbutton:disabled,\nbutton[data-vc-state-deactivated] {\n  background: ghostwhite !important;\n  cursor: inherit;\n  outline: none;\n  box-shadow: none;\n}\n\nbutton[data-vc-bind-click] {\n  background-color: aquamarine;\n}\n\nbutton[data-vc-bind-double] {\n  background-color: aqua;\n}\n\nbutton[data-vc-bind-hold] {\n  background-color: lightcyan;\n}\n\nbutton[data-vc-bind-press] {\n  background-color: lavender;\n}\n```\n\n**Note:** When the `once` modifier is applied, the data-set binding will be removed once the event listener is removed (after the event is fired).\n\n---\n\n## Copyright and License\n© 2022 Zachary Cardoza under the [MIT license](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerdoza%2Fvue-click","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnerdoza%2Fvue-click","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerdoza%2Fvue-click/lists"}