How can I access global variable in vue 3 outside vue component?

Question

I defined my global variable in main.js file like this

---

const app = Vue.createApp({})
   app.config.globalProperties.$myGlobalVariable = globalVariable***

and then when I tried to access this variable $myGlobalVariable in other js file it is undefined, but I can access in vue components.

In the vue 2 it is possible to access both in js file and vue components. I hope you gonna help me :)

Answer 1

In order to access a global Vue variable outside of a Vue component you have to:

1. Export the app instance

/* main.js */

export const app = Vue.createApp({})
app.config.globalProperties.$myGlobalVariable = globalVariable

2. Import the app instance in the other JS file

/* other.js */

import { app } from '@/main.js'
console.log(app.config.globalProperties.$myGlobalVariable)