Gradient Picker Component For Vue.js

Install & Download:

# NPM
$ npm i vue-gpickr --save

Description:

A clean, simple gradient color picker component for Vue.js app.

How to use it:

1. Import the gradient picker.

import { VueGpickr, LinearGradient } from 'vue-gpickr';

2. Add the gradient picker component to the app template.

<template>
  <vue-gpickr v-model="gradient" />
</template>

3. Register the component, add custom stops, and determine the angle applied to the gradient.

const gradient = new LinearGradient({
  angle: 0,
  stops: [
    ['#0359b5', 0],
    ['#f6ce01', 1]
  ]
});
export default {
  components: {
    VueGpickr
  },
  data() {
    return {
      gradient
    }
  }
};

Preview:

Changelog:

v0.4.2 (11/17/2021)

• Update