Add a mouse-tracing glow effect to Nuxt components
MIT License
Add a mouse-tracing glow effect to Nuxt components.
Demo: https://vueglow-demo.vercel.app/ Plugin for Vue 3 also available: Vue Glow
Install the package using your favorite package manager:
pnpm i @aksharahegde/nuxt-glow
@aksharahegde/nuxt-glow
plugin to your nuxt.config.ts
export default defineNuxtConfig({
modules: ["@aksharahegde/nuxt-glow"],
});
<GlowElement>
components in a <GlowCapture>
which will be used to track the mouse location.<template>
<GlowCapture>
<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
</p>
</GlowElement>
</GlowCapture>
</template>
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
tailwind.config.js
module.exports = {
...
plugins: [
require('@aksharahegde/nuxt-glow/tailwind')
]
}
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.
pnpm install
npm run dev:prepare
to generate type stubs.npm run dev
to start playground in development mode.