1---
2category: Elements
3---
4 
5# useMouseInElement
6 
7Reactive mouse position related to an element
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useMouseInElement } from '@vueuse/core'
14import { useTemplateRef } from 'vue'
15 
16const target = useTemplateRef('target')
17 
18const { x, y, isOutside } = useMouseInElement(target)
19</script>
20 
21<template>
22  <div ref="target">
23    <h1>Hello world</h1>
24  </div>
25</template>
26```
27 
28## Component Usage
29 
30```vue
31<template>
32  <UseMouseInElement v-slot="{ elementX, elementY, isOutside }">
33    x: {{ elementX }}
34    y: {{ elementY }}
35    Is Outside: {{ isOutside }}
36  </UseMouseInElement>
37</template>
38```
39 
40## Directive Usage
41 
42```vue
43<script setup lang="ts">
44import { vMouseInElement } from '@vueuse/components'
45import { UseMouseSourceType } from '@vueuse/core'
46 
47interface MouseInElementType {
48  x: number
49  y: number
50  sourceType: UseMouseSourceType
51  elementX: number
52  elementY: number
53  elementPositionX: number
54  elementPositionY: number
55  elementHeight: number
56  elementWidth: number
57  isOutside: boolean
58}
59 
60const options = {
61  handleOutside: true
62}
63function onMouseInElement({ x, y, sourceType, elementX, elementY, elementPositionX, elementPositionY, elementHeight, elementWidth, isOutside }: MouseInElementType) {
64  console.log(x, y, sourceType, elementX, elementY, elementPositionX, elementPositionY, elementHeight, elementWidth, isOutside)
65}
66</script>
67 
68<template>
69  <textarea v-mouse-in-element="onMouseInElement" />
70  <!-- with options -->
71  <textarea v-mouse-in-element="[onMouseInElement, options]" />
72</template>
73```
74 
75## Type Declarations
76 
77```ts
78export interface MouseInElementOptions extends UseMouseOptions {
79  /**
80   * Whether to handle mouse events when the cursor is outside the target element.
81   * When enabled, mouse position will continue to be tracked even when outside the element bounds.
82   *
83   * @default true
84   */
85  handleOutside?: boolean
86  /**
87   * Listen to window resize event
88   *
89   * @default true
90   */
91  windowScroll?: boolean
92  /**
93   * Listen to window scroll event
94   *
95   * @default true
96   */
97  windowResize?: boolean
98}
99export interface UseMouseInElementReturn extends UseMouseReturn {
100  elementX: ShallowRef<number>
101  elementY: ShallowRef<number>
102  elementPositionX: ShallowRef<number>
103  elementPositionY: ShallowRef<number>
104  elementHeight: ShallowRef<number>
105  elementWidth: ShallowRef<number>
106  isOutside: ShallowRef<boolean>
107  stop: () => void
108}
109/**
110 * Reactive mouse position related to an element.
111 *
112 * @see https://vueuse.org/useMouseInElement
113 * @param target
114 * @param options
115 */
116export declare function useMouseInElement(
117  target?: MaybeElementRef,
118  options?: MouseInElementOptions,
119): {
120  x: ShallowRef<number>
121  y: ShallowRef<number>
122  sourceType: ShallowRef<UseMouseSourceType>
123  elementX: ShallowRef<number, number>
124  elementY: ShallowRef<number, number>
125  elementPositionX: ShallowRef<number, number>
126  elementPositionY: ShallowRef<number, number>
127  elementHeight: ShallowRef<number, number>
128  elementWidth: ShallowRef<number, number>
129  isOutside: ShallowRef<boolean, boolean>
130  stop: () => void
131}
132```
133