🕹 @vueuse/gesture

Vue Composables making your app interactive

• 🚀 Plug & play
• 🕹 Mouse & Touch support
• 🎮 Directives support (v-drag, v-pinch, v-move...)
• ✨ Written in TypeScript
• ✅ Supports Vue 2 & 3 using vue-demi
• 🤹 Plays well with vueuse/motion or any other animation solution

🌍 Documentation

👀 Demos

Quick Start

Let's get started quickly by installing the package and adding the plugin.

From your terminal:

pnpm add @vueuse/gesture

In your Vue app entry file:

import { createApp } from 'vue'
import { GesturePlugin } from '@vueuse/gesture'
import App from './App.vue'

const app = createApp(App)

app.use(GesturePlugin)

app.mount('#app')

You can now interact with any of your component, HTML or SVG elements using v-drag or any other directive.

<template>
  <div v-drag="dragHandler" />
</template>

<script lang="ts">
const dragHandler = (dragState) => {
  // Do something with dragState
}
</script>

To see more about the gestures events data, check out Gesture State.

To see more about the gestures options, check out Gesture Options.

Also, here is a list of the available gestures:

• Drag
• Move
• Hover
• Scroll
• Wheel
• Pinch

Credits

This package is a fork react-use-gesture by pmndrs.

If you like this package, consider following me on GitHub and on Twitter.

👋