usePointer

Basic Usage

import { usePointer } from '@vueuse/core'

const { x, y, pressure, pointerType } = usePointer()

By default, the component will track the pointer on window

vue

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

To track local position in the element, set target="self":

vue

<template>
  <UsePointer v-slot="{ x, y }" target="self">
    x: {{ x }} y: {{ y }}
  </UsePointer>
</template>