Vue-random-colors NPM

vue-random-colors

Vue 3.x directive for apply random colors to CSS properties of 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.

In case you need directive for Vue 2.x you can use tag v2.0.0 or checkout version 2.0.0 from npm.

Install

$ npm i --save vue-random-colors

And then

Vue 2.x

import Vue from 'vue'
import VueRandomColor from 'vue-random-colors'
Vue.use(VueRandomColor)

Vue 3.x

Add directive for Vue component:

  <script setup>
    import { randomColors } from 'vue-random-colors'
    const vRandomColor = randomColors
  </script>

Or register globally at the app level:

    import { randomColors } from 'vue-random-colors'
    const app = createApp(App)
    app.directive('random-color', randomColors)
    app.mount('#app')

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

Nuxt 3.x

Use directive in Nuxt as plugin:

    import { randomColors } from 'vue-random-colors'
    export default defineNuxtPlugin((nuxtApp) => {
      nuxtApp.vueApp.directive('random-color', randomColors)
    })

More information about plugins can be found at Nuxt website.

Usage

Basic example

  <div v-random-color>
  ...
  </div>

Options

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.

Example

  <div v-random-color="{
    colors: [ 'aaaaaa', 'cccccc', 'eeeeee' ],
    event: 'click',
    property: 'border',
    default: 'ff0000',
    transition: 0.5
  }">
  ...
  </div>