repository·main·Indexed 25 days ago
https://github.com/linx4200/vue-colorA collection of efficient, customizable, and tree-shakable color picker components for Vue 2.7 and Vue 3. It is TypeScript-ready, SSR-friendly, and supports various picker styles including ChromePicker, CompactPicker, PhotoshopPicker, and SketchPicker. The library uses tinycolor2 internally for parsing and supports two-way data binding via v-model and v-model:tinyColor.
Because vue-color components rely on DOM interaction, they must be rendered on the client side. If using Nuxt, wrap the picker in a <ClientOnly> component.
<template>
<ClientOnly>
<ChromePicker />
</ClientOnly>
</template>
<script setup lang="ts">
import { ClientOnly } from '#components';
import { ChromePicker } from 'vue-color';
</script>SliderPicker component provides a color picker interface using sliders. It supports two-way data binding via v-model for the color value and v-model:tinyColor for a tinycolor object.GrayscalePicker component allows users to select grayscale colors. It supports two-way data binding via v-model (for the color value) and v-model:tinyColor (for a TinyColor instance).To use vue-color in a Vue 3 project, follow these two steps:
main.ts).ChromePicker) and use it in your template with v-model.// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// Import styles
import 'vue-color/style.css';
createApp(App).mount('#app')<template>
<ChromePicker v-model="color" />
</template>
<script setup lang="ts">
import { ChromePicker } from 'vue-color'
const color = defineModel({
default: '#68CCCA'
});
</script>The HueSlider component provides a slider to select a hue value within the range of [0, 360]. It supports both horizontal and vertical orientations.
<script setup>
import { HueSlider } from 'vue-color';
const hue = defineModel();
</script>
<template>
<HueSlider v-model="hue" />
</template><HSVSliders /> component provides a color picker interface using Hue, Saturation, and Value sliders. It supports two-way data binding via v-model (for the color value) and v-model:tinyColor (for a TinyColor object).<ChromePicker /> component supports two-way data binding using v-model for the color value and v-model:tinyColor for a tinycolor object. It emits update:modelValue and update:tinyColor events to facilitate these bindings.<SwatchesPicker /> component supports two-way data binding using v-model for the color value and v-model:tinyColor for a tinycolor object. It emits update:modelValue and update:tinyColor events to facilitate these bindings.TwitterPicker component provides a color picker interface styled after Twitter's color selection. It supports two-way data binding via v-model for the color value and v-model:tinyColor for a TinyColor object.The library uses CSS variables defined under the :root scope. To enable the built-in dark theme, add the .dark class to your <html> element.
<html class="dark">
<!-- your app -->
</html>CompactPicker component is a color picker variant that supports two-way data binding via v-model for a standard color value and v-model:tinyColor for a TinyColor object. It also allows customization of the preset color swatches via the palette prop.SketchPicker component provides a color picker interface styled after the Sketch application. It supports two-way data binding via v-model (for the color value) and v-model:tinyColor (for a TinyColor object).