<div id="app">

    <color-picker v-bind="color" @input="onInput"></color-picker>

    <h1 v-text="msg"></h1>

    <pre v-text="JSON.stringify(color, null, 4)"></pre>

</div>

#app {

    font-family: "Avenir", Helvetica, Arial, sans-serif;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    display: flex;

    flex-direction: column;

    align-items: center;

    color: #2c3e50;

    margin-top: 40px;

}

​

h1 {

    font-weight: normal;

}

​

pre {

    min-width: 275px;

    padding: 15px 30px;

    background: #f8f8f8;

    color: #525252;

    font-size: 15px;

    font-weight: bold;

    line-height: 1.6;

    margin: 0;

}

​

@media (max-width: 420px) {

    h1 {

        font-size: 1.4em;

    }

}

​

var ColorPicker = VueColorPicker;

​

Vue.createApp({

    components: {

        ColorPicker: ColorPicker,

    },

    setup() {

        const color = Vue.reactive({

            hue: 50,

            saturation: 100,

            luminosity: 50,

            alpha: 1,

        });

​

        return {

            msg: 'Radial Color Picker - Vue',

            color,

            onInput(hue) {

                color.hue = hue;

            },

        };

    },

}).mount('#app');

​