Apply A Grow Effect To Elements – VueGlow

Install & Download:

# NPM
$ npm i vue-glow --save

Description:

A Vue.js component that applies a configurable soft or intense glow effect to any element within the app.

Basic usage:

1. Import the VueGlow component.

import VueGlow from 'vue-glow';

2. Add the VueGlow component to the template.

// soft
<VueGlow color="#18806C" mode="hex" elevation="11" intensity="1.67">Anything you want!</VueGlow>
// intense
<VueGlow color="#18806C" mode="hex" elevation="11" intensity="1.67" intense>Anything you want!</VueGlow>

3. All possible props to config the glow effect.

color: { default: ‘red’ },
mode: { type: String, default: ‘name’ }, // ‘name’, ‘hex’, ‘rgb’, or ‘hsl’.
elevation: { default: 12 },
intense: { type: Boolean, default: false },
intensity: { type: Number, default: 1 },
disabled: Boolean,
tile: Boolean,
fade: Boolean, // enables fade transition
reversed: Boolean,
interval: { default: 50 }

4. Apply a fade transition to the glow effect.

<VueGlow color="#18806C" mode="hex" fade interval="31" elevation="11" intensity="1.67" intense>Anything you want!</VueGlow>

Preview:

Changelog:

11/05/2020

• v1.4.3