Mouse-aware Glow Effect – Vue Glow

Install & Download:

pnpm i @aksharahegde/vue-glow

Description:

A Vue component that adds an interactive, mouse-aware glow effect to UI components when hovering over. Compatible with the latest TailwindCSS framework.

How to use it:

1. Import and register the Vue Glow plugin.

import VueGlow from '@aksharahegde/vue-glow'
Vue.use(VueGlow)

2. In your Tailwind configs:

module.exports = {
  ...
  plugins: [
    require("@aksharahegde/vue-glow/tailwind")
  ]
}

3. Add your glow elements into the GlowCapture component.

<template>
  <GlowCapture>
    <span>This won't glow</span>
    <GlowElement color="purple">
      ...
    </GlowElement>
  </GlowCapture>
</template>

4. Available props for the glow elements.

className: {
  type: String,
  default: "",
},
style: {
  type: Object,
  default: () => ({}),
},
color: {
  type: String,
  default: "#f50057",
},
debug: {
  type: Boolean,
  default: false,
},
rest: {
  type: Object,
  default: () => ({}),
},

5. Available props for the GlowCapture component.

className: {
  type: String,
  default: "",
},
size: {
  type: Number,
  default: 400,
},
rest: {
  type: Object,
  default: () => ({}),
},

Preview:

Changelog:

v1.2.0 (03/16/2024)

• Update