/fusion-translation-poc

Some proof-of-concepting regarding Vaadin Fusion string translations

Primary LanguageTypeScriptThe UnlicenseUnlicense

Fusion Translations PoC

This is a project for testing approaches to translating strings in Vaadin Fusion. The approach here uses lit-translate.

The reasoning behind this choice is that it's easy to customize how the strings are loaded, and it integrates well with Lit.

This project stores translations in a standard resource bundle (src/main/resources/messages_<lang>.properties). The translations are converted to a JSON object and served to the client through the TranslationEndpoint.

On the client, the translate directive from lit-translate is used, in order for components to be updated once the language changes.

The language is set in the main-layout.ts through the app-store.ts. The choice is currently not persisted across browser reloads.

Running the application

The project is a standard Maven project. To run it from the command line, type mvnw (Windows), or ./mvnw (Mac & Linux), then open http://localhost:8080 in your browser.

You can also import the project to your IDE of choice as you would with any Maven project. Read more on how to set up a development environment for Vaadin projects (Windows, Linux, macOS).

Project structure

DirectoryDescription
frontend/Client-side source directory
    index.htmlHTML template
    index.tsFrontend entrypoint, contains the client-side routing setup using Vaadin Router
    main-layout.tsMain layout Web Component, contains the navigation menu, uses App Layout
    views/UI views Web Components (TypeScript)
    themes/Custom CSS styles
src/main/java/<groupId>/Server-side source directory, contains the server-side Java views
    Application.javaServer entry-point