A Color input Component for Vuetify

A Color input Component for Vuetify
VuetifyColorInput A color input component for Vuetify.

VuetifyColorInput

A color input component for Vuetify.

demo

Try it out!

dependencies

setup

npm

npm i vuetify-color-input

import VuetifyColorInput from 'vuetify-color-input';

Use the treeshaking system.

import VuetifyColorInput from 'vuetify-color-input/a-la-carte';

browser

<link
  href="https://unpkg.com/vuetify@2/dist/vuetify.min.css"
  rel="stylesheet"
/>
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vuetify@2/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/chroma-js@2"></script>
<script src="https://unpkg.com/vuetify-color-input"></script>

The component is globally available as VuetifyColorInput. If Vue is detected, the component is registered automatically.

usage

Register the component globally.

import Vue from 'vue';
import VColorInput from 'vuetify-color-input';

Vue.component(VColorInput.name, VColorInput);

or

Register the component locally.

import VColorInput from 'vuetify-color-input';

export default {
  components: {
    VColorInput,
  },
  // ...
};

Use the component inside a template.

<v-color-input
  v-model="backgroundColor"
  label="background color"
/>

properties

name type default description
noAlpha Boolean false Removes alpha.

Inherits from v-input:

  • appendIcon
  • disabled
  • error
  • errorCount
  • errorMessages
  • hideDetails
  • hint
  • id
  • label
  • messages
  • persistentHint
  • prependIcon
  • rules
  • success
  • successMessages
  • validateOnBlur

Inherits from v-color-picker:

  • value

slots

Inherits from v-input:

  • append
  • label
  • message
  • prepend

events

Inherits from v-input:

  • click:append
  • click:prepend
  • update:error

Inherits from v-color-picker:

  • input

Download Details:

Author: SeregPie

Demo: https://seregpie.github.io/VuetifyColorInput/

Source Code: https://github.com/SeregPie/VuetifyColorInput

Suggest:

☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

☞ Learn Vue.js from scratch 2018

☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!

☞ Vue.js Tutorial: Zero to Sixty

☞ Learn Vue.js from Scratch - Full Course for Beginners

☞ Create Shopping basket page With Vuejs and Nodejs