v2.1.0

Feature

Publish as ESM, too #10

In addition to the CommonJS version we now also publish an ESM (EcmaScript module) version of i18next-vue. Tools should automatically pick up the right one.

v2.0.0

Happy to release the proper version 2.0 of i18next-vue for Vue 3. There are no code changes to v2.0.0-beta.5.

v2.0.0-beta.5

Bug Fixes

• Fixing the reactivity of the <i18next> translation component. With 59d40e6 we introduced a bug that would retain the initial translation even if the language changed.

v2.0.0-beta.4

Bug Fixes

• The <i18next> translation component now works in Vue 3's compatibility mode.
  • Fixes #8 (comment)

v1.1.0

Feature

Translation component that allows interpolating slots. #8

This allows putting markup and other components into your translated texts.

Available as <i18next> (automatically registered). See the docs for more details.

Example:

<template>
   <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 the translations looking like this:

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

v1.0.0

Proper 1.0 release of i18next-vue for Vue 2. There are no code changes to v1.0.0-rc.1.

v1.0.0-rc.1

Bug Fixes

• i18next is now reactive.
  • This only work in modern browsers with Proxy support, i.e. basically anything but IE. For old browsers it remains non-reactive.
  • The i18next instance accessed via $i18next will trigger a re-render the same way $t does.
  • Use e.g. {{ $i18next.language }} and it will update when the language changes.

2.0.0-beta.3

Feature:

Translation component that allows interpolating slots. #8 44008a8

This allows putting markup and other components into your translated texts.

Available as <i18next> (automatically registered) or via named export import { TranslationComponent } from "i18next-vue";. See the docs for more details.

Example:

<template>
   <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 the translations looking like this:

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

2.0.0-beta.2

Bug Fixes

• fix: Apply i18nOptions in useTranslation() t function (see #7 ) c17a00f

2.0.0-beta.1

Bug Fixes

• i18next is now reactive. Fixes #6 1f2d4d9
  • The i18next instance accessed via const { i18next } = useTranslation() or $i18next will trigger a re-render the same way $t does.
  • Use e.g. {{ $i18next.language }} and it will update when the language changes.