1---
2category: Sensors
3---
4 
5# usePointer
6 
7Reactive [pointer state](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events).
8 
9## Basic Usage
10 
11```ts
12import { usePointer } from '@vueuse/core'
13 
14const { x, y, pressure, pointerType } = usePointer()
15```
16 
17## Component Usage
18 
19By default, the component will track the pointer on `window`
20 
21```vue
22<template>
23  <UsePointer v-slot="{ x, y }">
24    x: {{ x }}
25    y: {{ y }}
26  </UsePointer>
27</template>
28```
29 
30To track local position in the element, set `target="self"`:
31 
32```vue
33<template>
34  <UsePointer v-slot="{ x, y }" target="self">
35    x: {{ x }} y: {{ y }}
36  </UsePointer>
37</template>
38```
39 
40## Type Declarations
41 
42```ts
43export interface UsePointerState extends Position {
44  pressure: number
45  pointerId: number
46  tiltX: number
47  tiltY: number
48  width: number
49  height: number
50  twist: number
51  pointerType: PointerType | null
52}
53export interface UsePointerOptions extends ConfigurableWindow {
54  /**
55   * Pointer types that listen to.
56   *
57   * @default ['mouse', 'touch', 'pen']
58   */
59  pointerTypes?: PointerType[]
60  /**
61   * Initial values
62   */
63  initialValue?: MaybeRef<Partial<UsePointerState>>
64  /**
65   * @default window
66   */
67  target?: MaybeRef<EventTarget | null | undefined> | Document | Window
68}
69export interface UsePointerReturn {
70  pressure: Ref<number>
71  pointerId: Ref<number>
72  tiltX: Ref<number>
73  tiltY: Ref<number>
74  width: Ref<number>
75  height: Ref<number>
76  twist: Ref<number>
77  pointerType: Ref<PointerType | null>
78  x: Ref<number>
79  y: Ref<number>
80  isInside: ShallowRef<boolean>
81}
82/**
83 * Reactive pointer state.
84 *
85 * @see https://vueuse.org/usePointer
86 * @param options
87 */
88export declare function usePointer(
89  options?: UsePointerOptions,
90): UsePointerReturn
91```
92