Yerko Palma Yerko Palma - 1 year ago 75
Javascript Question

How to extend Vue.prototype reactively

I'm trying to write a simple plugin. It's a directive to add ripple effect to any element. So far the custom directive works fine (check here), but I want to add some data to the Vue instance so the user can modify some values globally. I wan it to be used like this.

new Vue({
ripple: {
color: '#f18c16'

and that would modify the color of all ripple directives in this instance. As far as I know this isn't documented, so I inspect a litle in some Vue plugin and I came to this code.

const ripple = {
color: '#000'
const init = Vue.prototype._init

Vue.prototype._init = function(options) {
options = options || {}
Vue.util.defineReactive(this, '$ripple', ripple), options)

And in my directive I use it like this

if (this.modifiers.white) {['background-color'] = '#fff'
} else {['background-color'] = this.vm.$ripple.color

But that only adds the
property to my Vue instance and the declaration that I expected isn't working. Check here. So, my question is how can I use the
option defined for my directive? Is there any official/standard way to do this?


You do not need to define reactivity.

Simply use this:


instead of this: