Animated Custom Cursor Effects For Vue.js – cursor-fx

An SSR compatible Vue component to create animated custom cursor effects for interactive elements like navigation.

How to use it:

1. Import and register the cursor-fx after installation.

// Globally
import { CursorFx } from '@luxdamore/vue-cursor-fx';
import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';
Vue.component(
  CursorFx.name,
  CursorFx
);
// Locally
import { CursorFx } from '@luxdamore/vue-cursor-fx';
  export default {
    components: {
      'cursor-fx': CursorFx,
    },
};
<style src="@luxdamore/vue-cursor-fx/dist/CursorFx.css"></style>
// As a plugin
import CursorFx from '@luxdamore/vue-cursor-fx';
import '@luxdamore/vue-cursor-fx/dist/CursorFx.css';
Vue.use(
  CursorFx
);

2. Available props.

<cursor-fx></cursor-fx>

disabled: {
  type: Boolean,
  default: false,
},
id: {
  type: String,
  default: 'cursor-fx',
},
config: {
  type: Object,
  default: () => {},
},
mixBlendMode: {
  type: String,
  default: null,
},
color: {
  type: String,
  default: '#333333',
},
colorHover: {
  type: String,
  default: '#333333',
},
outsideSize: {
  type: String,
  default: null,
},
insideSize: {
  type: String,
  default: null,
},
shape: {
  type: String,
  default: null,
},
delay: {
  type: [
    Number,
    String,
  ],
  default: 60,
},
forceCustomSlot: {
  type: Boolean,
  default: false,
},
allowOnMobile: {
  type: Boolean,
  default: false,
},
hideOutside: {
  type: Boolean,
  default: false,
},
hideInside: {
  type: Boolean,
  default: false,
},

3. Events.

@before-start="onBeforeStart"
@after-start="onAfterStart"
@ready="onReady"
@before-destroy="onBeforeDestroy"
@after-destroy="onAfterDestroy"

4. API methods.

// start
this.$refs.cursor.start();
// destroy
this.$refs.cursor.destroy();
// refresh
this.$refs.cursor.refresh();

Preview: