One Vaadin app embedded in two different parts of one web page

How is it possible to put one Vaadin app embedded in two different parts of one web page, using iframe or div?. Lets say if i want login window in upper right corner and other part of app somewhere in down right. In between is something on web page. How to achieve this?. I have read the Vaadin book about embedding applications in web pages and it has a mention “… or two different views to the same application on the same page”. I’ve also read about it in forum in generally, but there’s no mention about two different views of same app in anywhere.

Your optioons are to 1) use separate Vaadin applications and 2) use separate vaadin windows for the views. I have not tried the latter, but it should be done by addind named windows to your application and referring to the window urls from your web page. You can also create these windows on demand by overriding getWindow(). My gut feeling is to use the latter approach.


There might be a third option available too. In one customer project we use a special “external layout” which renders its contents to a div element in an other part of the page - instead or rendering to the space provided by the parent component. I hinted the fellows who worked in the project to investigate if the component could be easily extracted to an add-on. I hope they can comment about this soon.

This option most likely has its problems too, but I think it is less error prone than the options suggested by Joonas. With two applications you’ll have to use some sort of application to application communication and with two windows on the same page things will get tricky if you need to support multiple browser windows (or tabs) for the same session.


I uploaded the
to the directory. Although I marked it as beta, it has been running in production environments for a while. It’s a simple component, so let me know if there’s any additional functionality you need.