Search code examples
vaadinembeddingvaadin-flowvaadin14

In Vaadin Flow how do I embedd my Vaadin page inside another web page?

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.

Solution

  • 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.