Embedding Vaadin UI twice

Dear community,

I’m trying to embed (like described here: https://vaadin.com/docs/-/part/framework/advanced/advanced-embedding.html) the same Vaadin UI in a page. The UI is a simple button the changes a label, for test purposes.

It mostly works, except the first time the embedding page is called. The fist time the page is called, everything seems to works but if I click on the button of the first initialized UI (hrough a call to vaadin.initApplication), the page is reloaded and the UIs are initialized again. It is like ther is a “timing” issue the first time the page is called because the second Vaadin UI instance has v-uild=0 has query parameter to the POST that is issued when I click on the button. And a click on the first Vaadin UI button just reload the page. After the reload, UI 1 has v-uild=1 and UI 2 has v-uild=2.

I would also like to know if it is possible the share the same UI instance in the same page, as it is possible to do with portlets.

Thanks for your help!

I can confirm the timing issue.

I wrote the following function:

function waitForVaadin(app, callback) {
    if (!window.vaadin.clients[app]
 || window.vaadin.clients[app]
        setTimeout(function() { waitForVaadin(app, callback) }, 5)
        callback && callback();

To defer the initialization of the second UI after the first UI has finished is initialization. And it now works.

It would have been nice if I could set a callback function in the config params of the vaadin.initApplication (or better, if Vaadin was able to handle the issue).