Vue Glow

Add a mouse-tracing glow effect to Vue components.


Nuxt 3 Plugin also available:


Install the package using your favorite package manager:

pnpm i @aksharahegde/vue-glow


  1. Add the @aksharahegde/vue-glow plugin to your src/main.js

import VueGlow from '@aksharahegde/vue-glow'
  1. Add the tailwind plugin to unlock the glow: variant and glow color


module.exports = {
  plugins: [

As with all colors in Tailwind, you may add opacity by appending a percentage after the color, such as bg-glow/20 for 20% opacity.

  1. Wrap any number of <GlowElement> components in a <GlowCapture> which will be used to track the mouse location.

    <span>This won't glow</span>
    <GlowElement color="purple">
      <p class="text-black glow:text-glow/50 glow:bg-red-100">
        This will glow purple when the mouse is passed over

Children of <GlowElement> can style themselves how to look when glowing. You might choose to leave some children unchanged, or highlight them with the glow: variant style.

The value of color will be available as a CSS variable --glow-color, as well as the Tailwind glow color. You can pass any valid CSS color, including hsl() values etc. Of course, you might choose to use any other color; you can leave out the color prop entirely.



View Github