VueJS Tabs Comunication

[Aaron Ullal]

Hello!
First of all thank you for developing this amazing library!
I am trying to have a Vue component open a new tab (same domain) and to have these tabs communicate with each other:
This is what I have so far:

Parent Component

     const routeData = this.$router.resolve({name: 'SomeRoute'})
      var config = {
        url: routeData.href,
        windowFeatures: '',
      }
      const openedTab = this.parentTab.openNewTab(config)

where parentTab is defined in data as

      parentTab: new AcrossTabs.default.Parent({
        onHandshakeCallback: (val) => {
          console.log('Handshacke completed')
          console.log(val)
        }
      }),

Now in the child tab I was thinking of doing something like this:

const child = new AcrossTabs.default.Child({
        onInitialize: (val) => {        },
        onReady: (val) => {        },
        onParentCommunication: (val) => {        }
      })
    }
router.beforeEach((to, from, next) => {
 console.log(child.tabId)
// If child is defined it means that I have been opened by a parent, if not continue normal workflow
}

However for some reason I never see the tabId in the child tab (but it is correctly defined in the parent)
What am I missing?

[Varun Malhotra]

Hey @ullalaaron,

Glad you like the library.

I would suggest logging the value inside onInitialize method. For example:

const child = new AcrossTabs.default.Child({
        onInitialize: (val) => {    console.log(child.tabId);    },
        onReady: (val) => {        },
        onParentCommunication: (val) => {        }
      })
};

Also, the information is preserved inside sessionStorage. Once the child tab is opened up, open up the devtools, and check what all is there inside sessionStorage. There must be the data which will have tabId.

PS: I tried running the demo application and I verified that tabId is always present.