vue-random-colors
v3.0.2
Published
Vue.js directive for apply random colors to CSS properties of HTML element.
Downloads
58
Maintainers
Readme
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>
Demo
License
MIT