Vue Native Color Picker

Lightweight color picker that uses the native HTML element input type color

Install

npm install vue-native-color-picker

Import (globally)


import InputColorPicker from "vue-native-color-picker";
Vue.use(InputColorPicker);
              

OR Import (locally)


            
import { ref } from "vue";
import InputColorPicker from "./components/InputColorPicker.vue";

const color = ref("#0f4c81");
const handleInput = (e) => {
  console.log("You input", e.target.value);
};

const handleChange = (e) => {
  console.log("You picked", e.target.value);
};
             
              

Use


<VInputColorpicker v-model="color" />
              

or if you wish to handle the values externally:


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