1---
2category: Sensors
3---
4 
5# useMouse
6 
7Reactive mouse position
8 
9## Basic Usage
10 
11```ts twoslash
12import { useMouse } from '@vueuse/core'
13 
14const { x, y, sourceType } = useMouse()
15```
16 
17Touch is enabled by default. To only detect mouse changes, set `touch` to `false`.
18The `dragover` event is used to track mouse position while dragging.
19 
20```ts twoslash
21import { useMouse } from '@vueuse/core'
22// ---cut---
23const { x, y } = useMouse({ touch: false })
24```
25 
26## Custom Extractor
27 
28It's also possible to provide a custom extractor function to get the position from the event.
29 
30```ts twoslash
31import type { UseMouseEventExtractor } from '@vueuse/core'
32import { useMouse, useParentElement } from '@vueuse/core'
33 
34const parentEl = useParentElement()
35 
36const extractor: UseMouseEventExtractor = event => (
37  event instanceof MouseEvent
38    ? [event.offsetX, event.offsetY]
39    : null
40)
41 
42const { x, y, sourceType } = useMouse({ target: parentEl, type: extractor })
43```
44 
45## Component Usage
46 
47```vue
48<template>
49  <UseMouse v-slot="{ x, y }">
50    x: {{ x }}
51    y: {{ y }}
52  </UseMouse>
53</template>
54```
55 
56## Type Declarations
57 
58```ts
59export type UseMouseCoordType = "page" | "client" | "screen" | "movement"
60export type UseMouseSourceType = "mouse" | "touch" | null
61export type UseMouseEventExtractor = (
62  event: MouseEvent | Touch,
63) => [x: number, y: number] | null | undefined
64export interface UseMouseOptions
65  extends ConfigurableWindow, ConfigurableEventFilter {
66  /**
67   * Mouse position based by page, client, screen, or relative to previous position
68   *
69   * @default 'page'
70   */
71  type?: UseMouseCoordType | UseMouseEventExtractor
72  /**
73   * Listen events on `target` element
74   *
75   * @default 'Window'
76   */
77  target?: MaybeRefOrGetter<Window | EventTarget | null | undefined>
78  /**
79   * Listen to `touchmove` events
80   *
81   * @default true
82   */
83  touch?: boolean
84  /**
85   * Listen to `scroll` events on window, only effective on type `page`
86   *
87   * @default true
88   */
89  scroll?: boolean
90  /**
91   * Reset to initial value when `touchend` event fired
92   *
93   * @default false
94   */
95  resetOnTouchEnds?: boolean
96  /**
97   * Initial values
98   */
99  initialValue?: Position
100}
101export interface UseMouseReturn {
102  x: ShallowRef<number>
103  y: ShallowRef<number>
104  sourceType: ShallowRef<UseMouseSourceType>
105}
106/**
107 * Reactive mouse position.
108 *
109 * @see https://vueuse.org/useMouse
110 * @param options
111 */
112export declare function useMouse(options?: UseMouseOptions): UseMouseReturn
113```
114