{"id":12636,"library":"vue3-swatches","title":"Vue 3 Swatch Picker","description":"vue3-swatches is a dedicated color swatch picker component designed for Vue 3 applications. It is a complete re-implementation, not a fork, of the popular vue-swatches library, adapted specifically for the Vue 3 composition API and ecosystem. The current stable version is 1.2.4. As a direct port, its features, API, and visual design closely mirror its Vue 2 predecessor. While no explicit release cadence is stated, updates are likely tied to significant changes in the original vue-swatches or general Vue 3 ecosystem evolution. Key differentiators include its robust feature set inherited from vue-swatches, ease of integration as a component or global plugin, and built-in support for custom triggers and integration with frameworks like Nuxt 3. Its primary advantage is providing a well-tested and familiar swatch picker solution for Vue 3 developers who might have previously used vue-swatches.","status":"active","version":"1.2.4","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue","swatch","typescript"],"install":[{"cmd":"npm install vue3-swatches","lang":"bash","label":"npm"},{"cmd":"yarn add vue3-swatches","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue3-swatches","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for the Vue 3 component","package":"vue","optional":false}],"imports":[{"note":"This is for local component registration within Vue SFCs using named imports.","wrong":"import VSwatches from 'vue3-swatches'","symbol":"VSwatches (local component)","correct":"import { VSwatches } from 'vue3-swatches'"},{"note":"When registering as a global Vue plugin via `app.use()`, the default export is expected.","wrong":"import { VSwatches } from 'vue3-swatches'","symbol":"VSwatches (global plugin)","correct":"import VSwatches from 'vue3-swatches'"},{"note":"The component's styling is provided via a separate CSS file and must be explicitly imported in your entry file or relevant component.","wrong":"","symbol":"CSS Styles","correct":"import 'vue3-swatches/dist/style.css'"},{"note":"For Nuxt 3 integration, utilize the provided module in `nuxt.config.ts` for proper setup and SSR compatibility.","wrong":"import { VSwatches } from 'vue3-swatches'","symbol":"Nuxt Module","correct":"modules: ['vue3-swatches/nuxt']"}],"quickstart":{"code":"import { ref } from 'vue';\nimport { VSwatches } from 'vue3-swatches';\nimport 'vue3-swatches/dist/style.css';\n\nconst color = ref(\"#1FBC9C\");\n\n// In a Vue SFC <template> section:\n// <VSwatches v-model=\"color\" />\n\n// Example with custom trigger (for demonstration, not runnable JS):\n/*\n<template>\n  <VSwatches v-model=\"color\">\n    <template #trigger>\n      <input :value=\"color\" readonly />\n    </template>\n  </VSwatches>\n</template>\n*/","lang":"typescript","description":"Demonstrates local component import and basic usage with a `v-model` binding in a Vue 3 setup script. Also shows the required CSS import."},"warnings":[{"fix":"Refactor imports, component registration, and prop usages to align with Vue 3 conventions and the specific API of `vue3-swatches`.","message":"Migrating from the original `vue-swatches` (Vue 2) to `vue3-swatches` (Vue 3) requires updating imports and ensuring API compatibility with Vue 3's composition API and lifecycle hooks. While the API aims to be consistent, underlying Vue version differences necessitate code changes.","severity":"breaking","affected_versions":"all"},{"fix":"Add `import 'vue3-swatches/dist/style.css'` to your main entry file (e.g., `main.ts`/`main.js`) or the component where `VSwatches` is used.","message":"The component's styles are not automatically bundled with the component import. Failing to import `'vue3-swatches/dist/style.css'` will result in an unstyled or incorrectly styled component.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Configure `'vue3-swatches/nuxt'` in your `modules` array within `nuxt.config.ts` for proper Nuxt 3 integration.","message":"For Nuxt 3 integration, `vue3-swatches` provides a specific module. Attempting to import and register the `VSwatches` component directly in a Nuxt application without using the module might lead to hydration issues or incorrect functionality, especially in SSR environments.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have either `import { VSwatches } from 'vue3-swatches'` in your script setup or `app.use(VSwatches)` in your main.js/ts file for global registration.","cause":"The VSwatches component was not properly imported or globally registered within your Vue application.","error":"[Vue warn]: Failed to resolve component: VSwatches"},{"fix":"Add `import 'vue3-swatches/dist/style.css'` to your main entry file or the component where `VSwatches` is used. Verify the path is correct relative to your project structure.","cause":"The CSS file for styling the swatches component is missing or the import path is incorrect, preventing the bundler from locating it.","error":"Module not found: Error: Can't resolve 'vue3-swatches/dist/style.css' in '...'"},{"fix":"When using `app.use()`, ensure you are importing the default export: `import VSwatches from 'vue3-swatches'` (without curly braces).","cause":"Attempting to use a named import for `VSwatches` when globally registering it as a plugin with `app.use()`, which expects the default export.","error":"TypeError: VSwatches is not a constructor (when using app.use()) or TypeError: Cannot read properties of undefined (reading 'install')"},{"fix":"For Nuxt 3, ensure you are using the provided module by adding `'vue3-swatches/nuxt'` to your `modules` array in `nuxt.config.ts`.","cause":"Nuxt server-side rendering (SSR) hydration issues, often related to improper component registration or client-only rendering mismatches when not using the dedicated Nuxt module.","error":"[Vue warn]: hydration completed but contains mismatches. (in Nuxt environments)"}],"ecosystem":"npm"}