Lightweight Vue Color Picker Component

Since all color pickers I found were too large or too complex, I decided to create my own.

The bundle size of the component is 9.6 KB (minified) and 3.9 KB (gzipped).

live demo

Installation

npm install @mergehez/vue-color-picker

bun install @mergehez/vue-color-picker

pnpm install @mergehez/vue-color-picker

Usage

<script setup>
  import ColorPicker from '@mergehez/vue-color-picker';
  import '@mergehez/vue-color-picker/styles.css';

  const color = ref('#ff0000');
</script>
<template>
  <div>
    <ColorPicker v-model="color" />
  </div>
</template>

Note

Go to ColorPicker.vue for available props.