Skip to content
On this page

useMouse

Category
Export Size
1.29 kB
Last Changed
5 months ago

Reactive mouse position

Demo

x: 0
y: 0
sourceType: null

Basic Usage

js
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.

js
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 or client
   *
   * @default 'page'
   */
  type?: "page" | "client"
  /**
   * 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 declare 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 declare type UseMouseReturn = ReturnType<typeof useMouse>
export interface UseMouseOptions
  extends ConfigurableWindow,
    ConfigurableEventFilter {
  /**
   * Mouse position based by page or client
   *
   * @default 'page'
   */
  type?: "page" | "client"
  /**
   * 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 declare 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 declare type UseMouseReturn = ReturnType<typeof useMouse>

Source

SourceDemoDocs

Contributors

Anthony Fu
Jelf
lzdFeiFei
Scott Bedard
Marshall Thompson
Shinigami
wheat
Alex Kozack
Antério Vieira

Changelog

v8.9.3 on 7/14/2022
4d2c8 - fix!: rename type MouseOptions to UseMouseOptions (#1877)
v7.7.0 on 2/26/2022
3927d - feat: support eventFilter (#1261)
v7.2.0 on 12/8/2021
819f4 - feat: mouse position based by option.type (#993)

Released under the MIT License.