Tags interpolation in Vue 3

[bitbybit]

Can please anybody guide me how to implement this behavior with a Vue component properly?
https://tolgee.io/js-sdk/integrations/react/tags-interpolation

vue-i18n for example has special slots for that:
https://vue-i18n.intlify.dev/guide/advanced/component.html#slots-syntax-usage

That variant outputs plain text instead of HTML:

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

// ...

Tolgee()
      .use(FormatIcu())

// ...

<T
  default-value="test1 <test>test2</test>"
  key-name="test"
  :params="{
    test: (content) => `<i title='${content}'>${content}</i>`
  }"
/>

[bitbybit]

Although with vnode function it seems to be working

import { h } from 'vue'

<T
  default-value="test1 <test>test2</test>"
  key-name="test"
  :params="{
    test: (content) => h('i', { innerHTML: content })
  }"
/>

[stepan662]

Hey, I didn't implement this for Vue, as I'm not so experienced with vue and it was not clear to me what would be a good approach. The working example that you got, is similar to the solution we have for React, but I don't think it's possible to do in Vue in a nicer way (without the h) function.

I've seen an similar approaches with the slots and with listing the available elements as children and then referencing them by index. But I didn't like that you can't really automatically pass the content to them like in React.

What would you consider a proper solution?

[bitbybit]

@stepan662 thanks for the reply

Honestly, I am not in the position to make some expert assumptions here 😅 I just wanted to make sure that at least the way I am doing it will not break things later on because of the lack of documentation on the matter.

The slot-solution seems like a bit more Vue-ish to me. Or maybe some helper component for that.

h() possibly could become a pain for more complex nested tags structure. Also, I am not enterily sure if is it possible to pass components as an argument (probably, yes) there.

[stepan662]

Ok, once I'll do a bit more research on this I'll try to implement it.

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[stepan662]

Solution for this was implemented in tolgee/tolgee-js#3327