On gists

Composable: useMouse

Vue.js

useMouse.js Raw #

import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}



// usage
<template>
  X: {{ x }} Y: {{ y }}
</template>
<script setup>
  import { useMouse } from './useMouse';
  const { x, y } = useMouse();
</script>


// with params = config
// Using an options object
const title = useTitle('A new title', { titleTemplate: '>> %s <<' });

// or with many params
const title = useTitle('A new title', '>> %s <<');


export function useMouse(options) {
  const {
    asArray = false,
    throttle = false,
  } = options;
  // ...
};