Component interpolation (Vue)

info

Feature available from version 5.24.0

With FormatIcu Vue integration supports components interpolation, which can be used to map variables in translations to custom Vue components.

Example usage

import { FormatIcu } from '@tolgee/format-icu';

...

tolgee.use(FormatIcu())

Use T component with named slots, which are then mapped to the variables in the translation.

<template>
  <T
    keyName="translation_with_link" 
    defaultValue="Click this {link}"
  >
    <template v-slot:link>
      <a href="...">{{ $t('link_label', "link") }}</a>
    </template>
  </T>
</template>

<script setup>
  import { T } from '@tolgee/vue';
</script>

will output:

Click this <a href="...">link</a>