Lightweight Customizable Color Picker For Vue 3 - vue-color-input

Install & Download:

# NPM
$ npm i vue-color-input

Description:

A lightweight yet flexible and customizable color picker component for Vue 3 applications.

This component understands and supports all commonly used color models, including RGB, HSL, and HEX, effortlessly handling alpha channels for you. It strikes the perfect balance between minimalism and comprehensive functionality. While you can customize and extend its capabilities with additional properties, it also works flawlessly right out of the box with only v-model provided.

How to use it:

1. Import and register the vue-color-input component.

import ColorInput from 'vue-color-input'
// install it with use()
app.use(ColorInput)
// OR register globally
app.component('ColorInput', ColorInput)
// OR locally
export.default {
  components: { ColorInput }
}

2. Add the component to the template.

<color-input v-model="color" />

3. Available props.

modelValue: [String, Object],
/* [ "top", "top right", "top left", "top center",
  "right top", "right", "right bottom", "right center",
  "bottom right", "bottom", "bottom left", "bottom center",
  "left top", "left bottom", "left", "left center" ]
*/
position: {
  type: String,
  default: 'bottom'
},
transition: {
  type: String,
  default: 'picker-popup'
},
disableAlpha: {
  type: Boolean,
  default: false
},
disabled: {
  type: Boolean,
  default: false
},
disableTextInputs: {
  type: Boolean,
  default: false
},
/* [ "rgb", "rgb object", "rgb string", 
  "hsv", "hsv object", "hsv string", 
  "hsl", "hsl object", "hsl string",
  "name", "name string",
  "hex", "hex string",
  "hex8", "hex8 string" ]
*/
format: String,

4. Events.

@mounted
@beforeUnmount
@update:modelValue
@pickStart
@pickEnd
@hueInputStart
@hueInputEnd
@hueInput
@alphaInputStart
@alphaInputEnd
@alphaInput
@saturationInputStart
@saturationInputEnd
@saturationInput
@change

5. Methods.

// root instance
const colorInput = this.$refs.colorInput 
// popup color picker instance
const picker = colorInput.$refs.picker 
// root element
colorInput.$refs.root 
// box root element
colorInput.$refs.box 
// color picker root element
picker.$refs.rootPicker 
// begin color selection (show popup)
colorInput.pickStart() 
// end color selection (hide popup)
colorInput.pickEnd() 
// tinycolor instance
colorInput.color