https://github.com/aksharahegde/nuxt-glow

Add a mouse-tracing glow effect to Nuxt components
https://github.com/aksharahegde/nuxt-glow

nuxt-module nuxt3 tailwindcss

Last synced: 3 days ago
JSON representation

Add a mouse-tracing glow effect to Nuxt components

• Host: GitHub
• URL: https://github.com/aksharahegde/nuxt-glow
• Owner: aksharahegde
• License: mit
• Created: 2023-12-22T09:35:45.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-25T16:04:27.000Z (30 days ago)
• Last Synced: 2025-01-14T02:08:23.120Z (10 days ago)
• Topics: nuxt-module, nuxt3, tailwindcss
• Language: Vue
• Homepage: https://vueglow-demo.vercel.app/
• Size: 579 KB
• Stars: 53
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Peerlist Launch Badge](/images/peerlist_launch_badge.svg)](https://peerlist.io/scroll/post/ACTHP69GO9R69MPO7H6BPR69KJDKRG)

# Nuxt Glow

Add a mouse-tracing glow effect to Nuxt components.

Demo: https://vueglow-demo.vercel.app/

>Plugin for Vue 3 also available: [Vue Glow](https://github.com/aksharahegde/vue-glow)

Checkout downloads on [NPM Chart](https://npm.chart.dev/@aksharahegde/nuxt-glow?primary=green&gray=cool&theme=dark).

## Installation

Install the package using your favorite package manager:

```shell

pnpm i @aksharahegde/nuxt-glow

```

## Usage

1. Add the `@aksharahegde/nuxt-glow` plugin to your `nuxt.config.ts`

```js

export default defineNuxtConfig({

  modules: ["@aksharahegde/nuxt-glow"],

});

```

2. Wrap any number of `` components in a `` which will be used to track the mouse location.

```html

  

    This won't glow

    

      


        This will glow purple when the mouse is passed over

      

    

  


```

Children of `` 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.

## Tailwind

Add the tailwind plugin to unlock the `glow:` variant and `glow` color

`tailwind.config.js`

```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.

## 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](https://github.com/nuxt-modules/icon/tree/main/playground) in development mode.

5. Once development is complete, create PR to this repository.

## Attribution

- Module is inspired by [React Glow](https://github.com/codaworks/react-glow) by [Codaworks](https://github.com/codaworks)

- Playground card is version of https://codepen.io/_rahul/pen/MWrozMX by [rahul](https://codepen.io/_rahul)