Native Color Picker Component For Vue

Install & Download:

# NPM
$ npm i vue-native-color-picker --save

Description:

A pretty clean color picker component based on the native color input.

How to use it:

1. Import and register the color picker component.

import InputColorPicker from "./vue-input-color-picker";

// Globally
Vue.use(InputColorPicker);
// Or locally:
new Vue({
  components: {
    "v-input-colorpicker": InputColorPicker
  },
  data: function() {
    return {
      color: "#222222"
    };
  }
})

2. Add the color picker component to the template.

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

3. Available events.

• @input
• @change

<v-input-colorpicker v-model="color" @input="handleInput" @change="handleChange" />

Preview:

Changelog:

v2.0.0 (02/15/2024)

• Updated for Vue 3