Route titles and internationalization (i18n)

Hilla
1

Suggestion/Improvement/How-to:
Route titles are not localizable in the starter Hilla project.
lit-translate can be used e.g.
routes.ts:
{
path: ‘main’,
component: ‘main-view’,
title: get(‘mainView.title’)
}
lit-translate use({language-code}) is asynchronous and it loads strings AFTER routes are created, so this would return ‘[mainView.title]’ instead of the actual localized title.
To wait for resources to be loaded and also to react to language change, index.ts should listen to ‘langChanged’ lit-translate event and update the routes accordingly. E.g.
index.ts: window.addEventListener(‘langChanged’, evt => {
router.setRoutes(routes());
});
Routes.ts should dynamically return new routes with current translations
routes.ts:
export function routes() : ViewRoute {
const views: ViewRoute = […, title: get(‘mainView.title’), … ];
return […views];
}

2

For applicationName:
window.addEventListener(‘langChanged’, evt => {
appStore.applicationName = get(‘application.name’);
router.setRoutes(routes());
});

3

@zesty-panda It would be better to open an issue that the Hilla team will pick it up Issues · vaadin/hilla · GitHub

4

I think one solution, is to change the code in index.ts. For example const title = get(appStore.currentViewTitle); in the event vaadin-router-location-changed. And put the i18n code in the route title.

5

Probably a more complete solution is to do:
{
path: ‘main’,
component: ‘main-view’,
title: ‘{mainView.title}’
}
Then check is the title variable is {xxx} then use your translation package.
If the lang is updated you need to set the title of the page according to the last appStore.currentViewTitle.

6

Hello here a solution

7

export const views: ViewRoute = [
{
path: ‘’,
component: ‘list-view’,
title: ‘label.contacts’,
icon: ‘la la-user’
},
{
path: ‘companies’,
component: ‘company-list-view’,
title: ‘label.companies’,
icon: ‘la la-users’
},
{
path: ‘dashboard’,
component: ‘dashboard-view’,
icon: ‘la la-chart-area’,
title: ‘label.dashboard’,
action: async () => {
await import(‘./views/dashboard/dashboard-view’);
},
},
];

8

in main-layout

9
10

You cas see the complete solution here https://github.com/ivgallo/hilla-crm

11

Thanks for inputs, I will have a look at it later

12

I ended up with this (I do not have menu, for menu, translate() would work as mentioned by ivgallo above)

routes.ts:
…
title: ‘calculationView.title’, // title is a key to resource bundle
…
export const routes: ViewRoute = […views]; // use constant routes

index.ts:
router.setRoutes(routes);
function updateTitle() { // functionality extracted to a separate function
const title = appStore.currentViewTitle;
if (title) {
document.title = title + ’ | ’ + appStore.applicationName;
} else {
document.title = appStore.applicationName;
}
}
window.addEventListener(‘vaadin-router-location-changed’, (e) => {
appStore.setLocation((e as CustomEvent).detail.location);
updateTitle(); // update document.title
});
window.addEventListener(‘langChanged’, evt => {
appStore.applicationName = get(‘application.name’); // refresh using current language
updateTitle(); // update document.title
});

app-store.ts:
currentViewTitleI18nKey = ‘common.empty’; // get(‘common.empty’)=‘’
…
setLocation(location: RouterLocation) {
…
this.currentViewTitleI18nKey = (location?.route as any)?.title || ‘common.empty’;
}
get currentViewTitle() { // mobx computed field
return get(this.currentViewTitleI18nKey);
}