sf-vue-animated-cursor

Parameterizable animated cursor for vue 3.

Preview

Installing

npm install sf-vue-animated-cursor

Usage

Two things can be called from the plugin.

• basic cursor, which can be easily parameterized and with which you can build according to your own taste
• default cursor, which is a built-in cursor that can only set the target, teleportTo, watch properties

Options

• basic: if you want to use the built-in cursor instead of the basic cursor, you only need to specify ‘basic: false’ in the options

main.js

import { createApp } from 'vue'
import App from './App.vue'
import SfVueAnimatedCursor from 'sf-vue-animated-cursor'

const app = createApp(App)

app.use(SfVueAnimatedCursor, { basic: false });

app.mount('#app')

Then it can be placed anywhere, but make sure that the target value (by default #app) is valid.

Example

App.vue

<template lang="pug">

#app
    sf-vue-animated-cursor(
		target="#app"
		teleport-to="body"
  		@move="onMove"
  		@click="onClick"
  		@hover="onHover"
	)

</template>

Tip: With the teleport property, you can set where the cursor should be located in the html.

Props

All properties can be used only with the basic cursor. For the default cursor, you can only set the target, teleportTo, and watch properties.

Emits

License

Released under MIT by Schön Ferenc.

GitHub

View Github