Multiple modules

[everttrollip]

Hi,

Is it possible to use the plugin for storing localization information and translations multiple times? What I mean by this, is I would like to have a way to implement an application wide language, and a language that is independent of the app - for example a document language.

I am currently building an application where users would for example log in with the language set to German, but when they create a pdf document for example, with one of the tools in the app, they should have the possiblity of setting/toggling the translation of the document between German and English. This should not effect the application language though, which happens when I change the locale with Vue.i18n.set(newLocale).

I thought it would be possible to simply use the plugin twice, as follows:

Vue.use(
  vuexI18n.plugin,
  store,
  {
    // Will use fallback translation, default translation or key
    onTranslationNotFound(locale, key) {
      logger.warn(`i18n :: Key '${key}' not found for locale '${locale}'`);
      if (locale === 'en-GB') {
        throw new TraslationError(key, locale);
      }
    },
  },
);

Vue.use(
  vuexI18n.plugin,
  store,
  {
    moduleName: 'documentTranslations',

    // Will use fallback translation, default translation or key
    onTranslationNotFound(locale, key) {
      logger.warn(`documentTranslations :: Key '${key}' not found for locale '${locale}'`);
      if (locale === 'en-GB') {
        throw new TraslationError(key, locale);
      }
    },
  },
);

which I thought would register the internationalize plugin on the vue instance, and will generate helper functions in my Store - once for the default i18n module name and then documentTranslations for the second module name. This however, doesn't seem to work, and will always only work for the first one (I only see the i18n module in my store).

Am I missing something or misunderstanding the way this works? Is what I am trying to achieve possible?

[everttrollip]

Update: I did a quick follow-up in the documentation, and I do now notice that I can only use the plugin once.

Vue.use automatically prevents you from using the same plugin more than once, so calling it multiple times on the same plugin will install the plugin only once.

However, do you know of any way that I can resolve my issue? By that I mean being able to handle multiple language/localisation handlers?

[tikiatua]

HI @everttrollip

Thank you for submitting this issue. This is indeed a very interesting and important use case that is currently not really well supported.

The idea with the two separate modules is great. Unfortunately, it will not work as the two plugin invocations register the translation functions on the vue instance (i.e. the $t) with the same names and therefore collide with each other.

What you can do, is use the $tlang method or translateIn filter to pass the language that should be used for a translation and base this on an other value that you set specifically.

{{ 'message' | translateIn('en') }}

Please let me know if this works for you, as we are currently in the process of developing version 2 of the plugin and might need to think about this usecase some more.