https://github.com/vueuse/gesture

🕹 Vue Composables making your app interactive
https://github.com/vueuse/gesture

gesture vue vue-composables

Last synced: about 19 hours ago
JSON representation

🕹 Vue Composables making your app interactive

• Host: GitHub
• URL: https://github.com/vueuse/gesture
• Owner: vueuse
• License: mit
• Created: 2021-02-28T19:28:21.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-02-22T18:20:31.000Z (12 months ago)
• Last Synced: 2024-10-29T15:49:09.837Z (3 months ago)
• Topics: gesture, vue, vue-composables
• Language: TypeScript
• Homepage: https://gesture.vueuse.org
• Size: 634 KB
• Stars: 362
• Watchers: 6
• Forks: 18
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Roadmap: docs/roadmap.md

Awesome Lists containing this project

• awesome - vueuse/gesture - 🕹 Vue Composables making your app interactive (TypeScript)
• awesome - vueuse/gesture - 🕹 Vue Composables making your app interactive (TypeScript)

README

        
# 🕹 @vueuse/gesture

[![npm](https://img.shields.io/npm/v/@vueuse/gesture.svg)](https://www.npmjs.com/package/@vueuse/gesture)

[![npm](https://img.shields.io/npm/dm/@vueuse/gesture.svg)](https://npm-stat.com/charts.html?package=@vueuse/gesture)

[![Netlify Status](https://api.netlify.com/api/v1/badges/ab1db459-8420-4bc6-9fac-2bc247fa2385/deploy-status)](https://app.netlify.com/sites/vueuse-gesture/deploys)

**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**](https://github.com/antfu/vue-demi)

- 🤹 Plays well with [**vueuse/motion**](https://github.com/vueuse/motion) or **any other** animation solution

[🌍 **Documentation**](https://gesture.vueuse.org)

[👀 **Demos**](https://vueuse-gesture-demo.netlify.app)

## Quick Start

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

From your **terminal**:

```bash

pnpm add @vueuse/gesture

```

In your **Vue** app **entry** file:

```javascript

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

```vue

  


const dragHandler = (dragState) => {

  // Do something with dragState

}

```

To see more about the **gestures** events **data**, check out [**Gesture State**](https://gesture.vueuse.org/gesture-state.html).

To see more about the **gestures** options, check out [**Gesture Options**](https://gesture.vueuse.org/gesture-options.html).

Also, here is a list of the available gestures:

- [**Drag**](https://gesture.vueuse.org/use-drag.html)

- [**Move**](https://gesture.vueuse.org/use-move.html)

- [**Hover**](https://gesture.vueuse.org/use-hover.html)

- [**Scroll**](https://gesture.vueuse.org/use-scroll.html)

- [**Wheel**](https://gesture.vueuse.org/use-wheel.html)

- [**Pinch**](https://gesture.vueuse.org/use-pinch.html)

## Credits

This package is a **fork** [**react-use-gesture**](https://github.com/pmndrs/react-use-gesture) by [**pmndrs**](https://github.com/pmndrs).

If you **like** this package, consider **following me** on [**GitHub**](https://github.com/Tahul) and on [**Twitter**](https://twitter.com/yaeeelglx).

👋