Yerko Palma Yerko Palma - 5 months ago 15
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)
init.call(this, options)
}


And in my directive I use it like this

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


But that only adds the
$ripple
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
ripple
option defined for my directive? Is there any official/standard way to do this?

Answer

You do not need to define reactivity.

Simply use this:

this.vm.$options.ripple.color

instead of this:

this.vm.$ripple.color

https://jsfiddle.net/pespantelis/tzw9ho3k/6/