Skip to content

2.0.0-beta.3

Pre-release
Pre-release
Compare
Choose a tag to compare
@kkuegler kkuegler released this 03 Aug 17:26
· 59 commits to main since this release

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'
             }
         }
    }