@vueuse/gesture

🕹 Vue Composables making your app interactive

Usage no npm install needed!

<script type="module">
  import vueuseGesture from 'https://cdn.skypack.dev/@vueuse/gesture';
</script>

README

🕹 @vueuse/gesture

npm npm Netlify Status

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:

Credits

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

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

👋