No translations when vue-i18n used inside library

Related to https://github.com/kazupon/vue-i18n/issues/505 and https://github.com/kazupon/vue-i18n/issues/670

Context

I’m creating a package to share some vue components to my app. Both the package and the app are in vuejs and use vue-i18n to handle translations.

I build the package with the --target option.

Issue

When working on the package as a stand-alone (ie. local mode or building the package without the --target option), all translations displays correctly.

When building the package and using it inside the parent app, the translations does not show. The translation key is visible instead.

Code extract

The package (my-package)

I’m using the following command to build the package: $vue-cli-service build --target lib --name my-package ./src/all-components.js

// src/main.js (used in dev mode / stand-alone version of the package)
import Vue from 'vue';

import App from './App.vue';
import { i18n, loadLanguage } from './plugin/i18n';

new Vue({
  i18n,
  beforeCreate() {
    loadLanguage('fr');
  },
  render: (h) => h(App),
}).$mount('#app');

// src/all-components.js (used to build and share the package)
import MySharedComponent1 from '@/components/my-shared-component-1.vue';
import MySharedComponent2 from '@/components/my-shared-component-2.vue';

export default { MySharedComponent1, MySharedComponent2 };

// src/components/my-shared-component-1.vue
<template name="my-shared-component-1">
  <main>
    <h1 v-t="'article.title'" />
    <p>
      {{ $t('article.title') }}
      <span v-text="$tc('article.comments', count, { x: count })" />
    </p>
  </main>
</template>

<script>
import { loadLanguage } from '@/plugin/i18n';

export default {
  name: 'MySharedComponent1',
  props: {
    language: {
      type: String,
      default: 'fr',
    },
  },
  data() {
    return {
      count: 4,
    };
  },
  created() {
    loadLanguage(this.language);
  },
};
</script>

// src/plugins/i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';

import de from '@/locales/de.json';
import en from '@/locales/en.json';
import fr from '@/locales/fr.json';

const languages = { de, en, fr };

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'fr',
  fallbackLocale: 'fr',
  messages: { fr: languages.fr },
  silentTranslationWarn: process.env.NODE_ENV === 'production',
});

function loadLanguage(lang) {
  if (i18n.locale === lang) {
    return;
  }
  const currentLang = languages[lang] ? lang : 'fr';
  i18n.setLocaleMessage(currentLang, languages[currentLang]);
  i18n.locale = currentLang;
  document.querySelector('html').setAttribute('lang', currentLang);
}

export {
  i18n,
  loadLanguage,
};

The app (my-app)

// src/pages/home.vue
<i18n>
{
  "fr": {
    "title": "Accueil"
  },
  "de": {
    "title": "Startseite"
  },
  "en": {
    "title": "Homepage"
  }
}
</i18n>

<template>
  <div>
    <my-shared-component-1 language="en" />
    ...
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { MySharedComponent1 } from '@namespace/my-package';

export default {
  name: 'Home',
  components: {
    MySharedComponent1,
  },
  head() {
    return {
      title: this.$t('title'),
    };
  },
};
</script>

[saawsan]

So, I found something interesting.

In the generated package bundle, it seems that there is some conflicts between the vue-i18n of the package and the vue-i18n of the parent app.

Extract of the package @namespace/my-package/dist/my-package.common.js:

var i18n = new vue_i18n_esm({
  locale: 'fr',
  fallbackLocale: 'fr',
  messages: {
    fr: langages.fr
  },
  silentTranslationWarn: "production" === 'production'
});

// ...

Vue.prototype.$t = function (key) {
    var values = [], len = arguments.length - 1;
    while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];

    var i18n = this.$i18n; // Try to use the parent $i18n
    return i18n._t.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this ].concat( values ))
  };

  Vue.prototype.$tc = function (key, choice) {
    var values = [], len = arguments.length - 2;
    while ( len-- > 0 ) values[ len ] = arguments[ len + 2 ];

    var i18n = this.$i18n; // here too
    return i18n._tc.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this, choice ].concat( values ))
  };

  Vue.prototype.$te = function (key, locale) {
    var i18n = this.$i18n; // here again
    return i18n._te(key, i18n.locale, i18n._getMessages(), locale)
  };

When I comment the indicated lines, the translations of my-package appear. However, the translations of my-app are lost instead.

There are many more similar cases in the generated package. It feels that the scope of the package’s vue-i18n is not properly closed.

[kazupon]

In your Shared Library project, You need to external vue-i18n with vue.config.js.

e.g. vue.config.js configration:

module.exports = {
  // ...
  configureWebpack: config => {
    config.externals = ['vue-i18n']
  }
}