{"id":12436,"library":"vue-color","title":"Vue Color Pickers","description":"Vue Color is a comprehensive collection of performant and highly customizable color picker components designed for Vue.js applications. The current stable version is 3.3.3. The library is actively maintained with regular patch releases addressing bug fixes and dependency updates, and minor versions introduce new features like additional slider components (e.g., `<HSLSliders />`, `<HSVSliders />`, `<RGBSliders />`) and dark mode support. A major rewrite to v3.0.0 moved the library to TypeScript and full Vue 3 support, while also maintaining compatibility with Vue 2.7. Key differentiators include its modular and tree-shakable design, full TypeScript typings, SSR-friendliness, and built-in accessibility and dark mode support. It uses `tinycolor2` internally for robust color parsing and conversion, allowing `v-model` to preserve the input color format.","status":"active","version":"3.3.3","language":"javascript","source_language":"en","source_url":"https://github.com/linx4200/vue-color","tags":["javascript","typescript"],"install":[{"cmd":"npm install vue-color","lang":"bash","label":"npm"},{"cmd":"yarn add vue-color","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-color","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue.js reactivity and component rendering. Supports Vue 2.7 and Vue 3.","package":"vue","optional":false}],"imports":[{"note":"For Vue 3, always use named imports with ESM syntax. CommonJS `require` is not officially supported and will likely lead to errors due to the library's ESM structure and TypeScript rewrite since v3.","wrong":"const ChromePicker = require('vue-color')","symbol":"ChromePicker","correct":"import { ChromePicker } from 'vue-color'"},{"note":"Global styles are necessary for the pickers to render correctly. This import should be placed in your main application entry file (e.g., `main.ts` or `main.js`).","symbol":"style.css","correct":"import 'vue-color/style.css'"},{"note":"All color picker components are exported as named exports, not default exports. Attempting a default import will result in `undefined` or a runtime error.","wrong":"import SliderPicker from 'vue-color'","symbol":"SliderPicker","correct":"import { SliderPicker } from 'vue-color'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport 'vue-color/style.css';\n\ncreateApp(App).mount('#app');\n\n// In App.vue\n<template>\n  <div style=\"padding: 20px;\">\n    <h1>Pick a Color</h1>\n    <ChromePicker v-model=\"color\" />\n    <p style=\"margin-top: 20px;\">Selected Color: {{ color }}</p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ChromePicker } from 'vue-color';\nimport { ref } from 'vue';\n\nconst color = ref('#68CCCA');\n</script>","lang":"typescript","description":"Demonstrates how to import the global styles and use the `ChromePicker` component with `v-model` in a Vue 3 Composition API setup to display and update a color value."},"warnings":[{"fix":"For Vue 2.x projects, either upgrade to Vue 2.7 or use `vue-color` v2.x. For Vue 3 projects, ensure you are on a compatible Vue version and use the v3 API as documented.","message":"Version 3.0.0 was a complete rewrite, introducing full TypeScript support and migrating exclusively to Vue 3. This means that applications using Vue 2.x (prior to 2.7) are not compatible with `vue-color` v3 and should remain on previous major versions or migrate to Vue 2.7+ for partial compatibility.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always use `import { ComponentName } from 'vue-color'` for components and `import 'vue-color/style.css'` for styles in your project.","message":"With the v3 rewrite, CommonJS `require()` syntax is no longer officially supported for importing components. The library is designed for ESM imports.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"If strict format consistency is required, normalize the color value using a library like `tinycolor2` (which `vue-color` uses internally) or implement custom formatting logic when handling the `v-model` output.","message":"The `v-model` prop accepts various color formats (hex, rgb, hsl, object) and attempts to preserve the input format. However, mixing formats or expecting a specific output format without explicit conversion can lead to unexpected behavior in downstream components.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Refer to the `vue-color` documentation section 'Use with Vue 2.7' for specific guidance on setting up and using the components in Vue 2.7 environments. You might need to use `data()` and `props` with `emit` instead of `defineModel`.","message":"For Vue 2.7 projects, `vue-color` v3 supports compatibility. However, specific usage patterns might differ slightly from a pure Vue 3 setup, especially regarding reactivity primitives like `ref` and `defineModel` (which is Vue 3 only).","severity":"gotcha","affected_versions":">=3.2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"This issue was specifically fixed in `vue-color` v3.0.2. Ensure you are using version 3.0.2 or later. For SSR, ensure that any client-side-only components, like color pickers, are loaded dynamically or rendered conditionally on the client-side (e.g., using `<client-only>` in Nuxt).","cause":"This error occurs in environments where the `TouchEvent` global object is not present, such as some older browser versions or during server-side rendering (SSR) if not properly handled.","error":"ReferenceError: TouchEvent is not defined"},{"fix":"Verify that you are using named imports for all components (e.g., `import { ChromePicker } from 'vue-color'`) and that the component is either globally registered or locally imported and registered in the `<script setup>` block or `components` option of your Vue component.","cause":"This typically means the component was not correctly imported or registered in your Vue application, or you are trying to use a default import for a named export.","error":"Failed to resolve component: ComponentName"},{"fix":"Ensure the import statement `import 'vue-color/style.css'` is exactly as specified. If using a custom build setup, verify that your bundler (e.g., Webpack, Vite) has appropriate loaders configured to process CSS files.","cause":"The path to the stylesheet is incorrect, or the build system is not configured to handle CSS imports.","error":"Error: Cannot find module 'vue-color/style.css'"}],"ecosystem":"npm"}