A UI Component for Vue that allows the user to choose colors

by Vue.js Examples

vue-swatches

Help the user picking beautiful colors!

Vue Swatches is a UI Component for Vue that allows the user to choose colors.

Unlike classic color pickers, where all colors are available (167 77 216 colors), Vue Swatches only shows a bunch of predefined colors.

More decisions require more effort

With fewer options, the user experience will be improved

View demo Download Source

Install

npm install --save vue-swatches

or

yarn add vue-swatches

Basic Usage

<!-- Vue component -->
<template>
  <div>
    <swatches v-model="color" />
  </div>
</template>

<script>
  import Swatches from 'vue-swatches'

  // Import the styles too, globally
  import "vue-multiselect/dist/vue-multiselect.min.css"

  export default {
    components: { Swatches }, // window.VueSwatches.default - from CDN
    data () {
      return {
        color: '#1CA085'
      }
    }
  }
</script>

Contributing

# serve with hot reload at localhost:8080
npm run dev

# distribution build with minification
npm run bundle

# build the documentation into docs
npm run docs

# run unit tests
npm run test

GitHub