Add global variable in Vue.js 3

Question

Anybody know how to do add a global variable in Vue 3 ?

in Vue 2 we use this in the main.js file:

Vue.prototype.$myGlobalVariable = globalVariable

Answer 1

The most direct replacement is app.config.globalProperties. See:

https://vuejs.org/api/application.html#app-config-globalproperties

So:

Vue.prototype.$myGlobalVariable = globalVariable

becomes:

const app = createApp(RootComponent)
app.config.globalProperties.$myGlobalVariable = globalVariable

This is scoped to a particular application rather than being global as it was with Vue.prototype. This is by design, all 'global' configuration options are now scoped to an application.

The relevant RFC is here:

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md

Properties added to globalProperties will be available via the component instance for all components within the application. So if you're using the Options API you'll be able to access them using this.$myGlobalVariable, just like you could with Vue.prototype. They'll also be available in the template without the this., e.g. {{ $myGlobalVariable }}.

If you're using the Composition API then you'll still be able to use these properties within the template, but you won't have access to the component instance within setup, so these properties won't be accessible there.

While hacks involving getCurrentInstance() can be used to access globalProperties within setup, those hacks involve using undocumented APIs and are not the recommended approach.

Instead, application-level provide/inject (also discussed in that RFC) can be used as an alternative to Vue.prototype:

const app = createApp(RootComponent)
app.provide('myGlobalVariable', globalVariable)

In the descendant component this can then be accessed using inject. e.g. With <script setup>:

<script setup>
import { inject } from 'vue'
const myGlobalVariable = inject('myGlobalVariable')
</script>

Or with an explicit setup function:

import { inject } from 'vue'

export default {
  setup() {
    const myGlobalVariable = inject('myGlobalVariable')

    // Expose it to the template, if required
    return {
      myGlobalVariable
    }
  }
}

Or with the Options API:

export default {
  inject: ['myGlobalVariable']
}

Docs: https://vuejs.org/api/application.html#app-provide

The idea here is that the component can explicitly declare the property rather than inheriting it by magic. That avoids problems like name collisions, so there's no need to use a $ prefix. It can also help to make it clearer where exactly a property is coming from.

It is common for the inject function to be wrapped in a composable. For example, the useRoute composable exposed by Vue Router is just a wrapper around inject.

In addition to globalProperties and provide/inject, there are various other techniques that might be used to solve the same problems as Vue.prototype. For example, ES modules, stores, or even global mixins. These aren't necessarily direct answers to the specific question posted here, but I've gone into more detail describing the various approaches at:

https://skirtles-code.github.io/vue-examples/patterns/global-properties.html

Which approach you prefer will depend on your circumstances.

Answer 2

I recommend to use provide/inject approach as follows :

in main.js :

import {createApp} from 'vue'

let app=createApp({
  provide:{
    globalVariable:123
  }

}).$mount('#app')

in some child or grand-child component do :

export default{
 name:'some-compo',
 inject:['globalVariable'],
 //then access this.globalVariable as property in you component
...
}

for composition api and script setup :

 import { inject } from 'vue'
 
 let globalVar=inject('globalVariable')