Vue Cursor Fx is an animated cursor effect intended for interactive elements such as navigation – w/ VueJS – SSR compatible.

animated custom cursor css, cursor effects css, mouse cursor effects javascript, javascript change cursor to image, custom cursor html code, change mouse pointer

Other Vue/Nuxt plugins

• Vue Fake 3D Image effect
• Canvas 3D Generative Art
• Nuxt Prune HTML
• Vue CSS Doodle
• Nuxt APIs to file

How to make use of it:

Install and download:

# NPM
$ npm i @luxdamore/vue-cursor-fx

1. Import and register 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. Props available.

<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();

Props

Animated Custom Cursor Effects, Vue Cursor Fx Plugin/Github, javascript follow mouse effect

See Demo And Download

Official Website(LuXDAmore): Click Here

This superior jQuery/javascript plugin is developed by LuXDAmore. For extra advanced usage, please go to the official website.