A new version of the jSuites JavaScript Color Picker plugin is available here.
JavaScript Color Picker v5
Vue color picker
Take a look at this example in CodeSandbox: working example
Color picker component
<template>
<input ref="color" />
</template>
<script>
import jSuites from "jsuites";
import "jsuites/dist/jsuites.css";
export default {
name: "Color",
props: {
properties: Object,
},
mounted: function () {
jSuites.color(this.$refs.color, this.$props.properties);
},
};
</script>
Component usage
<template>
<div id="app">
<h3>Vue color picker example</h3>
<Color
v-bind:properties="{
value: value,
closeOnChange: true,
onchange: handleColorChange,
}"
/>
<h3>New value is: {{ value }}</h3>
</div>
</template>
<script>
import Color from "./components/Color";
export default {
name: "App",
components: {
Color,
},
data: function () {
return {
value: "",
};
},
methods: {
setValue: function (newValue) {
this.value = newValue;
},
handleColorChange: function (el, newValue) {
this.setValue(newValue);
},
},
};
</script>