Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-swatches with all npm packages installed. Try it out:

var vueSwatches = require("vue-swatches")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-swatches v1.0.4

Help the user picking beautiful colors!

Vue Swatches

Travis CI Coveralls npm version license Jest

Demo And Documentation

Table of Contents


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



npm install --save vue-swatches


yarn add vue-swatches

Basic Usage

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

  import Swatches from 'vue-swatches'

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

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


# 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

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



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free