Registry / web-framework / vue-use-gesture

vue-use-gesture

library1.0.1jsnpmunverified

@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`.

web-framework

npm install vue-use-gesture

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-USE-GESTURE

vue-use-gesture

web-frameworkjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useDrag

✓ import { useDrag } from '@vueuse/gesture'

✗ import { useDrag } from 'vue-use-gesture'

Main composable for drag gestures. The package was re-homed from 'vue-use-gesture' to '@vueuse/gesture'.

useGesture

✓ import { useGesture } from '@vueuse/gesture'

A powerful composable for handling multiple gestures simultaneously with a single hook.

v-drag (directive)

✓ import { DragDirective } from '@vueuse/gesture'; app.directive('drag', DragDirective);

✗ import { vDrag } from '@vueuse/gesture'

For directive usage (e.g., `<div v-drag>`), you must globally or component-locally register the `DragDirective`.

usePinch

✓ import { usePinch } from '@vueuse/gesture'

Composable for handling multi-touch pinch gestures.

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.

<template>  <div v-bind="bind()" :style="style" class="box"></div> </template> <script lang="ts"> import { useDrag } from '@vueuse/gesture' import { useSpring } from 'vue-use-spring' import { defineComponent, computed } from 'vue' export default defineComponent({ setup() { const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 })) // Set the drag hook and define component movement based on gesture data const bind = useDrag(({ down, movement: [mx, my] }) => { set({ x: down ? mx : 0, y: down ? my : 0 }) }) const style = computed(() => ({ transform: `translate3d(${x.value}px,${y.value}px,0)`, touchAction: 'none' // Crucial for preventing browser native scrolling glitches })) return { bind, style } }, }) </script> <style scoped> .box { width: 100px; height: 100px; background: #42b983; border-radius: 8px; cursor: grab; user-select: none; } .box:active { cursor: grabbing; } </style>

Debug

Known issues

breakingThe 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.

fix

Update your package.json to `@vueuse/gesture` and adjust import paths accordingly. E.g., `npm install @vueuse/gesture` or `yarn add @vueuse/gesture`.

affects: >=1.x

gotchaWhen 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.

fix

Add `touch-action: none;` to the CSS of your draggable element, or apply it via inline style as shown in the quickstart example.

affects: >=1.0.0

gotchaFor Vue 2 projects, `@vueuse/gesture` requires `@vue/composition-api` to be installed and correctly set up for the composables to function.

fix

Install `@vue/composition-api` (`npm install @vue/composition-api`) and ensure it's registered with Vue (e.g., `Vue.use(VueCompositionAPI)`).

affects: <3.0.0

gotchaIf 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.

fix

Import the specific directive (e.g., `DragDirective`) and register it: `import { DragDirective } from '@vueuse/gesture'; app.directive('drag', DragDirective);`.

affects: >=1.0.0

Errors

Common errors & fixes

Failed to resolve import "vue-use-gesture" from "src/components/MyComponent.vue". Does the file exist?

Attempting to import from the old, unmaintained package name `vue-use-gesture`.

fix

Change the import path to `@vueuse/gesture`: `import { useDrag } from '@vueuse/gesture'`.

[Vue warn]: Failed to resolve component: v-drag If this is a custom element, make sure to add it to GlobalComponents property.

The `v-drag` directive was used without being registered with the Vue application.

fix

Globally register the `DragDirective` at your app's entry point: `import { DragDirective } from '@vueuse/gesture'; app.directive('drag', DragDirective);`.

[Vue warn]: inject() can only be used inside setup() or functional components.

Attempting to use `@vueuse/gesture` composables in a Vue 2 project without installing `@vue/composition-api`, or using them outside a `setup` function context.

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.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

@vue/composition-apirequiredRequired for Vue 2 support when using composables.

vuerequiredCore Vue runtime; supports Vue 2 and 3.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/koca/vue-use-gesture ↗

packagehttps://www.npmjs.com/package/vue-use-gesture ↗

homepagehttps://vueuse.org/gesture ↗