Use Color Pickers for Sketch, Photoshop, Chrome with Vue.js 2.0.

vue-color

In case you would like to import colors pickers in some Vue project, vue-color is a good solution. You can pick from 7 components:

• material,
• compact,
• swatches,
• slider,
• sketch,
• chrome,
• photoshop

Example

Install

npm install vue-color

App.vue

<template>
  <div id="app">
    <h1>Vue Color pickers</h1>
    <p><em>via Vue.js Feed</em></p>
    <photoshop v-model="colors" @change-color="onChange"></photoshop>
    <chrome v-model="colors" @change-color="onChange"></chrome>
  </div>
</template>

<script>
import { Photoshop, Chrome } from 'vue-color'

export default {
  name: 'app',
  components: {
    Photoshop,
    Chrome
  },
  data () {
    return {
      colors: {
        hex: '#194d33',
        hsl: {
          h: 150,
          s: 0.5,
          l: 0.2,
          a: 1
        },
        hsv: {
          h: 150,
          s: 0.66,
          v: 0.30,
          a: 1
        },
        rgba: {
          r: 25,
          g: 77,
          b: 51,
          a: 1
        },
        a: 1
      }
    }
  },
  methods: {
        // onChange method called when the event 'change-color' is emitted
    onChange (val) {
      this.colors = val
    }
  }
}
</script>

Demo

Check the repo on GitHub.