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
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:
This package is a fork react-use-gesture by pmndrs.
If you like this package, consider following me on GitHub and on Twitter.
๐