Documentation - Nuxt Glow

Nuxt Glow DocumentationA powerful Nuxt module that adds beautiful mouse-tracking glow effects to your components.Features🎯 Mouse-tracking glow effects🎨 Customizable glow colors and sizes🎭 Multiple glow elements support🔧 Debug mode for development⚡️ Performance optimized with requestAnimationFrame🎨 Tailwind CSS integrationInstallation

# Using pnpm
pnpm i @aksharahegde/nuxt-glow

# Using npm
npm install @aksharahegde/nuxt-glow

# Using yarn
yarn add @aksharahegde/nuxt-glow

SetupAdd the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["@aksharahegde/nuxt-glow"]
})

ComponentsGlowCaptureThe parent component that tracks mouse movement and manages the glow effect area.

<template>
  <GlowCapture>
    <!-- Your content here -->
  </GlowCapture>
</template>

PropsPropTypeDefaultDescriptionclassNamestring""Additional CSS classessizenumber400Size of the glow effect in pixelsrestobject{}Additional HTML attributesGlowElementThe component that creates the actual glow effect on its children.

<template>
  <GlowElement color="purple">
    <div class="p-4">
      Content with glow effect
    </div>
  </GlowElement>
</template>

PropsPropTypeDefaultDescriptionclassNamestring""Additional CSS classesstyleobject{}Additional CSS stylescolorstring"#f50057"Color of the glow effectdebugbooleanfalseEnable debug mode to show glow maskrestobject{}Additional HTML attributesUsage ExamplesBasic Usage

<template>
  <GlowCapture>
    <GlowElement>
      <div class="p-4 bg-white rounded-lg">
        Hover me to see the glow effect!
      </div>
    </GlowElement>
  </GlowCapture>
</template>

Custom Glow Color

<template>
  <GlowCapture>
    <GlowElement color="hsl(120, 100%, 50%)">
      <div class="p-4">
        Green glow effect
      </div>
    </GlowElement>
  </GlowCapture>
</template>

Multiple Glow Elements

<template>
  <GlowCapture>
    <div class="grid gap-4">
      <GlowElement color="red">
        <div class="p-4">
          Red glow
        </div>
      </GlowElement>
      <GlowElement color="blue">
        <div class="p-4">
          Blue glow
        </div>
      </GlowElement>
    </div>
  </GlowCapture>
</template>

With Tailwind Classes

<template>
  <GlowCapture>
    <GlowElement>
      <p class="text-black glow:text-glow/50 glow:bg-red-100">
        Text changes color and background on glow
      </p>
    </GlowElement>
  </GlowCapture>
</template>

Tailwind IntegrationAdd the Tailwind plugin to your tailwind.config.js:

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

This enables:glow: variant for styling elements when they're glowingglow color with opacity support (e.g., bg-glow/20)CSS VariablesThe module uses the following CSS variables that you can customize:

.glow-capture {
  --glow-size: 400px;  /* Default size */
}

.glow-element {
  --glow-color: #f50057;  /* Default color */
}

Debug ModeEnable debug mode to visualize the glow mask:

<template>
  <GlowCapture>
    <GlowElement :debug="true">
      <div class="p-4">
        Debug mode shows the glow mask
      </div>
    </GlowElement>
  </GlowCapture>
</template>

Best PracticesAlways wrap GlowElement components inside a GlowCaptureUse the glow: variant for styling elements during the glow effectAdd padding to the parent element to ensure the glow effect is visibleConsider using CSS variables for consistent themingUse debug mode during development to fine-tune the glow effectBrowser SupportThe module uses modern CSS features and is compatible with all modern browsers that support:CSS GridCSS VariablesCSS MasksPointer Events APIPerformanceThe module is optimized for performance using:requestAnimationFrame for smooth animationsPassive event listenersEfficient CSS maskingMinimal DOM updatesAdditional InformationPlugin for Vue 3 also available: Vue GlowYou can check downloads on NPM Chart.Contributing 🙏Contributions are welcome! Feel free to submit issues and pull requests.Contributing 🙏Clone this repositoryInstall dependencies using pnpm installRun npm run dev:prepare to generate type stubs.Use npm run dev to start playground in development mode.Once development is complete, create PR to this repository.AttributionModule is inspired by React Glow by CodaworksPlayground card is version of https://codepen.io/_rahul/pen/MWrozMX by rahulLicenseMIT