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.