I am using vuejs to develop a module of my application, i will be getting data which i need to set to a variable ex this.gblData in the App.vue.

I will build the vue application and integrating it into a another application. Is there a way to expose the variable gblData in the parent application.

I am using vuejs to develop a module of my application, i will be getting data which i need to set to a variable ex this.gblData in the App.vue.

I will build the vue application and integrating it into a another application. Is there a way to expose the variable gblData in the parent application.

• javascript
• vue.js
• dom
• global-variables

• How do you instantiate your App? Just store the instance in a global variable and access its .gblData property there. – Bergi Commented Jul 24, 2019 at 16:59

3 Answers 3

Option 1: Create a global variable

const gblData = "something";

expose your global variable:

new Vue({
    data:{
        gblData
    }
})

Option2: Define global variable in the prototype.

Vue.prototype.$gblData = "something";

you can now use this variable in any vue ponent like this:

console.log(this.$gblData);

Yes you can pass this variable thhrough window object:

// set
window.gblData = "something";
// get
console.log(window.gblData);

in vue3:

// Vue3

const app = Vue.createApp({})
app.config.globalProperties.gblData = 'something'


app.ponent('a-child-ponent', {
  mounted() {
    console.log(this.gblData) // 'something'
  }
})