{"id":17967538,"url":"https://github.com/vueuse/gesture","last_synced_at":"2025-05-16T11:06:45.953Z","repository":{"id":45034149,"uuid":"343194978","full_name":"vueuse/gesture","owner":"vueuse","description":"🕹 Vue Composables making your app interactive","archived":false,"fork":false,"pushed_at":"2024-02-22T18:20:31.000Z","size":649,"stargazers_count":389,"open_issues_count":17,"forks_count":19,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-09T10:53:19.964Z","etag":null,"topics":["gesture","vue","vue-composables"],"latest_commit_sha":null,"homepage":"https://gesture.vueuse.org","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/vueuse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"docs/roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Tahul"]}},"created_at":"2021-02-28T19:28:21.000Z","updated_at":"2025-04-25T13:59:18.000Z","dependencies_parsed_at":"2023-01-22T02:48:46.129Z","dependency_job_id":"ebe103db-4097-4dd1-8534-3c4e61b9eb6d","html_url":"https://github.com/vueuse/gesture","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":"Tahul/vue-composable-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fgesture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fgesture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fgesture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fgesture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vueuse","download_url":"https://codeload.github.com/vueuse/gesture/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518383,"owners_count":22084374,"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":["gesture","vue","vue-composables"],"created_at":"2024-10-29T14:09:04.662Z","updated_at":"2025-05-16T11:06:40.922Z","avatar_url":"https://github.com/vueuse.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Tahul"],"categories":["TypeScript"],"sub_categories":[],"readme":"# 🕹 @vueuse/gesture\n\n[![npm](https://img.shields.io/npm/v/@vueuse/gesture.svg)](https://www.npmjs.com/package/@vueuse/gesture)\n[![npm](https://img.shields.io/npm/dm/@vueuse/gesture.svg)](https://npm-stat.com/charts.html?package=@vueuse/gesture)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/ab1db459-8420-4bc6-9fac-2bc247fa2385/deploy-status)](https://app.netlify.com/sites/vueuse-gesture/deploys)\n\n**Vue Composables** making your app **interactive**\n\n- 🚀 **Plug** \u0026 **play**\n- 🕹 **Mouse** \u0026 **Touch** support\n- 🎮 **Directives** support (**v-drag**, **v-pinch**, **v-move**...)\n- ✨ Written in **TypeScript**\n- ✅ Supports **Vue 2 \u0026 3** using [**vue-demi**](https://github.com/antfu/vue-demi)\n- 🤹 Plays well with [**vueuse/motion**](https://github.com/vueuse/motion) or **any other** animation solution\n\n[🌍 **Documentation**](https://gesture.vueuse.org)\n\n[👀 **Demos**](https://vueuse-gesture-demo.netlify.app)\n\n## Quick Start\n\nLet's **get started** quickly by **installing** the **package** and adding the **plugin**.\n\nFrom your **terminal**:\n\n```bash\npnpm add @vueuse/gesture\n```\n\nIn your **Vue** app **entry** file:\n\n```javascript\nimport { createApp } from 'vue'\nimport { GesturePlugin } from '@vueuse/gesture'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(GesturePlugin)\n\napp.mount('#app')\n```\n\nYou can now **interact** with any of your **component**, **HTML** or **SVG** elements using `v-drag` or any other **directive**.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv v-drag=\"dragHandler\" /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nconst dragHandler = (dragState) =\u003e {\n  // Do something with dragState\n}\n\u003c/script\u003e\n```\n\nTo see more about the **gestures** events **data**, check out [**Gesture State**](https://gesture.vueuse.org/gesture-state.html).\n\nTo see more about the **gestures** options, check out [**Gesture Options**](https://gesture.vueuse.org/gesture-options.html).\n\nAlso, here is a list of the available gestures:\n\n- [**Drag**](https://gesture.vueuse.org/use-drag.html)\n- [**Move**](https://gesture.vueuse.org/use-move.html)\n- [**Hover**](https://gesture.vueuse.org/use-hover.html)\n- [**Scroll**](https://gesture.vueuse.org/use-scroll.html)\n- [**Wheel**](https://gesture.vueuse.org/use-wheel.html)\n- [**Pinch**](https://gesture.vueuse.org/use-pinch.html)\n\n## Credits\n\nThis package is a **fork** [**react-use-gesture**](https://github.com/pmndrs/react-use-gesture) by [**pmndrs**](https://github.com/pmndrs).\n\nIf you **like** this package, consider **following me** on [**GitHub**](https://github.com/Tahul) and on [**Twitter**](https://twitter.com/yaeeelglx).\n\n👋\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueuse%2Fgesture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvueuse%2Fgesture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueuse%2Fgesture/lists"}