Combining Flow and Hilla views in Vaadin 24.4 beta1

Hilla
1

We recently released Vaadin 24.4.0.beta1. One of the new features that we’re introducing is that the default Vaadin application configuration supports mixing Flow and Hilla views out of the box. Flow views are also automatically integrated with the main menu that we have added to the default main layout in Hilla.

Here’s how you can try that out right now. Start by downloading https://start.vaadin.com/dl?preset=react&preset=partial-prerelease, extracting it, importing it to an IDE, and running the main method in Application.java. This starting point already includes two Hilla views and you can just go ahead and add a Flow view to it. You need to add the regular @Route annotation to make it possible to navigate to the view and the @Menu annotation to show the view in the menu.

src/main/java/com/example/application/FlowView.java

package com.example.application;

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Menu;
import com.vaadin.flow.router.Route;

@Route
@Menu
public class FlowView extends VerticalLayout {
    public FlowView() {
        add("Flow view");
    }
}

The route and menu title is by default derived from the class name but can be configured through the respective annotations, e.g. @Menu(title = "Flow view").

Not that there’s a known bug in this case: @PageTitle from Flow views is not shown in the header section of the main layout.

1 Like