VueUse
x: 0
'y': 0
sourceType: null

useMouse

Reactive mouse position

Basic Usage

import { useMouse } from '@vueuse/core'

const { x, y, source } = useMouse()

Touch is enabled by default. To only detect mouse changes, set touch to false. The dragover event is used to track mouse position while dragging.

const { x, y } = useMouse({ touch: false })

Component

<UseMouse v-slot="{ x, y }">
  x: {{ x }}
  y: {{ y }}
</UseMouse>

Type Declarations

export interface MouseOptions extends ConfigurableWindow {
  /**
   * Listen to `touchmove` events
   *
   * @default true
   */
  touch?: boolean
  /**
   * Reset to initial value when `touchend` event fired
   *
   * @default false
   */
  resetOnTouchEnds?: boolean
  /**
   * Initial values
   */
  initialValue?: {
    x: number
    y: number
  }
}
export declare type MouseSourceType = "mouse" | "touch" | null
/**
 * Reactive mouse position.
 *
 * @see /useMouse
 * @param options
 */
export declare function useMouse(options?: MouseOptions): {
  x: Ref<number>
  y: Ref<number>
  sourceType: Ref<MouseSourceType>
}
export declare type UseMouseReturn = ReturnType<typeof useMouse>

Source

Source • Demo • Docs