Components in translations w/ Vue.

[goulashify]

Hey there,

I needed to be able to put icons into translations in Vue 3, so I made a quick component. Thought I'd share to spare some time for others.

Code

// TComp.vue
<script setup lang="ts">
import type {Component} from "vue";
import {computed} from "vue";
import {useTolgee} from "@tolgee/vue";

const tolgee = useTolgee();

const props = defineProps<{ keyName: string, defaultValue: string, params: { [k in string]: Component | string } }>();
const actualContents = computed(() => {
  let stringParams = Object.entries(props.params).filter(([k, v]) => typeof v === 'string').reduce((acc, [k, v]) => ({...acc, [k]: v}), {});
  let translated = tolgee.value.t({key: props.keyName, defaultValue: props.defaultValue, params: stringParams});

  // Separate by {.*} while keeping the separator.
  // Ex: "Click on the {icon.eye} eye icon." -> ['Click on the ', '{icon.eye}', ' eye icon.].
  let splitByTags = translated.split(/(?=<<.*>>)|(?<=<<.*>>)/g)

  // Replace separators with params, if any. These can be components.
  // Ex: ['Click on the ', '{icon.eye}', ' eye icon.] -> ['Click on the ', params['icon.eye'], ' eye icon.]
  let componentList = splitByTags.map(s => {
    let match = s.match(/<<(.*)>>/);
    if (!match) return s;

    let name = match[1];
    console.log(props.params[name]);
    return props.params[name];
  })

  return componentList;
})
</script>

<template>
  <template v-for="(c, ix) in actualContents" :key="ix">
    <template v-if="typeof c === 'string'">{{ c }}</template>
    <component v-else v-bind:is="c" v-bind:class="c.$props"></component>
  </template>
</template>

// Example.vue
<script setup lang="ts">
import {h} from "vue";
import TComp from "@/component/atom/TComp.vue";
import {QueueListIcon} from "@heroicons/vue/20/solid";

</script>

<template>
  <p class="text-gray-500 text-sm">
    <TComp key-name="page.find_agency.welcome_modal.shortlist_slide.description"
           default-value="Click on the <<shortlist_icon>> shortlist icon to see your agencies, and get in touch with them."
           :params="{ 'shortlist_icon': h(QueueListIcon, { class: 'inline-block w-4 h-4 text-gray-400 align-sub' }) }"
    />
  </p>
</template>

Example