Vue Color Kit

Common errors

• [Vue warn]: Failed to resolve component: ColorPicker

  cause 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.

  cause 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.

  cause 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.

Warnings

• gotcha 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.
  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.
• gotcha 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.
  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.
• gotcha 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`.
  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})`;`

Install

• npm install vue-color-kit npm
• yarn add vue-color-kit yarn
• pnpm add vue-color-kit pnpm

Imports

• ColorPicker
  wrong:

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

  correct:

  import { ColorPicker } from '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
  wrong:

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

  correct:

  import 'vue-color-kit/dist/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
  wrong:

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

  correct:

  import type { 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.

Quickstart

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>