vue-color

library3.3.3jsnpmunverified

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.

web-framework

npm install vue-color

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-COLOR

vue-color

web-frameworkjavascriptv3.3.3

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.

ChromePicker

✓ import { ChromePicker } from 'vue-color'

✗ const ChromePicker = require('vue-color')

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.

style.css

✓ import 'vue-color/style.css'

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`).

SliderPicker

✓ import { SliderPicker } from 'vue-color'

✗ import SliderPicker from 'vue-color'

All color picker components are exported as named exports, not default exports. Attempting a default import will result in `undefined` or a runtime error.

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.

import { createApp } from 'vue'; import App from './App.vue'; import 'vue-color/style.css'; createApp(App).mount('#app'); // In App.vue <template> <div style="padding: 20px;"> <h1>Pick a Color</h1> <ChromePicker v-model="color" /> <p style="margin-top: 20px;">Selected Color: {{ color }}</p> </div> </template> <script setup lang="ts"> import { ChromePicker } from 'vue-color'; import { ref } from 'vue'; const color = ref('#68CCCA'); </script>

Debug

Known issues

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

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.

affects: >=3.0.0

breakingWith the v3 rewrite, CommonJS `require()` syntax is no longer officially supported for importing components. The library is designed for ESM imports.

fix

Always use `import { ComponentName } from 'vue-color'` for components and `import 'vue-color/style.css'` for styles in your project.

affects: >=3.0.0

gotchaThe `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.

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.

affects: >=3.0.0

gotchaFor 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).

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

affects: >=3.2.0

Errors

Common errors & fixes

ReferenceError: TouchEvent is not defined

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.

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

Failed to resolve component: ComponentName

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.

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.

Error: Cannot find module 'vue-color/style.css'

The path to the stylesheet is incorrect, or the build system is not configured to handle CSS imports.

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.

Upgrade

Version history

3.3.3latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue.js reactivity and component rendering. Supports Vue 2.7 and Vue 3.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/linx4200/vue-color ↗

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

homepagehttps://linx4200.github.io/vue-color/ ↗