{"id":13824362,"url":"https://github.com/robinrodricks/vue3-touch-events","last_synced_at":"2025-04-13T19:24:55.164Z","repository":{"id":41657212,"uuid":"363075293","full_name":"robinrodricks/vue3-touch-events","owner":"robinrodricks","description":"Simple touch events support for vue.js 3","archived":false,"fork":false,"pushed_at":"2025-01-31T17:36:45.000Z","size":1426,"stargazers_count":258,"open_issues_count":22,"forks_count":31,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T17:03:25.933Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/robinrodricks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":"FUNDING.yml","license":"LICENSE","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,"publiccode":null,"codemeta":null},"funding":{"github":"robinrodricks"}},"created_at":"2021-04-30T08:23:34.000Z","updated_at":"2025-03-31T02:46:15.000Z","dependencies_parsed_at":"2024-01-15T17:39:19.877Z","dependency_job_id":"ff1271aa-9863-442e-bb36-6ca362431b43","html_url":"https://github.com/robinrodricks/vue3-touch-events","commit_stats":{"total_commits":81,"total_committers":13,"mean_commits":6.230769230769231,"dds":0.5679012345679013,"last_synced_commit":"5ffcaf0a1520af9324396ba6d775b7943e3ca1db"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinrodricks%2Fvue3-touch-events","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinrodricks%2Fvue3-touch-events/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinrodricks%2Fvue3-touch-events/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinrodricks%2Fvue3-touch-events/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robinrodricks","download_url":"https://codeload.github.com/robinrodricks/vue3-touch-events/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248766850,"owners_count":21158335,"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":[],"created_at":"2024-08-04T09:01:01.519Z","updated_at":"2025-04-13T19:24:55.140Z","avatar_url":"https://github.com/robinrodricks.png","language":"TypeScript","funding_links":["https://github.com/sponsors/robinrodricks"],"categories":["Packages"],"sub_categories":[],"readme":"# vue3-touch-events [![](https://img.shields.io/npm/v/vue3-touch-events.svg)](https://www.npmjs.com/package/vue3-touch-events) [![](https://img.shields.io/npm/dt/vue3-touch-events)](https://www.npmjs.com/package/vue3-touch-events)\n\n**Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.**\n\nThe easiest way to make your interactive vue.js content mobile-friendly. When you add `v-touch` events to your elements, it works on desktop and mobile using a fully declarative syntax. Unlike other libraries, you do not need to add any special code to your components to make this work. You simply have to register the library globally and it enables new events throughout your application.\n\n![Events](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/anim-all.gif)\n\nReleased under the permissive MIT License.\n\n\n## What's New!\n\n- [Cone swiping](#swipe) and [Zoom](#zoom) is new in version 5! \n- We now support sending [drag](#drag-and-drop) events when users drag outside an object! (set `dragOutside: true`)\n- If you encounter any issues with these, please file an issue!\n\n## Features\n\n- Declarative syntax for common touch events, such as [tap, hold](#touch-and-tap), [swipe](#swipe), [zoom](#zoom) and [drag](#drag-and-drop)\n- Most events support desktop (mouse) and mobile devices (touch screen) with the same syntax\n- Automatically add styling on hover and tap using `v-touch-class` directive\n- Bind multiple touch events on one DOM element\n- Customizable events with native-like events handler\n- Customizable throttling for all events to control how often they are fired, and prevent crashing your application\n- Global configuration that applies to all events in the application\n- Ability to override global configuration on any element using `v-touch-options` directive\n- Bindings for TypeScript included and also works in pure-JavaScript projects\n\nVersion:\n\n\u003e Note: This library is for **vue.js 3.x** only. For **vue.js 2.x** see the [older library](https://github.com/jerrybendy/vue-touch-events).\n\n\n\n## Installation\n\nTo install:\n\n| Package Manager | Command                                    |\n|-----------------|--------------------------------------------|\n| npm             | `npm install vue3-touch-events`            |\n| bun             | `bun add vue3-touch-events`                |\n| yarn            | `yarn add vue3-touch-events`               |\n\n\nRelease notes are found in the [RELEASES.md](RELEASES.md) file.\n\n\n### TypeScript\n\nYou need to register this plugin with vue.js in your main application file:\n\n\n```js\nimport Vue from \"vue\";\nimport Vue3TouchEvents from \"vue3-touch-events\";\n\nVue.use(Vue3TouchEvents);\n```\n\n### TypeScript Vue 3.4+\n\nYou need to register this plugin with your vue.js app:\n\n```js\nimport Vue3TouchEvents, {\n  type Vue3TouchEventsOptions,\n} from \"vue3-touch-events\";\n\napp.use\u003cVue3TouchEventsOptions\u003e(Vue3TouchEvents, {\n  disableClick: false\n  // any other global options...\n})\n```\n\nGlobal options that can be added are [listed here](#global-configuration) and listed in each [feature section](#touch-and-tap).\n\n\n### Nuxt 3+\n\nAdd the following to a file in plugins directory:\n```ts\nimport Vue3TouchEvents from 'vue3-touch-events';\n\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  nuxtApp.vueApp.use(Vue3TouchEvents)\n});\n```\nAdd `v-touch` events to any Nuxt component: (this is sample code only)\n\n```ts\n\u003cdiv v-touch:swipe.left=\"() =\u003e swipe('next')\" v-touch:swipe.right=\"() =\u003e swipe('prev')\"\u003e\n```\n\n\n### JavaScript\n\nYou need to include the [UMD script](https://raw.githubusercontent.com/robinrodricks/vue3-touch-events/master/index.js) of this plugin and you do not need to register this plugin with vue.js.\n\n```html\n\u003cscript src=\"libs/vue.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"libs/vue3-touch-events.js\"\u003e\u003c/script\u003e\n```\n\n\n\n## Examples\n\nIn your `.vue` component files, use the `v-touch` directive add touch events to elements.\n\nSpecify the event using the first argument, for example `v-touch:tap` or `v-touch:swipe`.\n\n```html\n\u003c!-- bind a tap event --\u003e\n\u003cspan v-touch:tap=\"touchHandler\"\u003eTap Me\u003c/span\u003e\n\n\u003c!-- tap is the default event, you can omit it --\u003e\n\u003cspan v-touch=\"touchHandler\"\u003eTap Me\u003c/span\u003e\n\n\u003c!-- bind the swipe event, no matter direction --\u003e\n\u003cspan v-touch:swipe=\"swipeHandler\"\u003eSwipe Here\u003c/span\u003e\n\n\u003c!-- only when swipe left can trigger the callback --\u003e\n\u003cspan v-touch:swipe.left=\"swipeHandler\"\u003eSwipe Left Here\u003c/span\u003e\n\n\u003c!-- bind a long tap event --\u003e\n\u003cspan v-touch:longtap=\"longtapHandler\"\u003eLong Tap Event\u003c/span\u003e\n\n\u003c!-- bind a start and end event --\u003e\n\u003cspan v-touch:press=\"startHandler\" v-touch:release=\"endHandler\"\u003ePress and Release Events\u003c/span\u003e\n\n\u003c!-- bind a move and moving event --\u003e\n\u003cspan v-touch:drag.once=\"movedHandler\"\u003eTriggered once when starting to move and tapTolerance is exceeded\u003c/span\u003e\n\u003cspan v-touch:drag=\"movingHandler\"\u003eContinuously triggered while dragging\u003c/span\u003e\n\n\u003c!-- touch and hold --\u003e\n\u003cspan v-touch:hold=\"touchHoldHandler\"\u003eTouch and hold on the screen for a while\u003c/span\u003e\n\n\u003c!-- you can even mix multiple events --\u003e\n\u003cspan v-touch:tap=\"tapHandler\" v-touch:longtap=\"longtapHandler\" v-touch:swipe.left=\"swipeLeftHandler\" v-touch:press=\"startHandler\" v-touch:release=\"endHandler\" v-touch:swipe.right=\"swipeRightHandler\"\u003eMix Multiple Events\u003c/span\u003e\n\n\u003c!-- using different options for specified element --\u003e\n\u003cspan v-touch:tap=\"tapHandler\" v-touch-options=\"{touchClass: 'active', swipeTolerance: 80, touchHoldTolerance: 300}\"\u003eDifferent options\u003c/span\u003e\n\n\u003c!-- customize touch effects by CSS class --\u003e\n\u003cspan v-touch:tap=\"tapHandler\" v-touch-class=\"active\"\u003eCustomize touch class\u003c/span\u003e\n\u003c!-- or --\u003e\n\u003cspan v-touch:tap=\"tapHandler\" v-touch-options=\"{touchClass: 'active'}\"\u003eCustomize touch class\u003c/span\u003e\n\n\u003c!-- zoom in --\u003e\n\u003cspan v-touch:zoom.in=\"zoomInHandler\"\u003eUse multi-touch to zoom in\u003c/span\u003e\n\n\u003c!-- zoom out --\u003e\n\u003cspan v-touch:zoom.out=\"zoomOutHandler\"\u003eUse multi-touch to zoom out\u003c/span\u003e\n```\n\n\n## Usage\n\n### Simple callback\n\nIf you simply want to execute a callback function on a `v-touch` event, use this pattern:\n\n```html\n\u003cdiv v-touch:tap=\"onTapItem\"\u003eButton\u003c/div\u003e\n```\n\n```js\nmethods: {\n\tonTapItem(mouseEvent) { // you can remove the `mouseEvent` argument\n\t\tconsole.log(\"Tapped!\");\n\t},\n},\n```\n\n### Passing parameters to the event handler\n\nIf you want to add extra parameters to your `v-touch` event handler, you need to return a delegate in the event handler. You can pass as many attributes as you need.\n\n```html\n\u003cdiv v-for=\"(item, i) in items\"\u003e\n\t\u003cdiv v-touch:swipe=\"onSwipeItem(item, i)\"\u003eButton\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nmethods: {\n\tonSwipeItem(item, i) {\n\t\treturn function (direction, mouseEvent) {\n\t\t\tconsole.log(\"Swiped item \", i, \": \", item, \" in direction \", direction);\n\t\t};\n\t},\n},\n```\n\n\n\n\n## Touch and Tap\n\n![Events](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/anim-tap.gif)\n\nThese events are provided by this library. **Most of these work on Desktop \u0026 Mobile.**\n\n| Event \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;     | Behaviour          |\n| ---------------------------------------------------- | ------------------ |\n|  `v-touch`\u003cbr\u003e `v-touch:tap` | **Desktop:** Triggered when the user clicks on the element (press and release). \u003cbr\u003e **Mobile:** Triggered when the user taps on the element (tap and release)      |\n| `v-touch:longtap` | **Desktop:** Triggered when the user holds on the element for `longTapTimeInterval` MS and then releases it (press and release). \u003cbr\u003e **Mobile:** Triggered when the user taps and holds on the element for `longTapTimeInterval` MS and then releases it (tap and release)      |\n| `v-touch:hold`              | Triggered when the user holds the mouse button down for `touchHoldTolerance` MS while over the element (press and hold). \u003cbr\u003e This will be triggered before your finger is released, similar to what native mobile apps do.    |\n| `v-touch:rollover`                | **Desktop only:** Triggered when the user moves his mouse over the element. \u003cbr\u003e This event is throttled to prevent too many events per second. \u003cbr\u003e This event will fire every `rollOverFrequency` MS.  |\n\n### Tap Settings\n\nThese settings can be optionally specified in the [Global Config](#global-configuration) or [Object Config](#v-touch-options). If they are not specified, defaults are used.\n\n| Setting                | Units        | Comment                                                                 |\n|------------------------|--------------|-------------------------------------------------------------------------|\n| `touchHoldTolerance`    | milliseconds | The timeout for a `hold` event. **Default:** `400` MS                   |\n| `longTapTimeInterval`   | milliseconds | The minimum time interval to detect whether long tap event effective or not. **Default:** `400` MS |\n| `rollOverFrequency`     | milliseconds | How often should `rollover` events be fired. **Default:** `100` MS (10 times a second) |\n\n### System events\n\nThese are the default interactivity events supported by vue.js 3.x.\n\n* You do not need to install this library to use them.\n* They are always available for your usage alongside this library.\n* The system default `mousemove` event is similar to `v-touch:rollover`, however the system event is not throttled and it will trigger hundreds of times per second, potentially crashing your application if any logic is performed in the event handler\n\n**[Desktop devices](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent):**\n- `v-on:click` - Triggered when the user presses and releases the element.\n- `v-on:mousedown` - Triggered when the user presses the element.\n- `v-on:mousemove` - Triggered when the user moves the mouse over the element.\n- `v-on:mouseup` - Triggered when the user presses and releases the element.\n- `v-on:mouseenter` - Triggered when the user moves his mouse into the element.\n- `v-on:mouseleave` - Triggered when the user moves his mouse away from the element.\n\n**[Mobile devices](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events):**\n- `v-on:touchstart` - Triggered when the user presses the element.\n- `v-on:touchmove` - Triggered when the user presses and drags over the element.\n- `v-on:touchcancel` - Triggered when the user presses the element, and releases outside the element, thereby cancelling his tap.\n- `v-on:touchend` - Triggered when the user taps the element (press and release).\n\n\n\n\n## Drag and Drop\n\n![Events](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/anim-drag.gif)\n\nThese drag-and-drop events are provided by this library. **All these work on Desktop \u0026 Mobile.**\n\n| \u003cdiv style=\"width:170px\"\u003eEvent\u003c/div\u003e     | Behaviour          |\n| ---------------------------------------- | ------------------ |\n| `v-touch:press`              | **Desktop:** Triggered when the user presses the element (mouse down). \u003cbr\u003e **Mobile:** Triggered when the user taps the element without releasing.    |\n| `v-touch:drag.once`              | Triggered when the user presses and drags the element. \u003cbr\u003e Only fired once, the moment the user first drags on the element.   |\n| `v-touch:drag`             | Triggered when the user presses and drags the element. \u003cbr\u003e Fired every time the mouse moves while dragging the element.  \u003cbr\u003e This event is throttled to prevent too many events per second. \u003cbr\u003e  This event will fire every `dragFrequency` MS. Normally only fired when the mouse is **within** the element, but you can set `dragOutside` to fire it when the mouse is dragged **outside** the element too.   |\n| `v-touch:release`                | **Desktop:** Triggered when the user releases the element (mouse up). \u003cbr\u003e **Mobile:** Triggered when the user taps and releases the element.  |\n\n### Drag Settings\n\nThese settings can be optionally specified in the [Global Config](#global-configuration) or [Object Config](#v-touch-options). If they are not specified, defaults are used.\n\n| Setting          | Units        | Comment                                                                |\n|------------------|--------------|------------------------------------------------------------------------|\n| `tapTolerance`   | pixels       | How many pixels the user must drag on the element for it to register as a `tap` event. **Default:** `10` pixels. |\n| `dragFrequency`  | milliseconds | How often should `drag` events be fired. **Default:** `10` MS (100 times a second). |\n| `dragOutside`    | boolean      | If the `drag` event should be fired when the mouse is dragged outside the object as well. Useful to implement drag-and-drop behaviour when the object being moved is the same element you have added `v-touch` events on. **Default:** `false` |\n\n\n\n\n## Swipe\n\nThese swiping events are provided by this library. **All these work on Desktop \u0026 Mobile.**\n\n| Gesture | Event     | Behaviour          |\n| ----------- | -------- | ------------------ |\n| ![Pic](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/gestures0005.png) | `v-touch:swipe`              | Triggered when the user drags on the element (swipe). \u003cbr\u003e It will detect the direction of the swipe and send it to your callback. \u003cbr\u003e First argument of the callback must be `direction` attribute, which can be `left`, `right`, `top` or `bottom`. \u003cbr\u003e Example callback: `onSwipe(direction){ ... }` |\n| ![Pic](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/gestures0004.png) | `v-touch:swipe.left` | Triggered when the user drags on the element within the left cone. |\n| ![Pic](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/gestures0003.png) | `v-touch:swipe.right` | Triggered when the user drags on the element within the right cone. |\n| ![Pic](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/gestures0001.png) | `v-touch:swipe.top` | Triggered when the user drags on the element within the top cone. |\n|![Pic](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/gestures0002.png) |  `v-touch:swipe.bottom` | Triggered when the user drags on the element within the bottom cone. |\n\n### Swipe Settings\n\nThese settings can be optionally specified in the [Global Config](#global-configuration) or [Object Config](#v-touch-options). If they are not specified, defaults are used.\n\n| Setting          | Units        | Comment                                                                |\n|------------------|--------------|------------------------------------------------------------------------|\n| `swipeTolerance` | pixels     | How many pixels the user must drag on the element for it to register as a `swipe` event. **Default:** `100` pixels. |\n| `swipeConeSize`  | number (0-1) | How wide should the \"swipe cone\" be. The wider the cone, the more off-axis gestures are considered as swipes. **Default:** `0.75` |\n\n\n![Cone](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/swipe-cone.png)\n\n\n\n\n\n## Zoom\n\nThese zooming events are provided by this library. **These are mobile-only as they require multi-touch (at least 2 fingers) to trigger.**\n\n| Gesture | Event     | Behaviour          |\n| ----------- | -------- | ------------------ |\n| ![Pic](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/gestures0008.png) | `v-touch:zoom`                | **Mobile only:** Triggered when the user presses 2 fingers down and moves them inward or outward. This event is continuously fired as the user is zooming. \u003cbr\u003e First argument of the callback will recieve the zoom factor. \u003cbr\u003e Example callback: `onZoom(zoomFactor){ ... }` |\n| ![Pic](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/gestures0006.png) | `v-touch:zoom.in`                | **Mobile only:** Triggered when the user presses 2 fingers down and moves them towards each other (the normal \"zoom in\" gesture) |\n| ![Pic](https://github.com/robinrodricks/vue3-touch-events/raw/master/images/gestures0007.png) | `v-touch:zoom.out`                | **Mobile only:** Triggered when the user presses 2 fingers down and moves them away from each other (the normal \"zoom out\" gesture) |\n\n### Zoom Settings\n\nThese settings can be optionally specified in the [Global Config](#global-configuration) or [Object Config](#v-touch-options). If they are not specified, defaults are used.\n\n| Setting          | Units        | Comment                                                                |\n|------------------|--------------|------------------------------------------------------------------------|\n| `zoomFrequency`     | milliseconds | How often should `zoom` / `zoom.in` / `zoom.out` events be fired. **Default:** `10` MS (100 times a second). |\n| `zoomDistance`      | pixels       | How many pixels should the user move their fingers to trigger a `zoom` event. **Default:** `10` |\n| `zoomInOutDistance` | pixels       | How many pixels should the user move their fingers to trigger a `zoom.in` or `zoom.out` event. **Default:** `100` |\n\n\n\n\n\n## Options\n\nThese additional directives can be added to each element.\n\n### v-touch-options\n\n`v-touch-options` directive allows you set a different configuration for a specified component. It will override global configurations.\n\n### v-touch-class\n\n`v-touch-class` directive allows you automatically add a class when the element is rolled over (desktop) or tapped (mobile). It overrides the class specified in the global config option `touchClass`.\n\n- By default the `touchClass` is added when the element is pressed (`mousedown`), and removed when the element is released (`mouseup`).\n- If desktop events are enabled (`disableClick: false`), then the `touchClass` is added on roll over (`mouseenter`) and roll out (`mouseleave`) as well.\n- You can use this instead of `:active` and `:hover` pseudo classes, as it works on both desktop and mobile\n\nBehaviour:\n\n\u003ctable\u003e\n\t\u003ctr\u003e\n\t\t\u003cth\u003eDevice\u003c/th\u003e\n\t\t\u003cth\u003eEvent name\u003c/th\u003e\n\t\t\u003cth\u003eEffect\u003c/th\u003e\n\t\t\u003cth\u003eCondition\u003c/th\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd rowspan=\"2\"\u003eDesktop only\u003c/td\u003e\n\t\t\u003ctd\u003eMouse enter (roll over)\u003c/td\u003e\n\t\t\u003ctd\u003e`touchClass` added\u003c/td\u003e\n\t\t\u003ctd\u003edesktop events must be enabled\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eMouse leave (roll out)\u003c/td\u003e\n\t\t\u003ctd\u003e`touchClass` removed\u003c/td\u003e\n\t\t\u003ctd\u003edesktop events must be enabled\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd rowspan=\"2\"\u003eMobile only\u003c/td\u003e\n\t\t\u003ctd\u003eMouse down (press)\u003c/td\u003e\n\t\t\u003ctd\u003e`touchClass` added\u003c/td\u003e\n\t\t\u003ctd\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eMouse up (release)\u003c/td\u003e\n\t\t\u003ctd\u003e`touchClass` removed\u003c/td\u003e\n\t\t\u003ctd\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\nFor example:\n\n```html\n\u003cspan v-touch:tap=\"touchHandler\" v-touch-class=\"'active'\"\u003eTap Me\u003c/span\u003e\n```\n\nNow, when you press the element, it will add an extra `active` class automatically, and when you release the element the class will be removed.\n\nSo that you can use this feature to instead of `:active` and `:hover` pseudo class, for a better user experience.\n\n```css\n/* before */\nspan:active,\nspan:hover {\n\tbackground: green;\n}\n\n/* now, you can write like this */\nspan.active {\n\tbackground: green;\n}\n```\n\n\n## Global configuration\n\n```js\nVue.use(Vue3TouchEvents, {\n\tdisableClick: false, ...\n});\n```\n\nGeneral settings:\n\n| Name           | Units    | Comment                                                                                               |\n|----------------|----------|-------------------------------------------------------------------------------------------------------|\n| `disableClick` | boolean  | Whether to disable desktop events. **Default:** `false`. \u003cbr\u003e Keep the default value or `false` if your application is used on desktop and mobile devices. \u003cbr\u003e If your application is only for mobile use, set this to `true` to get a better user experience, because it can resolve some touch pass-through issues encountered on mobile devices.                                              |\n| `touchClass`   | string   | Which CSS class to add while an element is rolled over (desktop) or tapped (mobile). **Default:** `''`. \u003cbr\u003e This is a global config, and you can use `v-touch-class` directive to override this setting for a single element. |\n| `namespace`    | string   | Allows you to customize which Vue namespace this plugin uses. The default namespace is `touch` which adds the Vue directives: `touch`, `touch-class` and `touch-options`. Changing it to another value, for example `yolo`, would add the Vue directives: `yolo`, `yolo-class` and `yolo-options`.   |\n\n\n\n## Migration from Vue 2.x\n\nSome events have been renamed from the vue 2.x version of this library, in order to expose a cleaner, more consistant and more descriptive naming scheme.\n\n| Old event name               | New event name      |\n| ---------------------------- | ------------------- |\n| `v-touch:touchhold`          | `v-touch:hold`      |\n| `v-touch:start`              | `v-touch:press`     |\n| `v-touch:end`                | `v-touch:release`   |\n| `v-touch:moved`              | `v-touch:drag.once` |\n| `v-touch:moving`             | `v-touch:drag`      |\n\n\n\n## Building from Source\n\n1. First install `bun` on your system. Node is not required.\n2. Run these commands:\n\n```\nbun install\nbun run build\n```\n\n## Credits\n\n- Credits go to Jerry Bendy for creating the original project [vue2-touch-events](https://github.com/jerrybendy/vue-touch-events)\n- Special thanks to Xavier Julien for creating the [Vue 3.x port](https://github.com/XjulI1/vue-touch-events/tree/migrate-to-vuejs-3)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinrodricks%2Fvue3-touch-events","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobinrodricks%2Fvue3-touch-events","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinrodricks%2Fvue3-touch-events/lists"}