Navigation Menu

Skip to content


Repository files navigation

Nuxt Glow

Add a mouse-tracing glow effect to Nuxt components.


Plugin for Vue 3 also available: Vue Glow


Install the package using your favorite package manager:

pnpm i @aksharahegde/nuxt-glow


  1. Add the @aksharahegde/nuxt-glow plugin to your nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@aksharahegde/nuxt-glow"],
  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.


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.

Contributing 🙏

  1. Clone this repository
  2. Install dependencies using pnpm install
  3. Run npm run dev:prepare to generate type stubs.
  4. Use npm run dev to start playground in development mode.
  5. Once development is complete, create PR to this repository.