Vue.js Native HTML5 RGB Hexadecimal Color Picker Using vue-color-picker-board Library in Javascript Full Project For Beginners

Vue.js Native HTML5 RGB Hexadecimal Color Picker Using vue-color-picker-board Library 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-picker-board 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-picker-board

 

 

For all the images and javascript files you can download the full github repository as shown below

 

DOWNLOAD SOURCE CODE

 

After downloading it the directory structure will look something like this

 

 

Color picker for Vue.js License: MIT

Vue.js color picker component designed for humans.

 

Browser

Include the script file, then install the component with Vue.use(VueColorPickerBoard); e.g.:

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-color-picker-board/dist/vue-color-picker-board.min.js"></script>
<script type="text/javascript">
  Vue.use(VueColorPickerBoard);
</script>

 

See also  Node.js Express + Vue.js Zoom Clone p2p WebRTC Video Chat in Browser Using Javascript Full Project For Beginners

 

Module

import VueColorPickerBoard from 'vue-color-picker-board';

Usage

Once installed, it can be used in a template as simply as:

<vue-color-picker-board :width="800"
                        :height="100"
                        :defaultColor="'#00AAFF'"
                        @onSelection="colorSelection">
</vue-color-picker-board>

Properties

Property value Type Default value Description
width number 800 The width of the color picker in pixels
height number 100 The height of the color picker in pixels
defaultColor string '#00AAFF' The default color shown once the component renders

 

 

Screenshot Demo

 

 

Leave a Reply