Vue making a variable available in all components

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?

Answer

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.