Component interpolation

Instead of interpolating values with {{ someValue }} in the translations you can also interpolate markup (including Vue components) by using the <i18next> component and named slots (opens new window). These can be refrenced as { someSlot } in the translations (mind the single curly braces).

This way you can move blocks of markup around freely in the tranlations.

Simple example

const locales = {
  en: {
    tos: "Term of Service",
    term: "I accept {termsOfUseLink}. {strongPromise}.",
    promise: "I promise"
  },
  de: {
    tos: "Nutzungsbedingungen",
    term: "{strongPromise}! Ich stimme den {termsOfUseLink} zu.",
    promise: "Ich versprech's"
  },
};

i18next.init({
  lng: "en",
  resources: {
    en: { translation: locales.en },
    de: { translation: locales.de }
  }
});

// ...

<template>
  <label>
    <i18next :translation="$t('term')">
      <template #termsOfUseLink>
        <a href="#" target="_blank">{{ $t("tos") }}</a>
      </template>
      <template #strongPromise>
        <strong>{{ $t("promise") }}</strong>
      </template>
    </i18next>
  </label>
</template>

For English (en) this will render

<label>
  I accept the <a href="#" target="_blank">Term of Service</a>. <strong>I promise</strong>.
</label>

For German (de) this will render

<label>
  <strong>Ich versprech's</strong>! Ich stimme den <a href="#" target="_blank">Nutzungsbedingungen</a> zu.
</label>

Mixing with normal interpolation

In the $t() call for :translation you can use all of i18next's features like interpolating values or plurals (using the normal double curly braces).

const locales = {
  en: {
    "component-greeting_one": "{greeting} single person {{whatTheyDo}}",
    "component-greeting_other": "{greeting} {{count}} people {{whatTheyDo}}",
    hello: "Greetings"
  }
};

<template>
  <label>
    <i18next :translation="$t('component-greeting, {count: 42, whatTheyDo: 'being amazing'})">
      <template #greeting>
        <strong>{{ $t('hello') }}</strong>
      </template>
    </i18next>
  </label>
</template>

This will render

<label>
  <strong>Greetings</strong> 42 people being amazing
</label>