Vue.js vue-color Library to Build Native HTML5 RGB Hexadecimal Color Picker in Javascript Full Project For Beginners

Vue.js vue-color Library to Build Native HTML5 RGB Hexadecimal Color Picker in Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a native html5 rgb hexadecimal color picker using vue-color library in vue.js using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to install the below library using the npm command as shown below

 

npm i vue-color

 

 

 

 

DOWNLOAD SOURCE CODE

 

 

CommonJS

var Photoshop = require('vue-color/src/Photoshop.vue');

new Vue({
  components: {
    'Photoshop': Photoshop
  }
})

ES6

import { Photoshop } from 'vue-color'

new Vue({
  components: {
    'photoshop-picker': Photoshop
  }
})

 

 

Live Vue Color Picker demo

 

 

 

 

 

Browser globals

The dist folder contains vue-color.js and vue-color.min.js with all components exported in the window.VueColor object. These bundles are also available on NPM packages.

<script src="path/to/vue.js"></script>
<script src="path/to/vue-color.min.js"></script>
<script>
  var Photoshop = VueColor.Photoshop
</script>

 

See also  Build a Vue.js Random User API Generator With Profile Photo & Email in Browser Using HTML5 & Javascript Full Project For Beginners

 

Usage

 

var colors = {
  hex: '#194d33',
  hex8: '#194D33A8',
  hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
  hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
  rgba: { r: 25, g: 77, b: 51, a: 1 },
  a: 1
}
// or
var colors = '#194d33'
// or
var colors = '#194D33A8'
// or 
var colors = { h: 150, s: 0.66, v: 0.30 }
// or 
var colors = { r: 255, g: 0, b: 0 }
// etc...

new Vue({
  el: '#app',
  components: {
    'material-picker': material,
    'compact-picker': compact,
    'swatches-picker': swatches,
    'slider-picker': slider,
    'sketch-picker': sketch,
    'chrome-picker': chrome,
    'photoshop-picker': photoshop
  },
  data () {
    return {
      colors
    }
  }
})

Leave a Reply