How to make MenuBar items translatable

[Edwin van Dessel]

Hi,

I have set up a MenuBar in my Vue3 app with the following items, all having a label based on a i18n-translation:
const items = reactive([
{
label: t("components.home_page.menu_level01_item01"),
icon: "pi pi-fw pi-user-edit",
to: "/home/notes"
},
{
label: t("components.home_page.menu_level01_item02"),
icon: "pi pi-fw pi-book",
to: "/home/sources"
},
{
label: t("components.home_page.menu_level01_item03"),
icon: "pi pi-fw pi-cog",
to: "/home/settings"
}
]);

This works perfectly, the page is displayed, initialy, with the correct items in the menu. But when I switch to a different language everything in my apps is displayed in the new language except my menu items.

I already tried with making the labels as reactive items like so:
const label01 = t("components.home_page.menu_level01_item01");
And using computed does not resolve the issue as well.

Does anybody have any experience with this and some usefull tips?

Thanx!

[bahadirsofuoglu]

Hi, You can try using ref or you can set the data again with the watcher when the language changes.