# Mouse Position
This API provides access to the x
and y
of the mouse cursor position.
# State
The useMousePosition
function exposes the following reactive state:
import { useMousePosition } from 'vue-use-web';
const { x, y } = useMousePosition();
State | Type | Description |
---|---|---|
x | Number | The mouse cursor position along the x-axis. |
y | Number | The mouse cursor position along the y-axis. |
Note!
By default the updates the state are throttled by 100ms to keep things snappy but you can configure that.
# Config
useMousePosition
function takes an options object as an optional parameter.
import { useMousePosition } from 'vue-use-web';
const { x, y } = useMousePosition();
# Example
<template>
<div>x: {{ x }} y: {{ y }}</div>
</template>
<script>
// import { ref } from "@vue/composition-api";
import { useMousePosition } from 'vue-use-web';
export default {
setup() {
const { x, y } = useMousePosition();
return { x, y };
}
};
</script>
# Demo
Credits: Codepen by Chuloo