Notice

Vue Swatches recently reached version 2. If you were using v1 please consider reading the release notes or you can check v1 here

Demo And Documentation

https://saintplay.github.io/vue-swatches/

Table of Contents

• Introduction
• Features
• Install
• Basic Usage
• Contributing
• Browser Compatibility
• License

Introduction

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

Features

• Presets ready to use
• Built-in Popover
• Inline Mode
• Custom Colors
• Nested Colors Array
• Easily Customizable
• Custom Trigger
• Fallback Input

Install

npm install --save vue-swatches

or

yarn add vue-swatches

Basic Usage

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

<script>
  import VSwatches from 'vue-swatches'

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

  export default {
    components: { VSwatches }, // window['vue-swatches'] - from CDN
    data () {
      return {
        color: '#1CA085'
      }
    }
  }
</script>

Contributing

# serve with hot reload at localhost:8080
yarn serve

# distribution build with minification
yarn build

# build the documentation into docs
npm docs:dev

# run unit tests
yarn test:unit

Browser Compatibility

This component has the same support than Vue itself

Vue does not support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8. However it supports all ECMAScript 5 compliant browsers.

However if you want to use this with IE9, you will probably need to work on the CSS styles. IE10 should be fine

Awesome Contributors

• Diego Jara (saintplay)
• Niko Nagy
• feel free to add yourself

License

MIT