[Vuejs]-How can I change the locale of a VueI18n instance in a Vue file, and have it apply to all other Vue files in the application?

by

0👍

✅

Maybe there are more problems but now I see two:

  1. Your menudata should be computed instead of just ref. Right now you are creating a JS object and setting it label property to result of t() call. When global locale changes this object is NOT created again. It still holds same value the t() function returned the only time it was executed – when setup() was running

// correct

const menudata = computed<MenuItemData[]>(() => [
      {
        type: "root",
        label: t("ファイル"),
        onClick: () => {
          closeAllDialog();
        },
    // ...
    ]);

This way whenever i18n.global.locale changes, your menudata is created again with new translation

As an alternative, set label to key and use t(label) inside the template. However computed is much more effective solution…

  1. You don’t need to pass messages to useI18n() in every component. Only to the global instance. By passing config object into a useI18n() in a component you are creating Local scope which makes no sense if you are storing all translations in a single global place anyway

Leave a comment