Shared components between applications


In my compagny, we try to use the same design for ours applications.
With Vaadin Flow, we created a shared library which contain the main layout and some other shared components.

I am looking at Vaadin Fusion and I try to reproduce our logic but my shared components aren’t visible from the application.

For examples, I created a shared component in shared/src/main/resources/META-INF/resources/frontend/views/main/main-view.ts with content

import { css, customElement, html, LitElement, property } from 'lit-element';

export class MainView extends LitElement {
  render() {
    return html`
        <h1>Hello shared view</h1>

And I tried to include him in the application’s routes in application/frontend/routes.ts file:

export const routes = [
  // for client-side, place routes below (more info
    path: '',
    component: 'main-view',
    action: async () => {
        // FIXME How to include main-view from shared ?
      await import('./views/main/main-view');

Here a sample projet :

Do you have any examples of a shared libraries using Vaadin Fusion ?

And is possible to created custom vaadin webcomponents sharable with no-java applications ?



You need to use a custom syntax to import frontend files from other jar files. The format in your case would be @vaadin/flow-frontend/views/main/main-view.

If you don’t want to package your frontend dependencies into a jar file, then your other alternative is to distribute them as a npm module instead. You can then either reference that module with a relative path in package.json or alternatively use a private npm registry such as or Verdaccio.

Thanks a lot Leif.
@vaadin/flow-frontend/views/main/main-view works.

I’ll look for publishing my components in a npm registry later.