I am attempting to implement a custom cursor feature in Vue 3, but unfortunately my code is not functioning as expected. Below you can find the code snippet I have been working on:
<template>
<div id="cursor" :style="cursorPoint"></div>
</template>
<style>
#cursor {
position: fixed;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: white;
top: 0;
left: 0;
z-index: 10000;
}
</style>
<script>
export default {
data() {
return {
x: 0,
y: 0,
}
},
methods: {
moveCursor(e) {
this.x = e.clientX - 15;
this.y = e.clientY - 15;
}
},
computed: {
transformStyle: `transform: translate(${this.x}px,${this.y}px)`
},
mounted() {
document.addEventListener("mousemove", this.moveCursor);
}
}
</script>
An error message that says the following appears in the console:
Uncaught TypeError: Cannot read properties of undefined (reading 'x')