Migration from @panter/vue-i18next (opens new window)

This package has some breaking changes compared to the @panter version.

Features no longer supported

• The v-t directive has been removed. Please use $t instead.
• The v-waitForT directive has been removed. Use v-if="$i18next.isInitialized" or hold off mounting Vue until i18next has been initialized:

const i18nInitialized = i18next.init({ ... });
Vue.use(I18NextVue, { i18next });
i18nInitialized.then(() => {
    new Vue({
        render: h => h(App),
    }).$mount("#app");
});

API changes

• i18nOptions are no longer inherited by child components. Each component is independent.
• $i18n.i18next is now $i18next. $i18n itself has been removed.
• Initialization changed from

i18next.init(...);
const i18n = new VueI18next(i18next);
new Vue({
  i18n,
  ...
}).$mount('#app')

to

i18next.init(...);
Vue.use(I18NextVue, { i18next }); // pass in an object with your i18next instance
new Vue({
  ... // no 'i18n' option anymore
}).$mount('#app')

• Plugin options
  • loadComponentNamespace has been removed without replacement.
  • bindI18n and bindStore have been replaced by the rerenderOn option
• The <i18next> component now uses named slots and the :translation prop. The slot contents can be used as {nameOfSlot} in the translated message. See the example below how to replace the tag, path and place props. These are no longer supported.

// old @panter/vue-i18next
<template>
<!-- ...some other template code... -->
    <i18next tag="p" class="value" path="license.goToTermsOfUse">
        <router-link :to="{ name: 'LICENSE' }"
                     class="link"
                     place="termsOfUse">
            {{ $t('license.termsOfUse') }}
        </router-link>
    </i18next>
</template>

to

// vi18next-vue
<template>
<!-- ...some other template code... -->
<p class="value"><!-- for a wrapper tag just use normal template syntax -->
    <i18next :translation="$t('license.goToTermsOfUse')"> <!-- translation in the parent -->
        <template #termsOfUseLink> <!-- will be referenced via {termsOfUseLink} in the localized message -->
            <router-link :to="{ name: 'LICENSE' }"
                         class="link">
                {{ $t("license.termsOfUse") }}
            </router-link>
        </template>
    </i18next>
</p>
</template>

With translations looking like this:

        en: {
            translation: {
                license: {
                    goToTermsOfUse: "Read our {termsOfUseLink}",
                    termsOfUse: 'Terms of Use'
                }
            }
       }

Other changes

The minimum tested i18next version is now 19.