Vue making a variable available in all components

Question

I am currently reading out a language setting from the dom and setting it as a global Vue.js variable like this:

const language = document.querySelector('html').getAttribute('lang');
Vue.prototype.$language = language;

It works fine but I have also seen this as an example from a Vue.js event bus:

Object.defineProperties(Vue.prototype, {
    $bus: {
        get() {
            return EventBus;
        }
    }
});

What is the real difference between these two and is there possible a more preferred way of doing this?

Not really vue-relative, kinda dupe of: stackoverflow.com/questions/38961414/… — FitzFish
– FitzFish, Commented Jun 27, 2017 at 8:12
@Cobaltway in my case not having any configuration options would result in the same as simply setting the prototype directly? Or are the default settings still different? — Stephan-v
– Stephan-v, Commented Jun 27, 2017 at 8:17
I don't think there is any real difference if you are not using any of defineProperties options. It may be marginally faster to assign directly the prototype. Must be tested. — FitzFish
– FitzFish, Commented Jun 27, 2017 at 8:25

tony19 · Accepted Answer · 2022-07-15 22:01:42Z

3

Object.defineProperties is can be used when you need to set property descriptors such as getters , setters ,read only etc .

But in your case using Vue.prototype.$language = language; will be the more cleaner approach.

If you are looking for Vue preferred way, this is the guide on adding instance properties to Vue instance.

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 27, 2017 at 11:14

CuriousGuy

4,1984 gold badges26 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1