useMouseInElement ​
Reactive mouse position related to an element
Demo ​
Hover me
x: 0
y: 0
sourceType: null
elementX: 0
elementY: 0
elementPositionX: 0
elementPositionY: 0
elementHeight: 0
elementWidth: 0
isOutside: true
Usage ​
html
<template>
<div ref="target">
<h1>Hello world</h1>
</div>
</template>
<script>
import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'
export default {
setup() {
const target = ref(null)
const { x, y, isOutside } = useMouseInElement(target)
return { x, y, isOutside }
}
}
</script>
<template>
<div ref="target">
<h1>Hello world</h1>
</div>
</template>
<script>
import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'
export default {
setup() {
const target = ref(null)
const { x, y, isOutside } = useMouseInElement(target)
return { x, y, isOutside }
}
}
</script>
Component Usage ​
This function also provides a renderless component version via the
@vueuse/components
package. Learn more about the usage.
html
<UseMouseInElement v-slot="{ elementX, elementY, isOutside }">
x: {{ elementX }}
y: {{ elementY }}
Is Outside: {{ isOutside }}
</UseMouseInElement>
<UseMouseInElement v-slot="{ elementX, elementY, isOutside }">
x: {{ elementX }}
y: {{ elementY }}
Is Outside: {{ isOutside }}
</UseMouseInElement>