Shared components between applications

Hi,

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';

@customElement('main-view')
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 https://vaadin.com/docs/v18/flow/typescript/creating-routes.html)
  {
    path: '',
    component: 'main-view',
    action: async () => {
        // FIXME How to include main-view from shared ?
      await import('./views/main/main-view');
    }
  },
];

Here a sample projet : https://github.com/gronono/poc-vaadin-fusion

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 ?

Regards,

Arnaud

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 bit.dev 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.