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

useMouse

Reactive mouse position

Basic Usage

import { useMouse } from '@vueuse/core'

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

Touching is enabled by default. To make it only detects mouse changes, set touch to false

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

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   {@link /useMouse}
 * @param options
 */
export declare function useMouse(
  options?: MouseOptions
): {
  x: Ref<number>
  y: Ref<number>
  sourceType: Ref<MouseSourceType>
}

Source

Source • Demo • Docs