Vue 3.x directive for apply random colors to CSS properties of HTML element. By default directive use 216 web safe colors. More info at https://websafecolors.info. Colors could be re-defined by user, see options section below.

Note: Vue 2.x directive can found at Github or npm.

Add directive for Vue component:

Or register globally at the app level:

More information about custom directives can be found at Vue website.

Use directive in Nuxt as plugin:

More information about plugins can be found at Nuxt website.

Basic example

property (string) - CSS property to apply color. { background | border | color }. By default: background.

event (string) - Event which evoke color change. By default: mouseover.

default (string) - Default color which apply in case of mouseout or mouseleave. By default: 'ffffff'.

colors (array) - List of colors defined by user.

transition (number) - Speed of CSS property transition.

MIT