Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aksharahegde/vue-glow
Add a mouse-tracing glow effect to Vue components
https://github.com/aksharahegde/vue-glow
glow tailwindcss vue3
Last synced: 2 months ago
JSON representation
Add a mouse-tracing glow effect to Vue components
- Host: GitHub
- URL: https://github.com/aksharahegde/vue-glow
- Owner: aksharahegde
- License: mit
- Created: 2023-12-24T15:14:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-16T17:56:01.000Z (10 months ago)
- Last Synced: 2024-10-11T17:42:09.366Z (3 months ago)
- Topics: glow, tailwindcss, vue3
- Language: Vue
- Homepage: https://vueglow-demo.vercel.app/
- Size: 94.7 KB
- Stars: 38
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Glow
Add a mouse-tracing glow effect to Vue components.
Demo: https://vueglow-demo.vercel.app/
Nuxt 3 Plugin also available: https://github.com/aksharahegde/nuxt-glow
## Installation
Install the package using your favorite package manager:
```shell
pnpm i @aksharahegde/vue-glow
```
## Usage
1. Add the `@aksharahegde/vue-glow` plugin to your `src/main.js`
```js
import VueGlow from '@aksharahegde/vue-glow'
Vue.use(VueGlow)
```
2. Add the tailwind plugin to unlock the `glow:` variant and `glow` color
`tailwind.config.js`
```js
module.exports = {
...
plugins: [
require("@aksharahegde/vue-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.
3. 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.
## 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)