├── CustomCursor.vue
├── README.md
└── vue-custom-cursor.gif


/CustomCursor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="custom-cursor">
  3 |     <div class="custom-cursor__circle" :style="circleStyle" ref="customCursorCircle"></div>
  4 |     <div class="custom-cursor__dot" :style="dotStyle" ref="customCursorDot"></div>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | export default {
 10 |   name: "CustomCursor",
 11 |   props: {
 12 |     targets: Array,
 13 |     circleColor: String,
 14 |     circleColorHover: String,
 15 |     dotColor: String,
 16 |     dotColorHover: String,
 17 |     hoverSize: Number
 18 |   },
 19 |   data() {
 20 |     return {
 21 |       scale: 1,
 22 |       x: null,
 23 |       y: null,
 24 |       circlePosX: null,
 25 |       circlePosY: null,
 26 |       dotPosX: null,
 27 |       dotPosY: null,
 28 |       circleStyle: null,
 29 |       dotStyle: null
 30 |     };
 31 |   },
 32 |   methods: {
 33 |     customCursor(e) {
 34 |       // cursor pos
 35 |       this.x = e.clientX;
 36 |       this.y = e.clientY;
 37 | 
 38 |       // cursor circle
 39 |       const circle = this.$refs.customCursorCircle;
 40 |       this.circlePosX = this.x - circle.clientWidth / 2;
 41 |       this.circlePosY = this.y - circle.clientWidth / 2;
 42 | 
 43 |       // cursor circle
 44 |       const dot = this.$refs.customCursorDot;
 45 |       this.dotPosX = this.x - dot.clientWidth / 2;
 46 |       this.dotPosY = this.y - dot.clientHeight / 2;
 47 | 
 48 |       //change style when hovering on selected targets
 49 |       if (
 50 |         (this.targets.length > 0 &&
 51 |           this.targets.includes(e.target.tagName.toLowerCase())) ||
 52 |         this.targets.includes(e.target.className.toLowerCase())
 53 |       ) {
 54 |         this.scale = this.hoverSize;
 55 |         this.circleStyle = { borderColor: this.circleColorHover };
 56 |         this.dotStyle = { backgroundColor: this.dotColorHover };
 57 |       } else {
 58 |         this.scale = 1;
 59 |         this.circleStyle = { borderColor: this.circleColor };
 60 |         this.dotStyle = { backgroundColor: this.dotColor };
 61 |       }
 62 | 
 63 |       //move custom cursor
 64 |       circle.style.transform = `translate(${this.circlePosX}px,${this.circlePosY}px) scale(${this.scale})`;
 65 |       dot.style.transform = `translate(${this.dotPosX}px,${this.dotPosY}px)`;
 66 |     }
 67 |   },
 68 |   mounted() {
 69 |     window.addEventListener("mousemove", this.customCursor);
 70 |   }
 71 | };
 72 | </script>
 73 | 
 74 | <style lang="scss" scoped>
 75 | $ease: cubic-bezier(0.23, 1, 0.32, 1);
 76 | 
 77 | .custom-cursor {
 78 |   cursor: none;
 79 |   pointer-events: none;
 80 | }
 81 | .custom-cursor__circle {
 82 |   position: fixed;
 83 |   cursor: none;
 84 |   top: 0;
 85 |   left: 0;
 86 |   width: 34px;
 87 |   height: 34px;
 88 |   border: 1px solid #2f2f2f;
 89 |   border-radius: 50%;
 90 |   transform: translate(-100%, -100%);
 91 |   transition: transform 0.4s $ease;
 92 | }
 93 | 
 94 | .custom-cursor__dot {
 95 |   position: fixed;
 96 |   cursor: none;
 97 |   top: 1px;
 98 |   left: 1px;
 99 |   width: 5px;
100 |   height: 5px;
101 |   border-radius: 50%;
102 |   background-color: #2f2f2f;
103 |   transform: translate(-100%, -100%);
104 |   transition: transform 0.2s $ease;
105 | }
106 | </style>
107 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue-Custom-Cursor
 2 | 
 3 | Include the component in `App.vue`. Also, you might want to hide the default cursor in CSS like `* { cursor: none; }`.
 4 | 
 5 | ![alt text](https://raw.githubusercontent.com/hermanwikner/Vue-Custom-Cursor/master/vue-custom-cursor.gif)
 6 | 
 7 | ## Settings
 8 | 
 9 | | Props      | Type         | Description |
10 | | :------------- |:-------------|:-------------|
11 | | targets     | Array | Class-names and/or tag-names which should trigger the hover animation | 
12 | | circleColor | String | The color of the outer circle | 
13 | | dotColor | String | The color of the inner dot | 
14 | | circleColorHover | String | The color of the outer circle when hovering over a selected target | 
15 | | dotColorHover | String | The color of the inner dot when hovering over a selected target| 
16 | | hoverSize | Number | The size of the cursor when hovering over a selected target| 
17 | 
18 | ## Example 
19 | 
20 | ```js
21 |     <custom-cursor
22 |       :targets="['img', 'a', 'button', 'your-hover-class']"
23 |       :circleColor="'#fff'"
24 |       :circleColorHover="'#2f2f2f'"
25 |       :dotColor="'#2f2f2f'"
26 |       :dotColorHover="'lightgray'"
27 |       :hoverSize="1.8"
28 |     ></custom-cursor>
29 | ``` 
30 | 


--------------------------------------------------------------------------------
/vue-custom-cursor.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hermanwikner/vue-custom-cursor/06b187a3f4d5a2fac5749391525757a3b54f9408/vue-custom-cursor.gif


--------------------------------------------------------------------------------