Interpolate links in translations

[Buzut]

We often require to add links into the translated text. It would be a nice addition to be able to use NuxtLink or i18nLink directly into the translation files and use these with v-html.

Let say I have something like this:

Share your <a href="/referral">translation link</a> with friends. Currently, unless I missed something, we'd need to split Share your, translation link and with friends into 3 different translation strings.

Now apart from the fact that it's more tedious, if we're dealing with languages that have different grammatical rules, the order of elements in the sentence won't stay the same, so it becomes really complex (not to mention RTL languages).

[Buzut]

Just to make it clear, currently we still can use the bare <a href="…">…</a> tag in the translation string and use v-html directive. We don't get the benefits from NuxtLink or i18nLink but it's still a working solution.

[s00d]

You can use the approach I described here:

#30

"example": "Share your {link} with friends"
"link_text": "translation link"

<i18n-t keypath="example">
  <template #link>
    <nuxt-link :to="{ name: 'referral' }">
      <i18n-t keypath="link_text" />
    </nuxt-link>
  </template>
</i18n-t>

[Buzut]

Ohhh, I get it! Didn't go deep enough in the component section of the docs. I was focused on the $t method (or any other method) and couldn't find an interpolating solution.

I'd say the i18n-t component covers 99% of use cases. But I could still benefit from a method's ability to use slots. For instance, you might want to pass content to a sub-component in the form of an object or array and don't always know in advance the content it'll be holding.

For the latter, I'm just intercepting clicks if needed (same way I do with user-generated content) and manually pass navigation to the router.

[s00d]

I can't imagine how slots can be implemented in a method. How do you see this? Could you provide an example?