Registry / web-framework / vue-color-kit

vue-color-kit

library1.0.6jsnpmunverified

Vue Color Kit is a dedicated component library providing a highly customizable color picker for Vue 3 applications. Currently stable at version 1.0.6, it offers both dark and light themes, supports various color formats (HEX, RGBA), and includes features like a color history palette and an optional 'sucker' tool for picking colors directly from the screen. While its release cadence appears to be infrequent, with recent updates focusing on minor improvements, it serves as a lightweight and focused solution for integrating color selection capabilities into Vue 3 projects. Its key differentiators include native Vue 3 support, minimal dependencies, and a direct approach to color picking without relying on external UI frameworks, offering a straightforward developer experience for basic to moderately complex color input requirements.

web-framework serialization

npm install vue-color-kit

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-COLOR-KIT

vue-color-kit

web-frameworkjavascriptv1.0.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ColorPicker

✓ import { ColorPicker } from 'vue-color-kit'

✗ const ColorPicker = require('vue-color-kit')

This is the primary named export for the component. CommonJS `require` is not supported for modern Vue 3 components, which are typically ESM-first.

CSS Styles

✓ import 'vue-color-kit/dist/vue-color-kit.css'

✗ import 'vue-color-kit/vue-color-kit.css'

The component's styling is provided via a separate CSS file that must be explicitly imported. Incorrect paths are a common mistake.

Type for Color Change Event

✓ import type { ColorPickerChangeEvent } from 'vue-color-kit'

✗ import { ColorPickerChangeEvent } from 'vue-color-kit'

When using TypeScript, if you only need the type definition, use `import type` to prevent bundling issues and improve tree-shaking, although `ColorPickerChangeEvent` might not be directly exported or documented as such in all versions, often inferred from `changeColor` payload.

Demonstrates how to integrate the ColorPicker component, bind its value, and handle color changes within a Vue 3 Composition API setup, including the necessary CSS import. It also shows the basic event handling for the 'sucker' tool.

<template> <div :style="{ background: color, minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }"> <ColorPicker theme="dark" :color="color" :sucker-hide="false" :sucker-canvas="suckerCanvas" :sucker-area="suckerArea" @changeColor="changeColor" @openSucker="openSucker" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { ColorPicker } from 'vue-color-kit'; import 'vue-color-kit/dist/vue-color-kit.css'; interface RGBA { r: number; g: number; b: number; a: number; } interface ColorResult { rgba: RGBA; hex: string; } export default defineComponent({ name: 'ColorPickerExample', components: { ColorPicker, }, setup() { const color = ref<string>('#59c7f9'); const suckerCanvas = ref<HTMLCanvasElement | null>(null); const suckerArea = ref<number[]>([]); const changeColor = (newColor: ColorResult) => { const { r, g, b, a } = newColor.rgba; color.value = `rgba(${r}, ${g}, ${b}, ${a})`; }; const openSucker = (isOpen: boolean) => { // In a real application, you would initialize/destroy your canvas here. // For simplicity, this example just logs the state. if (isOpen) { console.log('Sucker tool opened. User needs to set suckerCanvas and suckerArea if actual picking is desired.'); // Example: suckerCanvas.value = document.createElement('canvas'); // Example: suckerArea.value = [0, 0, window.innerWidth, window.innerHeight]; } else { console.log('Sucker tool closed.'); // Example: suckerCanvas.value?.remove(); // Example: suckerCanvas.value = null; } }; return { color, suckerCanvas, suckerArea, changeColor, openSucker, }; }, }); </script>

Debug

Known issues

gotchaThe component's styling is not automatically bundled or injected. Developers must manually import the CSS file `vue-color-kit/dist/vue-color-kit.css` in their entry point or component script, otherwise, the color picker will render unstyled.

fix

Add `import 'vue-color-kit/dist/vue-color-kit.css'` to your main application file (e.g., `main.ts` or `main.js`) or the component where `ColorPicker` is used.

affects: >=1.0.0

gotchaThe 'sucker' (eyedropper) tool requires manual setup of an `HTMLCanvasElement` for `sucker-canvas` and an array of coordinates for `sucker-area` to function correctly. Without these, clicking the sucker icon will open the tool but it won't actually pick colors from the screen.

fix

Implement the logic within the `@openSucker` event handler to dynamically create and manage a canvas element, setting `sucker-canvas` to the created element and `sucker-area` to the desired capture coordinates. Remember to clean up the canvas when the tool closes.

affects: >=1.0.0

gotchaThe `changeColor` event emits an object containing both `rgba` and `hex` values. If you only need one format, remember to destructure or access the specific property, e.g., `color.rgba` or `color.hex`.

fix

Access the specific color format required from the event object, for example: `const { r, g, b, a } = color.rgba; this.color = `rgba(${r}, ${g}, ${b}, ${a})`;`

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: ColorPicker

The ColorPicker component has not been correctly imported and registered within the Vue application or component where it's being used.

fix

Ensure you have `import { ColorPicker } from 'vue-color-kit';` and included `ColorPicker` in the `components` option of your Vue component (e.g., `components: { ColorPicker }`).

Color picker renders without any styles or appears as basic HTML elements.

The required CSS file for `vue-color-kit` has not been imported into the project.

fix

Add `import 'vue-color-kit/dist/vue-color-kit.css'` to your application's entry file (e.g., `main.js`/`main.ts`) or within the `<script>` section of the Vue component where `ColorPicker` is used.

The eyedropper/sucker tool icon appears, but clicking it does nothing or causes an error.

The `sucker-canvas` and `sucker-area` props, which are essential for the eyedropper functionality, have not been correctly provided or initialized.

fix

Implement the `openSucker` event handler to dynamically create an `HTMLCanvasElement` and set it to the `sucker-canvas` prop, along with defining the capture region in `sucker-area`. Remember to clean up the canvas when the sucker tool is closed.

Upgrade

Version history

1.0.6latest on npm

Audit

Dependencies

vuerequiredPeer dependency, required for the Vue component to function.

Agent activity

26 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/anish2690/vue-color-kit ↗

packagehttps://www.npmjs.com/package/vue-color-kit ↗