I have an existing app (written in WebGuiToolkit.org) and I am trying to embed a Vaadin Flow page in it.
I have seen several guides for Vaadin 8, like
but no guide or help for Vaadin 14.
What do I need to integrate Vaadin into another page? Can it be done by IFRAME? Can Vaadin also be used on the same HTML page w/o iframe?
Thanks for any hints.
You can do it by using an iframe, yes - that should be just a standard iframe usage. If you want to insert a Vaadin 14 app inside page without an iframe, you can export a Web Component, which does limit the functionality somewhat - essentially, you'll need to give up on using @Routes (as Vaadin is no longer controlling the top-level navigation of the page). There's a tutorial for exporting a web component here: https://vaadin.com/docs/v14/flow/integrations/embedding/tutorial-webcomponent-exporter
Essentially, you'll need to create a new class that extends WebComponentExporter with the generic type of the component you'll be exporting, like this:
public class LoginFormExporter
extends WebComponentExporter<LoginForm> {
public LoginFormExporter() {
super("login-form"); // you need to call the super constructor with a tag name
}
@Override
protected void configureInstance(
WebComponent<LoginForm> webComponent,
LoginForm form) {
// add initial configuration actions here
}
You will also need to load the custom component's JavaScript fi(s)le, as well as (potentially) polyfills and then you can use your <custom-tag>
(or <login-form>
, in the above example's case) inside any web page.