Add global variable in Vue.js 3
Solution 1
The most direct replacement is app.config.globalProperties
. See:
https://v3.vuejs.org/api/application-config.html#globalproperties
So:
Vue.prototype.$myGlobalVariable = globalVariable
becomes:
const app = Vue.createApp({})
app.config.globalProperties.$myGlobalVariable = globalVariable
Note that 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
Note that application-level provide
/inject
(also discussed in that RFC) is also an alternative to using Vue.prototype
:
const app = Vue.createApp({})
app.provide('myGlobalVariable', globalVariable)
// In the descendant component
export default {
inject: ['myGlobalVariable']
}
Docs: https://v3.vuejs.org/api/application-api.html#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.
Which approach you prefer will depend on your circumstances.
Solution 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')
Solution 3
How to add a global variable using Vue 3 and vue-cli (or Vite)
Note: You can drop the dollar sign from your $globalVariable
and just use globalVariable
, just like in the documentation.
Initially your main.js file looks something like this (adding router for common use case):
import { createApp } from 'vue'
import { App } from './App.vue'
import { router } from './router'
createApp(App).use(router).mount('#app')
To use add the global variable using Vue 3 and the vue-cli or Vite:
import { createApp } from 'vue'
import { App } from './App.vue'
import { router } from './router'
// 1. Assign app to a variable
let app = createApp(App)
// 2. Assign the global variable before mounting
app.config.globalProperties.globalVar = 'globalVar'
// 3. Use router and mount app
app.use(router).mount('#app')
Then to access the variables in components like this:
<script>
export default {
data() {
return {
myVar: this.globalVar
}
}
}
</script>
like in the template like this:
<template>
<h1>{{ globalVar }}</h1>
</template>
And that's it. Happy coding!
About Global Variables and Composition API
According to the very bottom of samayo's answer on this post, global variables are only available on the Options API.
Quoting the bottom of his answer:
Note: This is only for the Options API. Evan You (Vue creator) says: "config.globalProperties are meant as an escape hatch for replicating the behavior of Vue.prototype. In setup functions, simply import what you need or explicitly use provide/inject to expose properties to app.
Solution 4
For those of you who are confused about how to access globalProperties
in the setup()
method, you can use getCurrentInstance()
as in the following documentation.
https://v3.vuejs.org/api/composition-api.html#getcurrentinstance
Solution 5
If possible you should use imports or provide/inject. Another way to define global variables/functions and use them would be using globalProperties (although this seems to be considered more of an anti-pattern). But if a library you use uses globalProperties then you can use it like this. This also works with global functions.
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {} // global function
app.config.globalProperties.$globalVariable = 'Jimmy' // global variable
1. Using options API
mounted() {
console.log(this.$globalVariable)
}
2. Using setup method
<script setup>
import { getCurrentInstance } from 'vue'
const app = getCurrentInstance()
const progressBar = app.appContext.config.globalProperties.$globalVariable
console.log(this.$globalVariable)
</script>
Adri HM
Front-end developer : Vue & React Love Typescript Tests: Jest
Updated on July 10, 2022Comments
-
Adri HM almost 2 years
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