{"id":12618,"library":"vue-use-gesture","title":"VueUse Gesture","description":"@vueuse/gesture is a comprehensive collection of Vue Composables designed to provide robust and interactive gesture support for Vue applications. It offers a suite of hooks for various pointer and touch gestures, including `useDrag`, `useMove`, `useHover`, `useScroll`, `useWheel`, `usePinch`, and a generic `useGesture` for handling multiple interactions simultaneously. The library is currently stable at version `2.0.0` (last published approximately two years ago) and is an active part of the broader VueUse ecosystem. Its key differentiators include seamless compatibility with both Vue 2 and Vue 3 environments via `vue-demi`, offering both composable function-based and directive-based (e.g., `v-drag`) APIs. It is a direct port of the well-known `react-use-gesture` library, bringing similar declarative and powerful animation possibilities to the Vue ecosystem, and is explicitly designed to integrate smoothly with animation libraries like `@vueuse/motion`.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/koca/vue-use-gesture","tags":["javascript","vue","editor","code editor","prism","typescript"],"install":[{"cmd":"npm install vue-use-gesture","lang":"bash","label":"npm"},{"cmd":"yarn add vue-use-gesture","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-use-gesture","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Vue 2 support when using composables.","package":"@vue/composition-api","optional":false},{"reason":"Core Vue runtime; supports Vue 2 and 3.","package":"vue","optional":false}],"imports":[{"note":"Main composable for drag gestures. The package was re-homed from 'vue-use-gesture' to '@vueuse/gesture'.","wrong":"import { useDrag } from 'vue-use-gesture'","symbol":"useDrag","correct":"import { useDrag } from '@vueuse/gesture'"},{"note":"A powerful composable for handling multiple gestures simultaneously with a single hook.","symbol":"useGesture","correct":"import { useGesture } from '@vueuse/gesture'"},{"note":"For directive usage (e.g., `<div v-drag>`), you must globally or component-locally register the `DragDirective`.","wrong":"import { vDrag } from '@vueuse/gesture'","symbol":"v-drag (directive)","correct":"import { DragDirective } from '@vueuse/gesture'; app.directive('drag', DragDirective);"},{"note":"Composable for handling multi-touch pinch gestures.","symbol":"usePinch","correct":"import { usePinch } from '@vueuse/gesture'"}],"quickstart":{"code":"<template>\n  <!-- Bind it to a component -->\n  <div v-bind=\"bind()\" :style=\"style\" class=\"box\"></div>\n</template>\n\n<script lang=\"ts\">\n  import { useDrag } from '@vueuse/gesture'\n  import { useSpring } from 'vue-use-spring'\n  import { defineComponent, computed } from 'vue'\n\n  export default defineComponent({\n    setup() {\n      const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }))\n\n      // Set the drag hook and define component movement based on gesture data\n      const bind = useDrag(({ down, movement: [mx, my] }) => {\n        set({ x: down ? mx : 0, y: down ? my : 0 })\n      })\n\n      const style = computed(() => ({\n        transform: `translate3d(${x.value}px,${y.value}px,0)`,\n        touchAction: 'none' // Crucial for preventing browser native scrolling glitches\n      }))\n\n      return { bind, style }\n    },\n  })\n</script>\n\n<style scoped>\n.box {\n  width: 100px;\n  height: 100px;\n  background: #42b983;\n  border-radius: 8px;\n  cursor: grab;\n  user-select: none;\n}\n.box:active {\n  cursor: grabbing;\n}\n</style>","lang":"typescript","description":"Demonstrates a basic draggable element using the `useDrag` composable, integrating with `vue-use-spring` for smooth animation and including the essential `touch-action` CSS property."},"warnings":[{"fix":"Update your package.json to `@vueuse/gesture` and adjust import paths accordingly. E.g., `npm install @vueuse/gesture` or `yarn add @vueuse/gesture`.","message":"The original `vue-use-gesture` package by koca has been superseded and re-homed under the VueUse organization as `@vueuse/gesture`. Ensure you are installing and importing from the `@vueuse/gesture` package.","severity":"breaking","affected_versions":">=1.x"},{"fix":"Add `touch-action: none;` to the CSS of your draggable element, or apply it via inline style as shown in the quickstart example.","message":"When creating draggable elements, it is crucial to set the `touch-action` CSS property to `none` (or specific axes like `pan-x`, `pan-y`) on the draggable element. Failing to do so can cause conflicts with native browser scrolling on touch devices, leading to unexpected behavior or glitches.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install `@vue/composition-api` (`npm install @vue/composition-api`) and ensure it's registered with Vue (e.g., `Vue.use(VueCompositionAPI)`).","message":"For Vue 2 projects, `@vueuse/gesture` requires `@vue/composition-api` to be installed and correctly set up for the composables to function.","severity":"gotcha","affected_versions":"<3.0.0"},{"fix":"Import the specific directive (e.g., `DragDirective`) and register it: `import { DragDirective } from '@vueuse/gesture'; app.directive('drag', DragDirective);`.","message":"If you intend to use the gesture directives (e.g., `v-drag`, `v-pinch`), they must be explicitly registered either globally via `app.directive()` (Vue 3) or `Vue.directive()` (Vue 2), or locally within components.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change the import path to `@vueuse/gesture`: `import { useDrag } from '@vueuse/gesture'`.","cause":"Attempting to import from the old, unmaintained package name `vue-use-gesture`.","error":"Failed to resolve import \"vue-use-gesture\" from \"src/components/MyComponent.vue\". Does the file exist?"},{"fix":"Globally register the `DragDirective` at your app's entry point: `import { DragDirective } from '@vueuse/gesture'; app.directive('drag', DragDirective);`.","cause":"The `v-drag` directive was used without being registered with the Vue application.","error":"[Vue warn]: Failed to resolve component: v-drag\nIf this is a custom element, make sure to add it to GlobalComponents property."},{"fix":"For Vue 2, ensure `@vue/composition-api` is installed and registered. Ensure all `use*` hooks are called directly within the `setup` function of a component.","cause":"Attempting to use `@vueuse/gesture` composables in a Vue 2 project without installing `@vue/composition-api`, or using them outside a `setup` function context.","error":"[Vue warn]: inject() can only be used inside setup() or functional components."}],"ecosystem":"npm"}