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

Install & Download:

# NPM
$ npm i @ckpack/vue-color

Description:

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>