Beautiful Color Picker For Vue 3

A beautiful color picker component for Vue. With support for gradient, multi-color formats, preset colors, and much more.

How to use it:

1. Import and register the color picker.

import Vue3ColorPicker from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
createApp(App)
  .use(router)
  .use(Vue3ColorPicker)
  .mount("#app");
// OR
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
export default defineComponent({
  components: { ColorPicker },
});

2. Add the color picker component to the template.

<template>
  <div>
     <color-picker />
  </div>
</template>

3. Available props.

isWidget: propTypes.bool.def(false),
pickerType: propTypes.oneOf(["fk", "chrome"]).def("fk"),
shape: propTypes.oneOf(["circle", "square"]).def("square"),
pureColor: {
  type: [String, Object] as PropType<ColorInputWithoutInstance>,
  default: "#000000",
},
gradientColor: propTypes.string.def("#000"),
format: {
  type: String as PropType<ColorFormat>,
  default: "rgb",
},
disableAlpha: propTypes.bool.def(false),
disableHistory: propTypes.bool.def(false),
roundHistory: propTypes.bool.def(false),
useType: propTypes.oneOf(["pure", "gradient", "both"]).def("pure"),
activeKey: propTypes.oneOf(["pure", "gradient"]).def("pure"),
lang: {
  type: String as PropType<SupportLang>,
  default: "ZH-cn",
},
zIndex: propTypes.number.def(9999),

Preview:

Beautiful Color Picker For Vue 3

Changelog:

v2.0.11 (11/17/2022)

  • bugfix

Download Details:

Author: aesoper101

Live Demo: https://aesoper101.github.io/vue3-colorpicker/?path=/story/example-colorpicker--square

Download Link: https://github.com/aesoper101/vue3-colorpicker/archive/refs/heads/main.zip

Official Website: https://github.com/aesoper101/vue3-colorpicker

Install & Download:

Add Comment