{"id":15264,"library":"vue-color-kit","title":"Vue Color Kit","description":"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.","status":"active","version":"1.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/anish2690/vue-color-kit","tags":["javascript","typescript","vue","vue-next","vue3","color-picker","color picker"],"install":[{"cmd":"npm install vue-color-kit","lang":"bash","label":"npm"},{"cmd":"yarn add vue-color-kit","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-color-kit","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for the Vue component to function.","package":"vue","optional":false}],"imports":[{"note":"This is the primary named export for the component. CommonJS `require` is not supported for modern Vue 3 components, which are typically ESM-first.","wrong":"const ColorPicker = require('vue-color-kit')","symbol":"ColorPicker","correct":"import { ColorPicker } from 'vue-color-kit'"},{"note":"The component's styling is provided via a separate CSS file that must be explicitly imported. Incorrect paths are a common mistake.","wrong":"import 'vue-color-kit/vue-color-kit.css'","symbol":"CSS Styles","correct":"import 'vue-color-kit/dist/vue-color-kit.css'"},{"note":"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.","wrong":"import { ColorPickerChangeEvent } from 'vue-color-kit'","symbol":"Type for Color Change Event","correct":"import type { ColorPickerChangeEvent } from 'vue-color-kit'"}],"quickstart":{"code":"<template>\n  <div :style=\"{ background: color, minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }\">\n    <ColorPicker\n      theme=\"dark\"\n      :color=\"color\"\n      :sucker-hide=\"false\"\n      :sucker-canvas=\"suckerCanvas\"\n      :sucker-area=\"suckerArea\"\n      @changeColor=\"changeColor\"\n      @openSucker=\"openSucker\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\nimport { ColorPicker } from 'vue-color-kit';\nimport 'vue-color-kit/dist/vue-color-kit.css';\n\ninterface RGBA { r: number; g: number; b: number; a: number; }\ninterface ColorResult { rgba: RGBA; hex: string; }\n\nexport default defineComponent({\n  name: 'ColorPickerExample',\n  components: {\n    ColorPicker,\n  },\n  setup() {\n    const color = ref<string>('#59c7f9');\n    const suckerCanvas = ref<HTMLCanvasElement | null>(null);\n    const suckerArea = ref<number[]>([]);\n\n    const changeColor = (newColor: ColorResult) => {\n      const { r, g, b, a } = newColor.rgba;\n      color.value = `rgba(${r}, ${g}, ${b}, ${a})`;\n    };\n\n    const openSucker = (isOpen: boolean) => {\n      // In a real application, you would initialize/destroy your canvas here.\n      // For simplicity, this example just logs the state.\n      if (isOpen) {\n        console.log('Sucker tool opened. User needs to set suckerCanvas and suckerArea if actual picking is desired.');\n        // Example: suckerCanvas.value = document.createElement('canvas');\n        // Example: suckerArea.value = [0, 0, window.innerWidth, window.innerHeight];\n      } else {\n        console.log('Sucker tool closed.');\n        // Example: suckerCanvas.value?.remove();\n        // Example: suckerCanvas.value = null;\n      }\n    };\n\n    return {\n      color,\n      suckerCanvas,\n      suckerArea,\n      changeColor,\n      openSucker,\n    };\n  },\n});\n</script>\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The '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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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})`;`","message":"The `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`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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 }`).","cause":"The ColorPicker component has not been correctly imported and registered within the Vue application or component where it's being used.","error":"[Vue warn]: Failed to resolve component: ColorPicker"},{"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.","cause":"The required CSS file for `vue-color-kit` has not been imported into the project.","error":"Color picker renders without any styles or appears as basic HTML elements."},{"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.","cause":"The `sucker-canvas` and `sucker-area` props, which are essential for the eyedropper functionality, have not been correctly provided or initialized.","error":"The eyedropper/sucker tool icon appears, but clicking it does nothing or causes an error."}],"ecosystem":"npm"}