1---
2category: Sensors
3---
4 
5# useSwipe
6 
7Reactive swipe detection based on [`TouchEvents`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent).
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useSwipe } from '@vueuse/core'
14import { useTemplateRef } from 'vue'
15 
16const el = useTemplateRef('el')
17const { isSwiping, direction } = useSwipe(el)
18</script>
19 
20<template>
21  <div ref="el">
22    Swipe here
23  </div>
24</template>
25```
26 
27## Type Declarations
28 
29```ts
30export type UseSwipeDirection = "up" | "down" | "left" | "right" | "none"
31export interface UseSwipeOptions extends ConfigurableWindow {
32  /**
33   * Register events as passive
34   *
35   * @default true
36   */
37  passive?: boolean
38  /**
39   * @default 50
40   */
41  threshold?: number
42  /**
43   * Callback on swipe start
44   */
45  onSwipeStart?: (e: TouchEvent) => void
46  /**
47   * Callback on swipe moves
48   */
49  onSwipe?: (e: TouchEvent) => void
50  /**
51   * Callback on swipe ends
52   */
53  onSwipeEnd?: (e: TouchEvent, direction: UseSwipeDirection) => void
54}
55export interface UseSwipeReturn {
56  isSwiping: ShallowRef<boolean>
57  direction: ComputedRef<UseSwipeDirection>
58  coordsStart: Readonly<Position>
59  coordsEnd: Readonly<Position>
60  lengthX: ComputedRef<number>
61  lengthY: ComputedRef<number>
62  stop: () => void
63}
64/**
65 * Reactive swipe detection.
66 *
67 * @see https://vueuse.org/useSwipe
68 * @param target
69 * @param options
70 */
71export declare function useSwipe(
72  target: MaybeRefOrGetter<EventTarget | null | undefined>,
73  options?: UseSwipeOptions,
74): UseSwipeReturn
75```
76