Multi-purpose Vue.js 3 Color Picker Component – vue-color

A collection of color picker components for Vue.js 3, inspired by Sketch, Photoshop, Chrome, Material, Twitter, and more.

How to use it:

1. Import the color picker components.

  • Chrome
  • Compact
  • Grayscale
  • Material
  • Photoshop
  • Sketch
  • Slider
  • Swatches
  • Twitter
// global
import { createApp } from 'vue';
import App from '@/App.vue';
import { Sketch, create } from '@ckpack/vue-color';
const app = createApp(App);
app.use(create({
  components: [Sketch],
}));
app.mount('#app');
// local
import { Sketch } from '@ckpack/vue-color';
export default {
  components: {
    Sketch,
  },
  setup() {
    return {
      colors: '#fafafa'
    }
  }
}

2. Add the color picker components to the app.

<Chrome v-model="colors"></Chrome>
<Compact v-model="colors"></Compact>
<Grayscale v-model="colors"></Grayscale>
<Material v-model="colors"></Material>
<Photoshop v-model="colors"></Photoshop>
<Sketch v-model="colors"></Sketch>
<Slider v-model="colors"></Slider>
<Swatches v-model="colors"></Swatches>
<Twitter v-model="colors"></Twitter>

Preview:

vue-color

Changelog:

v1.3.0 (11/30/2022)

  • add keyboard navigation support for swatches and twitter

Download Details:

Author: ckpack

Live Demo: https://ckpack.github.io/vue-color/

Download Link: https://github.com/ckpack/vue-color/archive/refs/heads/main.zip

Official Website: https://github.com/ckpack/vue-color

Install & Download:

# NPM
$ npm i @ckpack/vue-color

Add Comment