This article is about creating a global colorpicker for your Vue.js application quickly and easily. In the colorpicker you can select certain colors, which then determine the look of the application. You can then store these colors either locally as a cookie or to an API to store them in a database. For this article I decided to use cookies, but the code is actually the same for APIs.
Requirements
Colorpicker Component
First of all we are going to start with our Colorpicker Component
Template Tag
The Main Cointainer places our Colorpicker centered on the page. TopBar is this small menu bar and the AccentBar shows the currently selected color. Now it gets more exciting in the ColorContainer.
Color Picker
In the second div we see a v-for loop which gives us the colors. A clickevent which changes the gloabel color and a dynamic :style tag which sets the current color as background color.
Now to our script tag.
Script Tag
currentColor is the selected color with a default value. Colors are our available colors, they can be fetched from an API or defined locally like here. ChangeColor(color) is our clickevent in which the clicked color is passed. Here we simply set the selected color as currenColor and save it in the cookie “Theme”. Optionally an API post/put can be sent here.
Mounted() gets the currently selected color from the cookie when rendering the page and sets it as currentColor.
#color-picker #web-development #simple #vuejs #javascript
