VueJS i18n replace string literals with components

Question

Lets say we have this literal array

export default {
  home: {
    title: 'The homepage',

    list: [
      'Lorem ipsum dolor sit amet, consectetur {temp1} elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      'Lorem ipsum dolor sit amet, consectetur adipiscing {temp2}, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do {temp3} incididunt ut labore et dolore magna aliqua.'
    ],
    temp1: 'adipiscing',
    temp2: 'elit',
    temp3: 'eiusmod tempor',
  }
}

Then I could simple replace the {temp} for strings like so

<ul class="home__list">
  <li>
    <BaseTransition class="home__item">
      <BaseText :text="$t('home.list[0]', { temp1: $t('home.temp1') })" size="lg-fluid" />
    </BaseTransition>
  </li>
  <li>
    <BaseTransition class="home__item">
      <BaseText :text="$t('home.list[1]', { temp2: $t('home.temp2') })" size="lg-fluid" />
    </BaseTransition>
  </li>
  <li>
    <BaseTransition class="vault__item">
      <BaseText :text="$t('home.list[2]', { temp3: $t('home.temp3') })" size="lg-fluid" />
    </BaseTransition>
  </li>
</ul>

But if I need need not temp1 to be a string but a component?

<BaseTransition type="weight">{{ $t('home.temp1) }}</BaseTransition>

I've already seen this article in the docs but is using "default" components ( tag="p" ) using slots and right now I have no clue how to adapt it for my needs

Answer 1

The solution that worked for me

<i18n path="home.list[1]" tag="BaseTransition" class="home__item">
  <template #temp2>
    <BaseTransition type="weight" tag="span">
      {{ $t('home.temp2') }}
    </BaseTransition>
  </template>
</i18n>