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

user_4174254 0
Viewed 384

I have an existing app (written in WebGuiToolkit.org) and I am trying to embed a Vaadin 14 page in it.
I have seen several guides for Vaadin 8, like

but no guide or help for Vaadin 14. I am using Flow. (A guide for Vaadin 10+ would also help.)

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.

vaadin14 vaadin-flow vaadin embedding
1 Answers

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.

user_36080890
Related