useMouse

Demo

x: 0
y: 0
sourceType: null

Basic Usage

import { useMouse } from '@vueuse/core'

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

import { useMouse } from '@vueuse/core'

const { x, y, sourceType } = 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 })

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

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html

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

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

Type Declarations

typescript

export interface UseMouseOptions
  extends ConfigurableWindow,
    ConfigurableEventFilter {
  /**
   * Mouse position based by page, client, or relative to previous position
   *
   * @default 'page'
   */
  type?: "page" | "client" | "movement"
  /**
   * Listen to `touchmove` events
   *
   * @default true
   */
  touch?: boolean
  /**
   * Reset to initial value when `touchend` event fired
   *
   * @default false
   */
  resetOnTouchEnds?: boolean
  /**
   * Initial values
   */
  initialValue?: Position
}
export type MouseSourceType = "mouse" | "touch" | null
/**
 * Reactive mouse position.
 *
 * @see https://vueuse.org/useMouse
 * @param options
 */
export declare function useMouse(options?: UseMouseOptions): {
  x: Ref<number>
  y: Ref<number>
  sourceType: Ref<MouseSourceType>
}
export type UseMouseReturn = ReturnType<typeof useMouse>

export interface UseMouseOptions
  extends ConfigurableWindow,
    ConfigurableEventFilter {
  /**
   * Mouse position based by page, client, or relative to previous position
   *
   * @default 'page'
   */
  type?: "page" | "client" | "movement"
  /**
   * Listen to `touchmove` events
   *
   * @default true
   */
  touch?: boolean
  /**
   * Reset to initial value when `touchend` event fired
   *
   * @default false
   */
  resetOnTouchEnds?: boolean
  /**
   * Initial values
   */
  initialValue?: Position
}
export type MouseSourceType = "mouse" | "touch" | null
/**
 * Reactive mouse position.
 *
 * @see https://vueuse.org/useMouse
 * @param options
 */
export declare function useMouse(options?: UseMouseOptions): {
  x: Ref<number>
  y: Ref<number>
  sourceType: Ref<MouseSourceType>
}
export type UseMouseReturn = ReturnType<typeof useMouse>