Vuetify VTextField Color Picker Component

Install & Download:

# NPM
$ npm install @wdns/vuetify-color-field

Description:

The Vuetify Color Field component is a useful addition for Vue developers looking to integrate a color picker into their forms.

Built on top of Vuetify’s VTextField and VColorPicker components, it provides an easy way to accept color input from users.

This component is part of the Vuetify v3 ecosystem and is built to work seamlessly with Vue 3 and VueUse.

How to use it:

1. Import the vuetify-color-field component.

// Global Plugin
import { createApp } from 'vue';
import App from './App.vue';
import { createVColorField } from '@wdns/vuetify-color-field';
const app = createApp(App);
app.use(createVColorField({
  // options here
}));
app.mount('#app');

// Global Component
import { createApp } from 'vue';
import App from './App.vue';
import { VColorField } from  '@wdns/vuetify-color-field';
const app = createApp(App);
app.component('VColorField', VColorField);
app.mount('#app');

// Local
<template>
  <VColorField
    v-model="color"
  />
</template>
<script setup>
  import VColorField from  '@wdns/vuetify-color-field';
  const color = ref(null);
</script>

2. Available component props.

appendIcon: undefined,
appendInnerIcon: undefined,
cardFieldWidth: false,
cardOffsetX: 0,
cardOffsetY: 5,
cardPadding: 4,
cardProps: () => ({}) as const,
clearable: false,
color: undefined,
colorPickerProps: () => ({}) as const,
density: 'default',
hint: '',
iconHoverColor: undefined,
iconSize: 'default',
label: undefined,
messages: undefined,
name: 'color',
open: 'bottom left',
persistentHint: false,
persistentPlaceholder: false,
pip: false,
pipBorder: '3px solid rgb(var(--v-theme-on-surface))',
pipBorderRadius: '50%',
pipIcon: 'pip',
pipSlot: 'prepend-inner',
placeholder: undefined,
prependIcon: undefined,
prependInnerIcon: 'default',
readonly: false,
readonlyInput: false,
required: false,
variant: 'filled',