Global variable access issue in vue-3 with composition api, while using setup with script tag?

[plabonislam]

question: ### How can I access global variables while using composition API with setup in script tag ?

Accessing in global variable **under setup** using **this** is impossible.
It can be achieved using **getCurrentInstance** method.
But I have found this **getCurrentInstance** is considered is dangerous to use.
So, what is the work around?

// this is not valid here//leads error
<script setup>
  mounted() {
    console.log(this.globalvariableName ) 
  }
</script>

// returns a variable value that I have set globally in app level
<script setup>
   import { getCurrentInstance } from 'vue'
  mounted() {
  const progressBar = getCurrentInstance().appContext.config.globalProperties.$globalVariable
  console.log(progressBar) 
  }

</script>

Should I use getCurrentInstance or another way?

[rodgeraraujo]

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. You can use some hacks using getCurrentInstance to access globalProperties, but these are not the recommended approach.

So you can just use application-level provide/inject as an alternative:

With an explicit setup function

import { inject } from 'vue'

export default {
  setup() {
    const globalVariable = inject('globalVariable')
    console.log(globalVariable)
  }
}

or with api options, inside a component in the application:

export default {
  inject: ['globalVariable']
}

refs: https://vuejs.org/api/application.html#app-provide, https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md