vue-glow

A performant wrapper component to give dynamic glow effects in Vue
4,527 32
vue nuxt component vuetify glow colored elevation vue-glow
Install
npm install vue-glow
Latest Version:1.4.2
Vue:2
License:MIT
Last Updated:Jan 25, 2021
Links: GitHub  ·  npm
Maintainer: flortz

Vue-Glow

Live Demo
A performant wrapper component to give dynamic glow effects in Vue

Node.js CI Npm Weekly Downloads Npm Total Downloads Npm Version

VueGlow is a simple vue component that allows any element to be given a glow / colored elevation effect. VueGlow was initially built to extend vuetify's capabilities, however it will work equally well without Vuetify. The dynamic glow effect was done in pure css meaning no additional dependencies.

Installation

npm install vue-glow

Import

import VueGlow from 'vue-glow';

Basic Usage

<VueGlow>
  I am GLOWING!
</VueGlow>

<VueGlow color="red" intense >
  I am GLOWING bright red!
</VueGlow>

<VueGlow :color="#3535ff">
  I am using hex colors!
</VueGlow>

<VueGlow :color="{ r: 33, g: 66, b: 99 }">
  I am using rbg colors!
</VueGlow>

<VueGlow :color="{ h: 176, s: 88, l: 44 }">
  I am using Hsv colors!
</VueGlow>

Props

Prop Effect Default
color Changes the color of the glow. Can either be a color name, hex, a RGB dict, HSL dict, or HSV dict. "red"
elevation Changes the elevation effect of the glow. Can be a number between 0-24. 12
intensity Customize the intensity of the glow. Can be a number between 0-4. 1
intense Doubles the intensity of the glow. false
rounded Allows a border radius to be specified. 4px
tile No border radius. false
disabled Disables the glow effect. Disabling will pause any animation. false

Animation

Use the fade prop to make VueGlow changes it's colors. Set the animation speed with the interval prop. Note, animation can result in poor performance at very high animation speeds.

<VueGlow fade interval="100" >
  I am slowly changing colors!
</VueGlow>
Prop Effect Default
fade Glow changes hue over time. Animation speed can be changed with the interval prop. false
interval Sets the animation speed. Speed is in ms. Default is 50. 50
reversed Reverses the animation. false

Coming Soon

  • More color animations and effects

Related Packages

vuetify-nuxt-module

Zero-Config Nuxt Module for Vuetify

1,965,670 287
nuxt vuetify nuxt 3 nuxt-module vuetify 3
@zdzcode/zdzcode-vuetify-extensions

Zero-Config Nuxt Module for Vuetify

1,349
nuxt vuetify nuxt 3 nuxt-module vuetify 3
nuxt-vuetify

A very simple plugin to make Vuetify 3 work with Nuxt 3

1,798
nuxt vue vuetify module nuxt-module nuxt-vuetify
@kinetis/vector-ui

The Kinetis Vector admin UI, as a Nuxt layer on Vuetify.

0 0
nuxt vuetify admin kinetis nuxt-layer vector
ki-icons

Hand-drawn, full-colour food, category and trophy illustrations: a Nuxt module a...

200 0
nuxt vuetify food iconify icons illustrations nuxt-icon nuxt-module

Version History

Version Released Vue License
1.4.2 ^2.6.10 MIT
1.4.1 ^2.6.10
1.4.0 ^2.6.10
0.3.3 ^2.6.10
0.3.2 ^2.6.10